From c4d96258a68bf899d022dafff91d6593640365be Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 9 Nov 2016 22:36:06 +0100 Subject: [PATCH] Move basic classes to Pillar's apps_base.sass --- src/styles/_app_base.sass | 362 +------------------------------------- 1 file changed, 2 insertions(+), 360 deletions(-) diff --git a/src/styles/_app_base.sass b/src/styles/_app_base.sass index d9c815f..7106428 100644 --- a/src/styles/_app_base.sass +++ b/src/styles/_app_base.sass @@ -4,7 +4,6 @@ body left: 0 right: 0 bottom: 0 - background-color: $color-background-light &[data-context="task"] overflow: hidden // columns scroll independently @@ -29,196 +28,6 @@ body .col_header box-shadow: none -$splitter-width: 5px - -#app-main - display: flex - align-items: stretch - position: relative - height: 100% - - +media-xs - display: block - height: auto - -#col_sidebar - width: $sidebar-width - min-width: $sidebar-width - -#col_left, #col_main, #col_right - position: relative - flex: 0 0 auto - min-width: 150px - height: 100% - min-height: 100% - position: relative - - +media-xs - height: auto - min-height: auto - margin: 0 auto - padding-left: $sidebar-width !important - -#col_main - background-color: $color-background - width: 50% // gets overriden by JS, dragging the col-splitter - +media-xs - width: 100% - -#col_right - flex: 1 1 auto - -.col_header - position: relative - z-index: 1 - display: flex - align-items: center - width: 100% - min-height: 50px - background-color: white - padding: 10px 15px - - font-size: 1.2em - border-bottom: thin solid $color-background - box-shadow: 0 0 15px rgba(black, .2) - - &.scrolled - box-shadow: 0 -2px 20px rgba(black, .2) - - .header_text::first-letter - text-transform: capitalize - -.col-list-item - display: flex - align-items: center - width: 100% - background-color: white - border-bottom: thin solid $color-background - - &.empty - padding: 15px - justify-content: center - span - cursor: default - text-align: center - color: $color-text-dark-secondary - i - margin-right: 5px - display: inline-block - transform-origin: 50% 60% - - &:hover span i - +animation-wiggle - -.col-splitter - flex: 0 0 auto - width: $splitter-width - background-color: $color-background - border-left: thin solid $color-background-light - border-right: 2px solid $color-background-dark - min-height: 200px - cursor: col-resize - top: 0 - bottom: 0 - z-index: 1 - - +media-xs - display: none - visibility: hidden - -::-webkit-scrollbar - width: 5px - height: 5px - -::-webkit-scrollbar-track - background-color: $color-background - -::-webkit-scrollbar-thumb - background-color: $color-text-dark-hint - -.flyout.notifications - left: $sidebar-width + 5 - top: initial - bottom: 40px - box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25) - - -/* Sidebar */ -nav.sidebar - position: fixed - z-index: 1 - left: 0 - width: $sidebar-width - height: 100% - background-color: $color-background-nav-dark - display: flex - flex-direction: column - - .dropdown - min-width: $sidebar-width - .dropdown-menu - top: initial - bottom: 3px - left: $sidebar-width - box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25) - min-width: 200px - - li a - justify-content: flex-start - - ul - width: 100% - margin: 0 - padding: 0 - - &.bottom - margin-top: auto - - li - display: block - - a.navbar-item, button - display: flex - color: $color-text-light-hint - font-size: 1.5em - align-items: center - justify-content: center - padding: 10px 0 - background: transparent - border: none - width: 100% - text-decoration: none - - &:hover - color: $color-text-light-primary - &:active - outline: none - - &.cloud - i - position: relative - left: -4px - - a.dropdown-toggle - padding: 0 - margin: 0 - width: $sidebar-width - max-width: $sidebar-width - - .special - top: 8px - left: 27px - - #notifications-toggle - &.active .flyout-hat - display: none - #notifications-count - right: 5px - span - top: 1px - -.input-group-flex - display: flex .input-group width: 100% @@ -227,103 +36,22 @@ nav.sidebar label padding-right: 10px - font-weight: normal - color: $color-text-dark-primary min-width: 80px + white-space: nowrap &.select_multiple margin-bottom: 10px -input, input.form-control - background-color: transparent - .input-group input, textarea, select - border-radius: 0 - - input, textarea, select - border: thin solid transparent - border-bottom-color: $color-background-dark - padding: 5px margin-top: 10px margin-bottom: 10px width: 100% - transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out - - &:hover - border-bottom-color: $color-text-dark-secondary - - &:focus - outline: 0 - border-bottom-color: $color-primary - box-shadow: 0 1px 0 0 $color-primary - - select - border-top-left-radius: 3px - border-top-right-radius: 3px - background-color: $color-background-light - - option - background-color: white - button &#item-save +button($color-success, 3px) - textarea - resize: vertical - -.input-group-separator - margin: 10px 0 - border-top: thin solid $color-background - -#status-bar - color: $color-text-dark-secondary - margin-left: auto - text-align: right - -.table - display: table - width: 100% - position: relative - margin-bottom: initial // overrides BS - - .table-row - display: table-row - .table-head - display: table-header-group - - .table-cell - font-size: .9em - color: $color-text-dark-secondary - - .table-body - display: table-row-group - - .table-cell - display: table-cell - border-bottom: thin solid $color-background-dark - vertical-align: middle - - span.hint - color: $color-text-dark-hint - - .table-cell-spacer - background-color: $color-background-light - width: 6px - min-width: 4px - height: 100% - display: table-cell - border: 2px solid $color-background - border-top: none - border-bottom: none - cursor: e-resize - -.table.table-hover - .table-row:hover - background-color: $color-background-light - /* Attract specific table tweaks */ .item-list overflow-x: scroll @@ -361,11 +89,7 @@ input, input.form-control color: $color-primary .table-body - display: table-row-group - .table-row - position: relative - &.active background-color: $color-background-active @@ -499,80 +223,7 @@ input, input.form-control +text-overflow-ellipsis a.item-project color: $color-text-dark-secondary - margin-left: 10px - -/* Generic Statuses */ -.processing - +stripes(rgba(black, .1), rgba(white, .1), -45deg, 25px) - +stripes-animate - animation-duration: 2s - -.flash-on - background-color: lighten($color-success, 40%) !important - border-color: lighten($color-success, 40%) !important - color: darken($color-success, 10%) !important - text-shadow: 1px 1px 0 white - transition: all .1s ease-in - img - transition: all .1s ease-in - opacity: .8 - - &:before - background-color: lighten($color-success, 40%) !important - -.flash-off - transition: all 1s ease-out - img - transition: all 1s ease-out - -.btn:active - box-shadow: none - -.bg-status - @include status-color-property(background-color, '', 'dark') - -.fg-status - @include status-color-property(color, '', 'dark') - - -/* Modal Bootstrap overrides */ -.modal-dialog - margin-top: 0 -.modal-content - border: none - box-shadow: 0 0 25px rgba(black, .25) - background-color: $color-background-light - - .modal-header - background-color: white - padding: 10px 10px 10px 15px - - .title - font-size: 1.2em - - .close - float: right - background: transparent - border: none - color: $color-text-dark-hint - - &:hover - color: $color-primary - -.modal-backdrop - background-color: transparent - -.modal-help-panel - overflow: hidden - border-radius: 3px - width: 30% - background-color: white - box-shadow: 1px 2px 10px rgba(black, .1) - - .title - display: block - padding: 10px - color: $color-text-dark-primary + margin-right: 10px /* Debug styles, such as status color legend on help */ @@ -612,14 +263,6 @@ input, input.form-control .dark @include status-color-property(background-color, '', 'dark') -.collapsing - transition: all 150ms ease-in-out - opacity: 0 - -.collapse - transition: all 250ms ease-in-out - &.in - opacity: 1 /* General style for activities in all places */ .d-activity @@ -698,7 +341,6 @@ input, input.form-control border-color: $color-text-dark-primary - #item-details overflow-x: hidden