diff options
Diffstat (limited to 'app/common/styles')
-rw-r--r-- | app/common/styles/base/buttons.scss | 211 | ||||
-rw-r--r-- | app/common/styles/base/colors.scss | 56 | ||||
-rw-r--r-- | app/common/styles/base/icons.scss | 43 | ||||
-rw-r--r-- | app/common/styles/directives/app-header.scss | 0 | ||||
-rw-r--r-- | app/common/styles/directives/app-navigation.scss | 27 | ||||
-rw-r--r-- | app/common/styles/directives/confirm.scss | 0 | ||||
-rw-r--r-- | app/common/styles/directives/index.scss | 4 | ||||
-rw-r--r-- | app/common/styles/elements/export.scss | 24 | ||||
-rw-r--r-- | app/common/styles/elements/index.scss | 1 | ||||
-rw-r--r-- | app/common/styles/elements/inline-confirm.scss | 1 | ||||
-rw-r--r-- | app/common/styles/elements/toggle-filter.scss | 13 | ||||
-rw-r--r-- | app/common/styles/layout/header.scss | 28 |
12 files changed, 196 insertions, 212 deletions
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss index f97aa6d..9aeb725 100644 --- a/app/common/styles/base/buttons.scss +++ b/app/common/styles/base/buttons.scss @@ -1,127 +1,150 @@ -button, .button, .submit, .btn, [type='button'] { - font-size: 1em; +$btn-primary__bg: $color--blue-40; +$btn-primary__bg--hover: $color--blue-30; +$btn-primary__bg--disabled: $color--grey-40; +$btn-primary__txt: $color--grey-0; +$btn-primary__txt--disabled: $color--grey-60; + +$btn-secondary__bg: $color--grey-0; +$btn-secondary__txt: $color--blue-40; +$btn-secondary__txt--hover: $color--blue-30; +$btn-secondary__txt--disabled: $color--grey-60; + +$btn-tertiary__bg: transparent; +$btn-tertiary__txt: $color--blue-40; +$btn-tertiary__txt--hover: $color--blue-30; +$btn-tertiary__txt--disabled: $color--grey-60; + +/*** +Include .btn class in addition to the button type. +These styles provide structural and base properties +shared across all buttons. The additional button +type (.btn-primary, .btn-secondary) will provide color +properties +***/ +button, +.btn, +[type='button'] { @include fontFamilyBold; + @include fastTransition-all; + border-style: solid; + border-width: 2px; + border-color: transparent; + font-size: 1em; text-transform: none; border-radius: 0; padding: .5em 1em; line-height: 1; - &:hover { - cursor: pointer; - } + display: inline-block; + cursor: pointer; + &[disabled], &.disabled { - pointer-events: none; - color: $btn__disabled-txt; - background-color: $btn__disabled-bg; - border-color: $btn__disabled-bg; - border-style: solid; - border-width: 2px; - &:hover { - cursor: default; - background: transparent; - text-decoration: none; - } + opacity: 1; + cursor: default; } -} - -.btn-primary { - color: $primebtn__text; - background: $primebtn__bg; - border: 2px solid $primebtn__bg; - &:hover { - background: lighten($primebtn__bg, 8%); - border-color: lighten($primebtn__bg, 8%); - @include fastTransition-all; - } - &.disabled { - background: $primebtn__disabled-bg; - border-color: $primebtn__disabled-bg; - color: $primebtn__disabled-txt; - @include fastTransition-all; - &:hover { - cursor: default; - } + &.full-width { + width: 100%; } + .icon, i { //button symbol font-style: normal; + font-weight: normal; text-transform: none; - font-size: 1.5em; - transform: rotate(80deg); display: inline-block; + margin-right: 0.3em; + vertical-align: bottom; } img { width: 1.5em; height: 1.5em; display: inline-block; + margin-right: 0.5em; + } + svg { + height: 1.2em; + width: auto; } } -.btn-secondary { - color: $secbtn__text; - background: transparent; - border: 2px solid $secbtn__border; + +/*** +Use for the primary use-case/s that is non-destructive. +e.g. directing to a new page, a call to action +***/ +.btn-primary { + background-color: $btn-primary__bg; + border-color: $btn-primary__bg; + color: $btn-primary__txt; &:hover { - color: $secbtn__text; - cursor: pointer; - background: $secbtn__bg; - border-color: $secbtn__text; - @include fastTransition-all; + background-color: $btn-primary__bg--hover; + border-color: $btn-primary__bg--hover; } + &[disabled], &.disabled { - pointer-events: none; - color: $btn__disabled-txt; - background-color: $btn__disabled-bg; - border-color: $btn__disabled-bg; - border-style: solid; - border-width: 2px; - &:hover { - background: $btn__disabled-bg; + background: $btn-primary__bg--disabled; + border-color: $btn-primary__bg--disabled; + color: $btn-primary__txt--disabled; + .icon { + fill: $btn-primary__txt--disabled; + } + } + .icon { + fill: $btn-primary__txt; + } +} + +/*** +Secondary buttons are actions that fall secondary or +of less priority to primary buttons. +These usually come coupled with a primary. +***/ +.btn-secondary { + background-color: $btn-secondary__bg; + border-color: $btn-secondary__txt; + color: $btn-secondary__txt; + &:hover { + background-color: $btn-secondary__bg; + border-color: $btn-secondary__txt--hover; + color: $btn-secondary__txt--hover; + .icon { + fill: $btn-secondary__txt--hover; } } - i { - // button symbol - font-style: normal; - font-weight: 400; - text-transform: none; - font-size: 1.5em; - transform: rotate(80deg) translate(-2px); - display: inline-block; - vertical-align: middle; + &[disabled], + &.disabled { + background-color: $btn-secondary__bg; + border-color: $btn-secondary__txt--disabled; + color: $btn-secondary__txt--disabled; + .icon { + fill: $btn-secondary__txt--disabled; + } } - img { - width: 1.5em; - height: 1.5em; - display: inline-block; - margin-right: .5em; + .icon { + fill: $btn-secondary__txt; } } -.btn-pop-out { - position: relative; - padding: 0 0 1em 2em; - color: $black; +/*** +Tertiary text buttons are used to identify less pressing or +optional actions given on a page. +***/ +.btn-tertiary { + background-color: $btn-tertiary__bg; + border-color: $btn-tertiary__bg; + color: $btn-tertiary__txt; &:hover { - text-decoration: underline; + color: $btn-tertiary__txt--hover; + .icon { + fill: $btn-tertiary__txt--hover; + } } - &:before { - content: ""; - position: absolute; - left: 0; - top: 0px; - width: 25px; - height: 20px; - display: inline-block; - border: 1px solid $black; - border-top: 4px solid $black; + &[disabled], + &.disabled { + color: $btn-tertiary__txt--disabled; + .icon { + fill: $btn-tertiary__txt--disabled; + } } - &:after { - content: "\2794"; - position: absolute; - transform: rotate(-45deg); - font-size: 0.9em; - font-weight: 700; - vertical-align: middle; - display: inline-block; - left: 11px; - top: 0px; + .icon { + fill: $btn-tertiary__txt; } -} +}
\ No newline at end of file diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss index 03e8e19..f5f93f0 100644 --- a/app/common/styles/base/colors.scss +++ b/app/common/styles/base/colors.scss @@ -1,7 +1,39 @@ +// Base colors +$color--blue-100: #1B2834; +$color--blue-50: #1D3458; +$color--blue-40: #2D60E5; +$color--blue-30: #7295F1; +$color--blue-20: #CCD7F4; + +$color--grey-100: #333333; +$color--grey-80: #666666; +$color--grey-60: #999999; +$color--grey-40: #CCCCCC; +$color--grey-30: #DCDEE0; +$color--grey-20: #F0F2F5; +$color--grey-10: #FAFBFC; +$color--grey-0: #FFFFFF; + +// Status colors +$color--teal-70: #098292; +$color--teal-50: #00B6CB; +$color--teal-20: #CCF0F5; + +$color--green-50: #0A7D06; +$color--green-20: #C6E8C5; + +$color--yellow-70: #EFC100; +$color--yellow-50: #FEDF39; +$color--yellow-40: #FFDF99; +$color--yellow-20: #FFF8E4; + +$color--red-50: #DA1416; +$color--red-20: #FAD3D3; + // Global -$white: #ffffff; -$black: #333; -$darkgrey: #666; +$white: $color--grey-0; +$black: $color--grey-100; +$darkgrey: $color--grey-80; $medgrey: #d7dbe0; $lightgrey: #f5f7fa; $lightblue: #f1f2f6; @@ -10,10 +42,6 @@ $darkblue: #1e3359; $purple: #5A3EC8; $field__disabled: #e6e6e6; $field__focus: #3C6DEF; -$btn__disabled-txt: #a6a5a6; -$btn__disabled-bg: #d8d8d8; -$primebtn__disabled-txt: #999999; -$primebtn__disabled-bg: #CCCCCC; // Dark background $darkbg__grey: #E3ECEC; @@ -22,7 +50,7 @@ $darkbg__primary: #19273c; //Disabled table elements $disabled-row: #dddee0; -$disabled-row-txt: #999999; +$disabled-row-txt: $color--grey-60; //Forms $input-border: #a7a7a7; @@ -30,10 +58,10 @@ $input-border: #a7a7a7; // Light Background $lightbg__grey: #b8c1c1; $lightbg__accent: #d8e2fc; -$lightbg__primary: #2d60e5; +$lightbg__primary: $color--blue-40; // Primary Button colors -$primebtn__bg: #2d60e5; +$primebtn__bg: $color--blue-40; $primebtn__text: $white; // Secondary Button colors @@ -67,13 +95,13 @@ $low-lightbg: #c42cd6; $normal: #00baa1; // Priority tags -$lowPriorityColor: #00b6cb; +$lowPriorityColor: $color--teal-50; $lowPriorty-bg: #cdf0f6; $medPriorityColor: #feb101; $medPriorty-bg: #fef0cd; $highPriorityColor: #e62425; $highPriority-bg: #edc9cb; -$resolvedColor: #999999; +$resolvedColor: $color--grey-60; $resolved-bg: #d6d6d6; @@ -87,7 +115,7 @@ $active: #c6b6f5; $inactive: $severity-medium-lightbg; // Links -$links: #2d60e5; +$links: $color--blue-40; $links__hover: $lightbg__primary; $links__visited: #8ea7ea; $links__disabled: rgba(27, 40, 52, 0.70); @@ -98,4 +126,4 @@ $nav__second-level-color: #e6e9ed; $nav__second-level-text-color: #4b5d78; //Loader -$loaderColor: #1d3458; +$loaderColor: $color--blue-50; diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss index 557c857..bd5b9a6 100644 --- a/app/common/styles/base/icons.scss +++ b/app/common/styles/base/icons.scss @@ -1,13 +1,7 @@ .icon { display: inline-block; - width: 20px; - height: 20px; - position: relative; - speak: none; - font-style: normal; - &.icon-as-spacer { - text-indent: -9999px; - } + width: 1.5em; + height: auto; } .icon__more { @@ -33,6 +27,7 @@ } .icon__bar-arrow { + font-style: normal; &:before { content: '\21E5'; position: absolute; @@ -46,6 +41,7 @@ } .icon-angle { + font-style: normal; &:before { content: '\276F'; display: inline-block; @@ -88,21 +84,6 @@ background-image: url(../assets/images/icon-off.svg); } -.icon__return { - @include status-icon; - background-image: url(../assets/images/icon-return.svg); -} - -.icon__standby { - @include status-icon; - background-image: url(../assets/images/icon-standby.svg); -} - -.icon__plus { - @include status-icon; - background-image: url(../assets/images/icon-plus.svg); -} - .icon__info{ margin-top: -4px; margin-right: .5em; @@ -122,22 +103,8 @@ background: url(../assets/images/icon-arrow-gray.svg) center center no-repeat; } } + .icon__down-arrow { @extend .icon__up-arrow; transform: rotate(180deg); } - -.icon__edit { - @include status-icon; - background-image: url(../assets/images/icon-edit-blue.svg); -} - -.icon__delete { - @include status-icon; - background-image: url(../assets/images/icon-trashcan-blue.svg); -} - -.icon__close { - @include status-icon; - background-image: url(../assets/images/crit-x-black.svg); -} diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss deleted file mode 100644 index e69de29..0000000 --- a/app/common/styles/directives/app-header.scss +++ /dev/null diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss index 1e21659..79eb11e 100644 --- a/app/common/styles/directives/app-navigation.scss +++ b/app/common/styles/directives/app-navigation.scss @@ -8,8 +8,8 @@ $nav__seclvlWidth: 240px; max-height: 40px; stroke-width: .5; display: block; - width: 40px; - margin: 0 auto .5em auto; + margin: .5em auto; + overflow: hidden; .st0 { fill: none; stroke: $white; @@ -46,13 +46,21 @@ $nav__seclvlWidth: 240px; li { margin: 0; } + > li > a, + > li > button { + height: 120px; + } //svg icons .nav-icon { @include navIcons; + width: 100%; + svg { + width: 36px; + height: auto; + } } .button, button, a { background: transparent; - height: auto; border: 0; color: $white; fill: $white; @@ -66,16 +74,9 @@ $nav__seclvlWidth: 240px; text-decoration: none; border-top: 1px solid transparent; border-bottom: 1px solid $darkgrey; - a { - margin-bottom: 5px; - } - span { - margin: 1em 0 0 0; - display: block; - font-size: .9em; - font-weight: 400; - line-height: 1rem; - } + font-weight: normal; + font-size: .9em; + line-height: 1.2; &:hover { background: $white; fill: $black; diff --git a/app/common/styles/directives/confirm.scss b/app/common/styles/directives/confirm.scss deleted file mode 100644 index e69de29..0000000 --- a/app/common/styles/directives/confirm.scss +++ /dev/null diff --git a/app/common/styles/directives/index.scss b/app/common/styles/directives/index.scss index a70c007..5d9de6f 100644 --- a/app/common/styles/directives/index.scss +++ b/app/common/styles/directives/index.scss @@ -1,3 +1 @@ -@import "./app-header.scss"; -@import "./app-navigation.scss"; -@import "./confirm.scss";
\ No newline at end of file +@import "./app-navigation.scss";
\ No newline at end of file diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss deleted file mode 100644 index 545e3f3..0000000 --- a/app/common/styles/elements/export.scss +++ /dev/null @@ -1,24 +0,0 @@ -//Export button -.btn-export { - color: $black; - font-size: .9em; - font-weight: 700; - position: relative; - padding: 0 0 0 2em; - margin-right: .6em; - text-decoration: none; - margin-top: 0; - &:hover { - text-decoration: underline; - } -} -.btn-export:before { - content: '\21E5'; - position: absolute; - font-size: 1.7em; - vertical-align: middle; - transform: rotate(90deg); - display: inline-block; - left: 2px; - top: -7px; -}
\ No newline at end of file diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss index 25162bb..c8bbfce 100644 --- a/app/common/styles/elements/index.scss +++ b/app/common/styles/elements/index.scss @@ -8,7 +8,6 @@ @import "content-search"; @import "paginate"; @import "tags"; -@import "export"; @import "modals"; @import "quicklinks"; @import "toast"; diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss index c65e5de..873e66e 100644 --- a/app/common/styles/elements/inline-confirm.scss +++ b/app/common/styles/elements/inline-confirm.scss @@ -26,7 +26,6 @@ border: 2px solid $white; padding: 1em 2.2em; margin: 0 10px; - border-radius: 4px; &:focus, &.default { background: $primebtn__bg; diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss index ebdcf91..94c94d1 100644 --- a/app/common/styles/elements/toggle-filter.scss +++ b/app/common/styles/elements/toggle-filter.scss @@ -14,13 +14,12 @@ } margin-right: 2em; margin-bottom: 1em; - button { - margin: 3px -3px; - padding: .6em 2em; - font-size: .9em; - font-weight: 700; - border-radius: 0; - display: inline-block; + .btn { + float:left; + width: 100px; + &:not(:first-of-type) { + border-left-width: 1px; + } } .btn-primary { border: 2px solid $primebtn__bg; diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss index 56460c6..034c49e 100644 --- a/app/common/styles/layout/header.scss +++ b/app/common/styles/layout/header.scss @@ -79,9 +79,6 @@ $logoMaxWidth: 125px; } .logo__wrapper { padding-top: .5em; - //position: absolute; - //top: 50%; - //transform: translateY(-50%); } .header__logo { @@ -128,7 +125,7 @@ $logoMaxWidth: 125px; display: block; font-size: 1rem; font-weight: bold; - margin-top: .3em; + margin-top: .5em; } } } @@ -211,26 +208,23 @@ $logoMaxWidth: 125px; } } .header__page-refresh { - padding: 0 0.5rem 0.6rem; - position: relative; + padding-top: 1em; span { font-size: 0.875em; font-weight: 400; color: $darkgrey; display: block; - margin-bottom: 1.1em; + margin-bottom: .2em; } - svg { - stroke: $medblue; - fill: $medblue; - height: 20px; - width: 20px; + .icon { display: block; - margin: 0 auto; - position: absolute; - left: 50%; - top: 55%; - transform: translateX(-50%); + margin-left: auto; + margin-right: auto; + } + svg { + width: 25px; + height: auto; + fill: $color--blue-40; } } } |