Consolidate button styles
This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.
This patchset also implements a consistent strategy for including
icon assets. Currently, svg icons are imported as CSS background
images or inlined into the markup. Inlining an svg is preferred,
especially when used with buttons or links so the colors can
be easily changed for different states (hover, focus, disabled)
without having to request variants.
The icon provider allows us to inline svgs without cluttering
the markup. Webpack config was adjusted to use svg-inline-loader
when resolving svgs that are used by the icon provider directive.
- All svgs were optimized to remove unncessary information.
- Removed unused svg color variants
- Moved icons used by icon provider to separate directory to
avoid Webpack parsing the files twice
- Small changes to navigation icons
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1ca214b74fc502e6b6e760cfee88b48110237c43
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;
+ &.full-width {
+ width: 100%;
}
- &.disabled {
- background: $primebtn__disabled-bg;
- border-color: $primebtn__disabled-bg;
- color: $primebtn__disabled-txt;
- @include fastTransition-all;
- &:hover {
- cursor: default;
- }
- }
+ .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;
}
-}
-.btn-secondary {
- color: $secbtn__text;
- background: transparent;
- border: 2px solid $secbtn__border;
- &:hover {
- color: $secbtn__text;
- cursor: pointer;
- background: $secbtn__bg;
- border-color: $secbtn__text;
- @include fastTransition-all;
- }
- &.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;
- }
- }
- 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;
- }
- img {
- width: 1.5em;
- height: 1.5em;
- display: inline-block;
- margin-right: .5em;
+ svg {
+ height: 1.2em;
+ width: auto;
}
}
-.btn-pop-out {
- position: relative;
- padding: 0 0 1em 2em;
- color: $black;
+/***
+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 {
- text-decoration: underline;
+ background-color: $btn-primary__bg--hover;
+ border-color: $btn-primary__bg--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 {
+ background: $btn-primary__bg--disabled;
+ border-color: $btn-primary__bg--disabled;
+ color: $btn-primary__txt--disabled;
+ .icon {
+ fill: $btn-primary__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-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;
+ }
+ }
+ &[disabled],
+ &.disabled {
+ background-color: $btn-secondary__bg;
+ border-color: $btn-secondary__txt--disabled;
+ color: $btn-secondary__txt--disabled;
+ .icon {
+ fill: $btn-secondary__txt--disabled;
+ }
+ }
+ .icon {
+ fill: $btn-secondary__txt;
+ }
+}
+
+/***
+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 {
+ color: $btn-tertiary__txt--hover;
+ .icon {
+ fill: $btn-tertiary__txt--hover;
+ }
+ }
+ &[disabled],
+ &.disabled {
+ color: $btn-tertiary__txt--disabled;
+ .icon {
+ fill: $btn-tertiary__txt--disabled;
+ }
+ }
+ .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 @@
$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 @@
//Disabled table elements
$disabled-row: #dddee0;
-$disabled-row-txt: #999999;
+$disabled-row-txt: $color--grey-60;
//Forms
$input-border: #a7a7a7;
@@ -30,10 +58,10 @@
// 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 @@
$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 @@
$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-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 @@
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 @@
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 @@
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 @@
}
.logo__wrapper {
padding-top: .5em;
- //position: absolute;
- //top: 50%;
- //transform: translateY(-50%);
}
.header__logo {
@@ -128,7 +125,7 @@
display: block;
font-size: 1rem;
font-weight: bold;
- margin-top: .3em;
+ margin-top: .5em;
}
}
}
@@ -211,26 +208,23 @@
}
}
.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;
+ }
+ .icon {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
}
svg {
- stroke: $medblue;
- fill: $medblue;
- height: 20px;
- width: 20px;
- display: block;
- margin: 0 auto;
- position: absolute;
- left: 50%;
- top: 55%;
- transform: translateX(-50%);
+ width: 25px;
+ height: auto;
+ fill: $color--blue-40;
}
}
}