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/directives/app-header.html b/app/common/directives/app-header.html
index 050ac05..a9c41b4 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -20,9 +20,7 @@
</p>
<button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
<span>Refresh</span>
- <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91">
- <path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/>
- </svg>
+ <icon file="icon-restart.svg"></icon>
</button>
</div>
</div>
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 379aa3d..6bd2c79 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -2,20 +2,16 @@
<ul id="nav__top-level" ng-style="navStyle">
<li>
<a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M23.9 18.2l3.3 3.3 1.1-1.1-4.4-4.4-7.8 7.8-3.3-3.3-1.1 1.1 4.4 4.4 7.8-7.8z"/><path d="M5 8v24h30V8H5zm28 22H7V12h26v18z"/></svg>
- Server overview
- </span>
+ <icon class="nav-icon" file="icon-overview.svg"></icon>
+ Server overview
</a>
</li>
<li>
<button class="btn-health"
- ng-class="{opened: firstLevel == 'server-health'}"
- ng-click="change('server-health')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M32 12.9V16H8V8h19M8 16h24v8H8zM8 24h24v8H8zM19 12h8M11 12h2M19 20h8M11 20h2M19 28h8M11 28h2"/><path d="M36.4 4l1.1 1.1-5.1 5.1-2.9-2.8 1.2-1.2L32.4 8z"/></svg>
- Server health
- </span>
+ ng-class="{opened: firstLevel == 'server-health'}"
+ ng-click="change('server-health')">
+ <icon class="nav-icon" file="icon-health.svg"></icon>
+ Server health
</button>
<ul class="nav__second-level btn-health"
ng-style="navStyle"
@@ -40,10 +36,8 @@
</li>
<li>
<button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M8 12h24M8 20h24M8 28h24"/><path class="st1" d="M24 28h4M18 20h4M12 12h4"/></svg>
- Server control
- </span>
+ <icon class="nav-icon" file="icon-control.svg"></icon>
+ Server control
</button>
<ul class="nav__second-level btn-control"
ng-style="navStyle"
@@ -80,10 +74,8 @@
</li>
<li>
<button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M31.5 20c0-.6-.1-1.2-.2-1.8L35 15l-3.1-5.1-4.4 1.4c-1.1-.9-2.3-1.6-3.6-2.1L23 5h-6l-1 4.2c-1.3.5-2.5 1.2-3.6 2.1L8.1 9.9 5 15l3.7 3.2c-.1.6-.2 1.2-.2 1.8 0 .6.1 1.2.2 1.8L5 25l3.1 5.1 4.4-1.4c1.1.9 2.3 1.6 3.6 2.1l1 4.2h6l1-4.2c1.3-.5 2.5-1.2 3.6-2.1l4.4 1.4L35 25l-3.7-3.2c.1-.6.2-1.2.2-1.8zm.9 5.4L31 27.7l-2.9-.9-1.1-.4-.9.7c-.9.8-1.9 1.3-2.9 1.7l-1 .4-.2 1.1-.6 2.7h-2.8l-.6-2.7-.2-1.1-1-.4c-1.1-.4-2.1-1-2.9-1.7l-.9-.7-1.1.4-2.9.9-1.4-2.3 2.4-2.1.8-.7-.2-1.1c-.1-.5-.1-1-.1-1.5 0-.4 0-.9.1-1.5l.2-1.1-.8-.7-2.4-2.1L9 12.3l2.9.9 1.1.4.9-.7c.9-.8 1.9-1.3 2.9-1.7l1-.4.2-1.1.6-2.7h2.8l.6 2.7.2 1.1 1 .4c1.1.4 2.1 1 2.9 1.7l.9.7 1.1-.4 2.9-.9 1.4 2.3-2.4 2.1-.8.7.2 1.1c.1.6.1 1 .1 1.5s0 .9-.1 1.5l-.2 1.1.8.7 2.4 2.1z"/><path d="M20 15c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
- Server configuration
- </span>
+ <icon class="nav-icon" file="icon-config.svg"></icon>
+ Server configuration
</button>
<ul class="nav__second-level btn-firmware"
ng-style="navStyle"
@@ -108,10 +100,8 @@
</li>
<li>
<button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
- <span>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm8 20H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
- Users
- </span>
+ <icon class="nav-icon" file="icon-user.svg"></icon>
+ Users
</button>
<ul class="nav__second-level btn-users"
ng-style="navStyle"
diff --git a/app/common/directives/confirm.html b/app/common/directives/confirm.html
index a38cf60..3faf2a4 100644
--- a/app/common/directives/confirm.html
+++ b/app/common/directives/confirm.html
@@ -1,10 +1,10 @@
<div class="inline__confirm" ng-class="{active: confirm}">
<div class="inline__confirm-message">
- <p class="h3"><i></i>Are you sure you want to <strong>{{title}}?</strong></p>
+ <p class="h3">Are you sure you want to <strong>{{title}}?</strong></p>
<p>{{message}}</p>
</div>
<div class="inline__confirm-buttons">
- <button class="btn-primary" ng-click="accept()">Yes</button>
- <button class="btn-primary" ng-click="cancel()">No</button>
+ <button class="btn btn-primary" ng-click="accept()">Yes</button>
+ <button class="btn btn-primary" ng-click="cancel()">No</button>
</div>
</div>
\ No newline at end of file
diff --git a/app/common/directives/firmware-list.html b/app/common/directives/firmware-list.html
index 1227a20..4ebf117 100644
--- a/app/common/directives/firmware-list.html
+++ b/app/common/directives/firmware-list.html
@@ -39,17 +39,11 @@
</div>
<div class="table__cell firmware__version" ng-class="{'active':firmware.isExtended}">
<span class="table__cell-label">Version:</span>{{firmware.Version}}
- <div class="icon icon__more" ng-click="toggleMoreDropdown($event, firmware)"
+ <button
+ ng-click="toggleMoreDropdown($event, firmware)"
ng-class="{'active':firmware.isExtended}" ng-show="firmware.isExtended">
- <svg version="1.1" x="0px" y="0px" viewBox="0 0 24.3 24.6">
- <path d="M12.1,23C6.1,23,1.3,18.2,1.3,12.3S6.1,1.6,12.1,1.6s10.7,4.8,10.7,10.7S18,23,12.1,23z M12.1,2.6c-5.4,0-9.7,4.4-9.7,9.7 S6.7,22,12.1,22s9.7-4.4,9.7-9.7S17.4,2.6,12.1,2.6z"/>
- <g>
- <circle cx="6.7" cy="12.5" r="1.5"/>
- <circle cx="12.1" cy="12.5" r="1.5"/>
- <circle cx="17.4" cy="12.5" r="1.5"/>
- </g>
- </svg>
- </div>
+ <icon file="icon-more.svg"></icon>
+ </button>
</div>
<div class="icon__more-dropdown" ng-show="firmware.extended.show" click-outside="firmware.extended.show=false;">
<h5 class="bold">Extended version information</h5>
diff --git a/app/common/directives/icon-provider.js b/app/common/directives/icon-provider.js
new file mode 100644
index 0000000..5554fdd
--- /dev/null
+++ b/app/common/directives/icon-provider.js
@@ -0,0 +1,28 @@
+/**
+ * Directive to inline an svg icon
+ *
+ * To use–add an <icon> directive with a file attribute with
+ * a value that corresponds to the desired svg file to inline
+ * from the icons directory.
+ *
+ * Example: <icon file="icon-export.svg"></icon>
+ *
+ */
+window.angular && ((angular) => {
+ 'use-strict';
+
+ angular.module('app.common.directives').directive('icon', () => {
+ return {
+ restrict: 'E', link: (scope, element, attrs) => {
+ const file = attrs.file;
+ if (file === undefined) {
+ console.log('File name not provided for <icon> directive.')
+ return;
+ }
+ const svg = require(`../../assets/icons/${file}`);
+ element.html(svg);
+ element.addClass('icon');
+ }
+ }
+ })
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 5a183ed..e89ce50 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -41,20 +41,20 @@
</div>
<div>
<div class="event__actions">
- <button class="btn-meta-copy" clipboard text="copyText(event)" on-copied="copySuccess(event)" on-error="copyfailed(err)">
- <img class="event__icon" src="../../assets/images/icon-copy.svg" alt=""/><span ng-if="!event.copied">Copy</span><span ng-if="event.copied">Copied</span>
+ <button class="btn btn-tertiary" clipboard text="copyText(event)" on-copied="copySuccess(event)" on-error="copyfailed(err)">
+ <icon file="icon-copy.svg"></icon>
+ <span ng-if="!event.copied">Copy</span>
+ <span ng-if="event.copied">Copied</span>
</button>
<button
- class="btn-delete"
+ class="btn btn-tertiary"
ng-class="{'disabled': multiSelected}"
ng-click="event.confirm= ! event.confirm"
ng-disabled="multiSelected">
- <img
- class="event__icon"
- src="../../assets/images/icon-trashcan.svg"
- alt=""/>Delete
+ <icon file="icon-trashcan.svg"></icon>Delete
</button>
- <button class="btn-resolve" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected"><img class="event__icon" src="../../assets/images/icon-check.svg" alt=""/>Mark as resolved</button>
+ <button class="btn btn-tertiary" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected">
+ <icon file="icon-check.svg"></icon>Mark as resolved
</div>
<div class="event__related" ng-show="event.related_items.length">
<p class="inline event__related-label">Related items:</p>
diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
index b84618e..d3c392f 100644
--- a/app/common/directives/log-filter.html
+++ b/app/common/directives/log-filter.html
@@ -1,16 +1,16 @@
<section id="event-filter" class="row column" aria-label="event log filtering">
<div class="inline event__severity-filter">
<p class="filter-label">Filter by severity</p>
- <button class="inline first" ng-click="toggleSeverityAll()"
+ <button class="btn" ng-click="toggleSeverityAll()"
ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
</button>
- <button class="inline " ng-click="toggleSeverity('high')"
+ <button class="btn" ng-click="toggleSeverity('high')"
ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
</button>
- <button class="inline" ng-click="toggleSeverity('medium')"
+ <button class="btn" ng-click="toggleSeverity('medium')"
ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
</button>
- <button class="inline last" ng-click="toggleSeverity('low')"
+ <button class="btn" ng-click="toggleSeverity('low')"
ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
</button>
</div>
diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
index cf451aa..68e8304 100644
--- a/app/common/directives/serial-console.html
+++ b/app/common/directives/serial-console.html
@@ -1,6 +1,8 @@
<div class="serial-lan__wrapper">
<div id="terminal"></div>
- <div class="serial-lan__actions">
- <button class="inline btn-pop-out" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">Open in new tab</button>
+ <div class="serial-lan__actions float-right">
+ <button class="btn btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
+ <icon file="icon-launch.svg"></icon>Open in new tab
+ </button>
</div>
</div>
\ No newline at end of file
diff --git a/app/common/directives/syslog-filter.html b/app/common/directives/syslog-filter.html
index f24311e..46f178a 100644
--- a/app/common/directives/syslog-filter.html
+++ b/app/common/directives/syslog-filter.html
@@ -1,7 +1,7 @@
<section id="sys-log-filter" class="row column" aria-label="system log filtering">
<div class="inline sys-log__severity-filter">
<p class="filter-label">Filter by severity</p>
- <button ng-repeat="severity in severityList" class="inline " ng-click="toggleSeverity(severity)"
+ <button ng-repeat="severity in severityList" class="btn" ng-click="toggleSeverity(severity)"
ng-class="((selectedSeverityList.indexOf(severity) > -1) || ((severity == 'All') && (selectedSeverityList.length == 0))) ? 'btn-primary' : 'btn-secondary'">{{severity}}
</button>
</div>
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;
}
}
}