add firmware page
Change-Id: I3d9a2ec068e3542a848dada63a6bbebe9869bf2f
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 2f53391..6bda87f 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -3,7 +3,7 @@
@include fontFamilyBold;
text-transform: none;
border-radius: 3px;
- padding: .5rem 2rem .5rem;
+ padding: .5rem 1rem .5rem;
height: auto;
border: 0;
overflow: hidden;
@@ -55,7 +55,7 @@
}
.btn-secondary {
color: $secbtn__text;
- background: transparent;
+ background: $white;
border: 2px solid $secbtn__border;
min-height: 40px;
&:hover {
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index a5a9d1b..42fea1b 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -13,11 +13,14 @@
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
+//Disabled table elements
+$disabled-row: #dddee0;
+$disabled-row-txt: #999999;
+
// Dark background
$darkbg__grey: #E3ECEC;
$darkbg__accent: #79a6f6;
$darkbg__primary: #19273c;
-$active: #648FFF;
// Light Background
$lightbg__grey: #b8c1c1;
@@ -69,7 +72,7 @@
$not-present: $medium-lightbg;
// Links
-$links: #648FFF;
+$links: #3f71ec;
$links__hover: $lightbg__primary;
$links__visited: #8ea7ea;
$links__disabled: rgba(27, 40, 52, 0.70);
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 3dc8fea..9cf4b09 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -12,9 +12,7 @@
a {
color: $links;
- &:visited {
- color: $links__visited;
- }
+ text-decoration: none;
&:hover {
text-decoration: underline;
}
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
new file mode 100644
index 0000000..8d61548
--- /dev/null
+++ b/app/common/styles/base/icons.scss
@@ -0,0 +1,98 @@
+.icon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ position: relative;
+ speak: none;
+ &:hover {
+ cursor: pointer;
+ }
+ &.icon-as-spacer {
+ text-indent: -9999px;
+ }
+}
+
+.icon__more {
+ fill: $medblue;
+ stroke: $medblue;
+ background: $white;
+ overflow: visible;
+}
+
+.icon__more-dropdown {
+ background: $lightgrey;
+ position: absolute;
+ right: 3px;
+ white-space: normal;
+ word-wrap: normal;
+ z-index: 200;
+ padding: 1em;
+ font-size: 1em;
+ box-shadow: 2px 4px 5px $medgrey;
+}
+
+.icon__bar-arrow {
+ &:before {
+ content: '\21E5';
+ position: absolute;
+ font-size: 1.7em;
+ vertical-align: middle;
+ transform: rotate(90deg);
+ display: inline-block;
+ left: 0px;
+ top: -5px;
+ }
+}
+
+.icon__warning{
+ margin-right: .7em;
+ margin-top: -2px;
+ &:before {
+ content: '!';
+ color: $alert__error;
+ position: absolute;
+ left: 55%;
+ top: 40%;
+ font-size: .7em;
+ }
+ &:after {
+ content: '\025b3';
+ position: absolute;
+ left: 0;
+ top: -10%;
+ color: $alert__error;
+ font-size: 1.5em;
+ }
+}
+
+.icon__info{
+ margin-top: -4px;
+ margin-right: .5em;
+ width: 25px;
+ height: 25px;
+ fill: $medblue;
+ float: left;
+}
+
+.icon__up-arrow {
+ margin-right: 1em;
+ &:before {
+ content: '\029C0';
+ position: absolute;
+ font-size: 3em;
+ left: 0;
+ top: -50%;
+ transform: rotate(90deg);
+ }
+}
+.icon__down-arrow {
+ margin-right: 1em;
+ &:before {
+ content: '\029C0';
+ position: absolute;
+ font-size: 3em;
+ left: -4px;
+ top: -50%;
+ transform: rotate(-90deg);
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/base/index.scss b/app/common/styles/base/index.scss
index 5e10e93..81d255d 100644
--- a/app/common/styles/base/index.scss
+++ b/app/common/styles/base/index.scss
@@ -4,6 +4,7 @@
@import 'mixins';
@import 'core';
@import 'typography';
-@import 'utility';
@import 'buttons';
@import 'forms';
+@import 'icons';
+@import 'utility';
\ No newline at end of file
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index e33a44f..e868354 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -109,41 +109,66 @@
-webkit-animation: progress 2s linear infinite;
-moz-animation: progress 2s linear infinite;
animation: progress 2s linear infinite;
- background-size: 130% 100%;
+ background-size: 165% 100%;
@-webkit-keyframes progress {
0% {
- background-position: 0 0;
+ background-position: -70px 0;
}
100% {
- background-position: -70px 0;
+ background-position: 0 0;
}
}
@-moz-keyframes progress {
0% {
- background-position: 0 0;
+ background-position: -70px 0;
}
100% {
- background-position: -70px 0;
+ background-position: 0 0;
}
}
@-ms-keyframes progress {
0% {
- background-position: 0 0;
+ background-position: -70px 0;
}
100% {
- background-position: -70px 0;
+ background-position: 0 0;
}
}
@keyframes progress {
0% {
- background-position: 0 0;
+ background-position: -70px 0;
}
100% {
- background-position: -70px 0;
+ background-position: 0 0;
}
}
}
+
+@mixin table-row-save {
+ @-webkit-keyframes row-flash {
+ from { background-color: $lightblue; }
+ to { background-color: inherit; }
+ }
+ @-moz-keyframes row-flash {
+ from { background-color: $lightblue; }
+ to { background-color: inherit; }
+ }
+ @-o-keyframes row-flash {
+ from { background-color: $lightblue; }
+ to { background-color: inherit; }
+ }
+ @keyframes row-flash {
+ from { background-color: $lightblue; }
+ to { background-color: inherit; }
+ }
+ .row-flash {
+ -webkit-animation: row-flash 1s infinite; /* Safari 4+ */
+ -moz-animation: row-flash 1s infinite; /* Fx 5+ */
+ -o-animation: row-flash 1s infinite; /* Opera 12+ */
+ animation: row-flash 1s infinite; /* IE 10+ */
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 80449f5..d381101 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -34,7 +34,7 @@
justify-content: center;
flex-direction: column;
background: transparent;
- border: 0px;
+ border: 0;
margin: 0;
&:hover {
color: $lightbg__accent;
@@ -74,4 +74,20 @@
.transitionAll {
transition: all .5s ease;
+}
+
+//Uploading
+.uploading {
+ @include indeterminate-bar;
+ font-weight: 700;
+ padding: .2em 6em .2em 1em;
+ margin: .8em 0;
+ width: 100%;
+}
+
+.accessible-text {
+ height: 0;
+ width: 0;
+ position: absolute;
+ overflow: hidden;
}
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 63d6cf7..fb49d39 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -4,18 +4,15 @@
width: 100%;
color: $black;
line-height: 30px;
- padding: 10px 15px;
-
+ padding: .8em 0 0;
+ margin-bottom: .8em;
+ border-bottom: 1px solid $medgrey;
+ font-size: 1.25em;
@include mediaQuery(medium) {
- padding: 15px 20px;
- }
-
- @include mediaQuery(large) {
- padding: 15px 30px;
+ margin: 1.8em 0;
}
}
-
// Table
.table {
width: 100%;
@@ -24,34 +21,46 @@
.table__row {
display: flex;
width: 100%;
- max-width: calc(100vw - 30px);
+ max-width: calc(100vw - 10px);
flex-wrap: wrap;
- border-bottom: 1px solid $medgrey;
- border-left: 1px solid $medgrey;
- border-right: 1px solid $medgrey;
- padding: 5px 0;
-
- @include mediaQuery(small) {
- padding: 0;
+ font-weight: 400;
+ position: relative;
+ &.disabled {
+ background-color: $disabled-row;
+ color: $disabled-row-txt;
}
}
+.table__row-save {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height:100%;
+ background: $darkbg__primary;
+ z-index:200;
+ color: $white;
+ padding: .8em 1em;
+ text-align: center;
+ font-size: 1.5em;
+ font-weight: bold;
+}
+
.table__cell {
flex: 0 0 100%;
- line-height: 20px;
- padding: 5px 15px;
+ line-height: 2.8em;
+ padding: .5em 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-
+ border-bottom: 1px solid $medgrey;
@include mediaQuery(small) {
flex: 1;
- padding: 15px 20px;
}
-
- @include mediaQuery(large) {
- padding: 15px 30px;
- }
+ //
+ //@include mediaQuery(large) {
+ // padding: 15px 30px;
+ //}
}
.table__cell-label {
@@ -81,7 +90,7 @@
.table__cell {
@include fastTransition-all();
position: relative;
-
+ border: 0;
&:last-child {
border: 0;
}
@@ -89,3 +98,10 @@
}
}
+.table__row-uploading {
+ color: $darkgrey;
+ font-weight: 700;
+ @include indeterminate-bar;
+}
+
+
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index d35b79a..b19ecab 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -9,4 +9,5 @@
@import "content-search";
@import "paginate";
@import "thresholds";
-@import "export";
\ No newline at end of file
+@import "export";
+@import "modals";
\ No newline at end of file
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
new file mode 100644
index 0000000..70c0af1
--- /dev/null
+++ b/app/common/styles/elements/modals.scss
@@ -0,0 +1,69 @@
+.modal-overlay {
+ width:100%;
+ height:100%;
+ z-index:100;
+ background-color:#000;
+ opacity:0.5;
+ position:fixed;
+ top:0;
+ left:0;
+ display:none;
+ margin:0;
+ padding:0;
+}
+
+.modal {
+ width:50%;
+ max-width: 850px;
+ margin: .5em auto;
+ padding: .8em 1.5em;
+ border: thin #000 solid;
+ background-color:#fff;
+ z-index:101;
+ position:fixed;
+ top:25%;
+ left:25%;
+ overflow: hidden;
+ display:none;
+ @include fastTransition-all;
+ @include mediaQuery(medium) {
+ padding: 2.5em;
+ }
+}
+
+.modal .page-header {
+ padding-bottom: .7em;
+}
+
+.screen-reader-offscreen {
+ position:absolute;
+ left:-999px;
+ width:1px;
+ height:1px;
+ top:auto;
+}
+.modal__content {
+ border-bottom: 1px solid $lightbg__grey;
+ padding-bottom: 1em;
+ margin-bottom: 2em;
+}
+.modal__link {
+ display: block;
+ margin: .8em 0 1em;
+ @include mediaQuery(medium) {
+ display: inline-block;
+ margin: .6em 0;
+ }
+}
+.modal__button-wrapper {
+ float: right;
+ button {
+ margin-bottom: .8em;
+ margin-right: .8em;
+ display: inline-block;
+ @include mediaQuery(medium) {
+ margin-left: .8em;
+ margin-right: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 13dbe44..53e3d27 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -8,6 +8,7 @@
border-bottom: 1px solid $lightbg__grey;
margin: 1.625em 0 1.2em 0;
padding-left: 0;
+ padding-right: 0;
.h4 {
padding: 0;
margin: 0 0 .5em 0;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 9b7dff5..aaec5b4 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -7,7 +7,7 @@
top: 0;
left: 0;
right: 0;
- z-index: 100;
+ z-index: 200;
}
.app__version {