diff options
Diffstat (limited to 'app/common')
21 files changed, 261 insertions, 265 deletions
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; - } - &.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; } } } |
