/*------------------------------------------------------------------ [Table of contents] # overwrite some style of stylus -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [General Reset] */ @import '~vuetify/src/stylus/generic/_reset' /*------------------------------------------------------------------ [General Bootstrap] Include theme variables, mixins, colors */ @import '~vuetify/src/stylus/bootstrap' /*------------------------------------------------------------------ [Generic Animations] */ @import '~vuetify/src/stylus/generic/_animations' /*------------------------------------------------------------------ [Generic Colors] */ @import '~vuetify/src/stylus/generic/_colors' /*------------------------------------------------------------------ [Generic Elevations] */ @import '~vuetify/src/stylus/generic/_elevations' /*------------------------------------------------------------------ [Generic Transitions] */ @import '~vuetify/src/stylus/generic/_transitions' /*------------------------------------------------------------------ [Common Html Elements] */ @import '~vuetify/src/stylus/elements/_global' @import '~vuetify/src/stylus/elements/_blockquote' @import '~vuetify/src/stylus/elements/_code' @import '~vuetify/src/stylus/elements/_headings' @import '~vuetify/src/stylus/elements/_lists' @import '~vuetify/src/stylus/elements/_typography' /*------------------------------------------------------------------ [Common Styling helpers] */ @import '~vuetify/src/stylus/trumps/_display' @import '~vuetify/src/stylus/trumps/_spacing' @import '~vuetify/src/stylus/trumps/_text' @import '~vuetify/src/stylus/trumps/_helpers' /*------------------------------------------------------------------ [Components Alert] */ @import '~vuetify/src/stylus/components/_alerts' /*------------------------------------------------------------------ [Components App] */ @import '~vuetify/src/stylus/components/_app' /*------------------------------------------------------------------ [Components AutoComplete] */ @import '~vuetify/src/stylus/components/_autocompletes' /*------------------------------------------------------------------ [Components Avatar] */ @import '~vuetify/src/stylus/components/_avatars' /*------------------------------------------------------------------ [Components Badge] */ @import '~vuetify/src/stylus/components/_badges' /*------------------------------------------------------------------ [Components Bottom Nav] */ @import '~vuetify/src/stylus/components/_bottom-navs' /*------------------------------------------------------------------ [Components Bottom Sheet] */ @import '~vuetify/src/stylus/components/_bottom-sheets' /*------------------------------------------------------------------ [Components Breadcrumb] */ @import '~vuetify/src/stylus/components/_breadcrumbs' /*------------------------------------------------------------------ [Components Toggle Buttom] */ @import '~vuetify/src/stylus/components/_button-toggle' /*------------------------------------------------------------------ [Components Button] */ @import '~vuetify/src/stylus/components/_buttons' /*------------------------------------------------------------------ [Components Card] */ @import '~vuetify/src/stylus/components/_cards' /*------------------------------------------------------------------ [Components Carousel] */ @import '~vuetify/src/stylus/components/_carousel' /*------------------------------------------------------------------ [Components Chip] */ @import '~vuetify/src/stylus/components/_chips' /*------------------------------------------------------------------ [Components Content] */ @import '~vuetify/src/stylus/components/_content' /*------------------------------------------------------------------ [Components Counter] */ @import '~vuetify/src/stylus/components/_counters' /*------------------------------------------------------------------ [Components Data Iterator] */ @import '~vuetify/src/stylus/components/_data-iterator' /*------------------------------------------------------------------ [Components Data Table] */ @import '~vuetify/src/stylus/components/_data-table' /*------------------------------------------------------------------ [Components Date Picker] */ @import '~vuetify/src/stylus/components/_date-picker-header' @import '~vuetify/src/stylus/components/_date-picker-table' @import '~vuetify/src/stylus/components/_date-picker-title' @import '~vuetify/src/stylus/components/_date-picker-years' /*------------------------------------------------------------------ [Components Dialog] */ @import '~vuetify/src/stylus/components/_dialogs' /*------------------------------------------------------------------ [Components Divider] */ @import '~vuetify/src/stylus/components/_dividers' /*------------------------------------------------------------------ [Components Expansion Panel] */ @import '~vuetify/src/stylus/components/_expansion-panel' /*------------------------------------------------------------------ [Components Footer] */ @import '~vuetify/src/stylus/components/_footer' /*------------------------------------------------------------------ [Components Form] */ @import '~vuetify/src/stylus/components/_forms' /*------------------------------------------------------------------ [Components Grid] */ @import '~vuetify/src/stylus/components/_grid' /*------------------------------------------------------------------ [Components Icon] */ @import '~vuetify/src/stylus/components/_icons' /*------------------------------------------------------------------ [Components Input] */ @import '~vuetify/src/stylus/components/_inputs' /*------------------------------------------------------------------ [Components Jumbotrons] */ @import '~vuetify/src/stylus/components/_jumbotrons' /*------------------------------------------------------------------ [Components Label] */ @import '~vuetify/src/stylus/components/_labels' /*------------------------------------------------------------------ [Components List] */ @import '~vuetify/src/stylus/components/_lists' .v-list .v-list__tile--link:hover, .v-list__tile--highlighted, .v-list__group__header:hover .v-list__group--active:before, .v-list__group--active:after background: #f5f5f5!important /*------------------------------------------------------------------ [Components Menu] */ @import '~vuetify/src/stylus/components/_menus' /*------------------------------------------------------------------ [Components Message] */ @import '~vuetify/src/stylus/components/_messages' /*------------------------------------------------------------------ [Components Navigation Drawer] */ @import '~vuetify/src/stylus/components/_navigation-drawer' /*------------------------------------------------------------------ [Components Overflow Button] */ @import '~vuetify/src/stylus/components/_overflow-buttons' /*------------------------------------------------------------------ [Components Overlay] */ @import '~vuetify/src/stylus/components/_overlay' /*------------------------------------------------------------------ [Components Pagination] */ @import '~vuetify/src/stylus/components/_pagination' /*------------------------------------------------------------------ [Components Parallax] */ @import '~vuetify/src/stylus/components/_parallax' /*------------------------------------------------------------------ [Components Picker] */ @import '~vuetify/src/stylus/components/_pickers' /*------------------------------------------------------------------ [Components Progress] */ @import '~vuetify/src/stylus/components/_progress-circular' @import '~vuetify/src/stylus/components/_progress-linear' /*------------------------------------------------------------------ [Components Radio] */ @import '~vuetify/src/stylus/components/_radio-group' @import '~vuetify/src/stylus/components/_radios' /*------------------------------------------------------------------ [Components Range Slider] */ @import '~vuetify/src/stylus/components/_range-sliders' /*------------------------------------------------------------------ [Components Ripple] */ @import '~vuetify/src/stylus/components/_ripples' /*------------------------------------------------------------------ [Components Select] */ @import '~vuetify/src/stylus/components/_select' @import '~vuetify/src/stylus/components/_selection-controls' /*------------------------------------------------------------------ [Components Slider] */ @import '~vuetify/src/stylus/components/_sliders' /*------------------------------------------------------------------ [Components Small Dialog] */ @import '~vuetify/src/stylus/components/_small-dialog' /*------------------------------------------------------------------ [Components Snackbar] */ @import '~vuetify/src/stylus/components/_snackbars' /*------------------------------------------------------------------ [Components Speed Dial] */ @import '~vuetify/src/stylus/components/_speed-dial' /*------------------------------------------------------------------ [Components Stepper] */ @import '~vuetify/src/stylus/components/_steppers' /*------------------------------------------------------------------ [Components Subheader] */ @import '~vuetify/src/stylus/components/_subheaders' /*------------------------------------------------------------------ [Components Switch] */ @import '~vuetify/src/stylus/components/_switch' /*------------------------------------------------------------------ [Components System Bar] */ @import '~vuetify/src/stylus/components/_system-bars' /*------------------------------------------------------------------ [Components Table] */ @import '~vuetify/src/stylus/components/_tables' /*------------------------------------------------------------------ [Components Tab] */ @import '~vuetify/src/stylus/components/_tabs' /*------------------------------------------------------------------ [Components Text Field] */ @import '~vuetify/src/stylus/components/_text-fields' /*------------------------------------------------------------------ [Components Text Area] */ @import '~vuetify/src/stylus/components/_textarea' /*------------------------------------------------------------------ [Components Time Picker] */ @import '~vuetify/src/stylus/components/_time-picker-clock' @import '~vuetify/src/stylus/components/_time-picker-title' /*------------------------------------------------------------------ [Components Toolbar] */ @import '~vuetify/src/stylus/components/_toolbar' /*------------------------------------------------------------------ [Components Tooltip] */ @import '~vuetify/src/stylus/components/_tooltips' /*------------------------------------------------------------------ [FontAwesome] */ /*------------------------------------------------------------------ [Global] */ body font-family: $body-font-family font-size: $font-size-root font-weight: $font-weights.regular line-height: $line-height-root h1 font-size: 48px font-weight: $font-weights.thin letter-spacing: -1.5 h2 font-size: 36px font-weight: $font-weights.light letter-spacing: -0.5 h3 font-size: 24px font-weight: $font-weights.light letter-spacing: normal h4 font-size: 20px font-weight: $font-weights.light letter-spacing: normal h5 font-size: 16px font-weight: $font-weights.regular letter-spacing: normal /*------------------------------------------------------------------ [4. Components / Card] */ .v-card // box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03) box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16); &__actions .v-btn margin: 0 8px; min-width: 56px &:first-child margin-left: 0 /*------------------------------------------------------------------ [Components / Timeline] */ .timeline position: relative; list-style: none; padding-left: 0; z-index: 1 &-block display: -webkit-box; display: flex &-detail -webkit-box-flex: 1; flex: 1 1 0%; padding-bottom: 30px @media $display-breakpoints.sm-and-down display: none; &-point position: relative; flex-shrink: 0; -webkit-box-flex: 0; flex-grow: 0; -webkit-box-ordinal-group: 3; order: 2; width: 96px; padding-bottom: 30px; text-align: center &-point::before content: ''; position: absolute; top: 9px; left: 50%; bottom: -9px; width: 1px; margin-left: -1px; z-index: -1; background-color: #ebebeb; & &-block:last-child &-point::before bottom: 0 !important; & &-block:first-child &-point::after content: ''; position: absolute; top: 0; left: 50%; display: inline-block; width: 4px; height: 4px; margin-left: -2px; border-radius: 50% & &-block:last-child &-point::after content: ''; position: absolute; left: 50%; bottom: 0; display: inline-block; width: 6px; height: 6px; margin-left: -3px; border-radius: 50% &-content -webkit-box-flex: 1; flex: 1 1 0%; margin-bottom: 60px &-period position: relative; padding: 30px 0; text-align: center; font-size: 20px; font-weight: 300; &-period::after content: ''; position: absolute; top: 0; left: 50%; display: inline-block; width: 6px; height: 6px; margin-left: -3px; background-color: #ebebeb; border-radius: 50% & &-period:first-child::after display: none; &-point-xs &-point width: 32px &-point-sm &-point width: 64px &-point-lg &-point width: 128px &-point-xl &-point width: 256px @media $display-breakpoints.md-and-down & &-block &-detail -webkit-box-ordinal-group:2; order: 1; & &-block &-content -webkit-box-ordinal-group: 4; order: 3 @media $display-breakpoints.md-and-up & &-block:nth-child(even) &-detail -webkit-box-ordinal-group:2; order: 1; text-align: right & &-block:nth-child(even) &-content -webkit-box-ordinal-group: 4; order: 3 & &-block:nth-child(odd) &-detail -webkit-box-ordinal-group: 4; order: 3; text-align: left & &-block:nth-child(odd) &-content -webkit-box-ordinal-group: 2; order: 1 &&-content-left &-block &-detail -webkit-box-ordinal-group: 4; order: 3; text-align: left &&-content-left &-block &-content -webkit-box-ordinal-group: 2; order: 1; &&-content-right &-block &-detail -webkit-box-ordinal-group: 2; order: 1; &&-content-right &-block &-content -webkit-box-ordinal-group: 4; order: 3 ; &&-activity &-content margin-bottom: 10px /*------------------------------------------------------------------ [Components / Chat] */ .chat &-history &--toolbar box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03) &--list a.list__tile--active background: #eee &--scrollbar height:calc(100vh - 48px) @media $display-breakpoints.sm-and-down height:calc(100vh - 48px - 56px) &-room &--toolbar box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03) &--scrollbar height: calc(100vh - 48px - 80px) /*------------------------------------------------------------------ [Components / mail] */ .mail &-toolbar border-bottom: 1px solid rgba(0,0,0,0.12) &-list &--layout padding-top: 64px!important @media $display-breakpoints.sm-and-down padding-top: 56px!important &--toolbar margin-top: 64px!important @media $display-breakpoints.sm-and-down margin-top: 56px!important .check-all flex: 0 0 margin-top: 0 &--wrap height: calc(100vh - 64px - 64px) &-reply &--layout padding-top: 64px!important @media $display-breakpoints.sm-and-down padding-top: 56px!important &--toolbar margin-top: 64px !important @media $display-breakpoints.sm-and-down margin-top: 56px!important &--scrollbar height: calc(100vh - 64px - 64px) @media $display-breakpoints.sm-and-down height : calc(100vh - 56px - 56px)