firmware: added new icons to match designs. minor fixes to button styling
Change-Id: If77d9119bc9335b5bd5e94ec1d201f6aa8969d0d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/assets/images/icon-arrow-blue.svg b/app/assets/images/icon-arrow-blue.svg
new file mode 100644
index 0000000..a246701
--- /dev/null
+++ b/app/assets/images/icon-arrow-blue.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#3C6DF0;}
+</style>
+<g>
+ <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
+ s15-6.7,15-15S23.3,0,15,0L15,0z"/>
+</g>
+<path class="st0" d="M21.5,15l-1.2,1.2l-4.5-4.5v9.8h-1.6v-9.8l-4.5,4.5L8.5,15L15,8.5L21.5,15z"/>
+</svg>
diff --git a/app/assets/images/icon-arrow-gray.svg b/app/assets/images/icon-arrow-gray.svg
new file mode 100644
index 0000000..c9bc205
--- /dev/null
+++ b/app/assets/images/icon-arrow-gray.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#AAAAAA;}
+</style>
+<g>
+ <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
+ s15-6.7,15-15S23.3,0,15,0L15,0z"/>
+</g>
+<path class="st0" d="M21.5,15l-1.2,1.2l-4.5-4.5v9.8h-1.6v-9.8l-4.5,4.5L8.5,15L15,8.5L21.5,15z"/>
+</svg>
diff --git a/app/common/directives/firmware-list.html b/app/common/directives/firmware-list.html
index e243247..d7d3385 100644
--- a/app/common/directives/firmware-list.html
+++ b/app/common/directives/firmware-list.html
@@ -25,7 +25,7 @@
<div class="table__cell">
<span class="table__cell-label">Boot priority:</span>
<div class="icon icon__up-arrow icon-as-spacer" aria-hidden="true">
- <span class="accessible-text">firmware down in priority</span></div>
+ <span class="accessible-text">firmware up in priority</span></div>
<div class="icon icon__down-arrow" aria-hidden="true">
<span class="accessible-text">firmware down in priority</span></div>
</div>
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 2c803d2..e7f9728 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -93,27 +93,16 @@
}
.icon__up-arrow {
- margin-right: 1em;
- &:before {
- content: '\029C0';
- position: absolute;
- font-size: 3em;
- left: 0;
- top: -50%;
- transform: rotate(90deg);
- }
- &.hide {
- text-align: -9999px;
+ margin-right: .4em;
+ margin-bottom: -15px;
+ background: url(/assets/images/icon-arrow-blue.svg) center center no-repeat;
+ height: 40px;
+ width: 30px;
+ &.icon-as-spacer {
+ background: url(/assets/images/icon-arrow-gray.svg) center center no-repeat;
}
}
.icon__down-arrow {
- margin-right: 1em;
- &:before {
- content: '\029C0';
- position: absolute;
- font-size: 3em;
- left: -4px;
- top: -50%;
- transform: rotate(-90deg);
- }
+ @extend .icon__up-arrow;
+ transform: rotate(180deg);
}
\ No newline at end of file
diff --git a/app/configuration/styles/firmware.scss b/app/configuration/styles/firmware.scss
index 0b1664e..20b7817 100644
--- a/app/configuration/styles/firmware.scss
+++ b/app/configuration/styles/firmware.scss
@@ -98,13 +98,13 @@
label {
font-weight: 700;
}
-
input {
height: 2.4em;
}
- input[type=submit] {
+ .button {
+ min-width: 210px;
width: auto;
- margin-top: 1.5em;
+ margin-top: 1em;
}
}
.firmware__upload-file-name {
@@ -116,9 +116,10 @@
padding-left: 1em;
padding-right: 1em;
margin-bottom: 1em;
- .btn-secondary {
+ .button {
vertical-align: middle;
margin: 1em .5em 1em 0;
+ min-width: 3em;
}
&.uploading {
@include indeterminate-bar;
