diff options
Diffstat (limited to 'app/common/styles/base')
| -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 |
3 files changed, 164 insertions, 146 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); -} |
