define global message classes
Migrate power-ops to utilize.
Change-Id: Ie3946a6c957c78ef1b07b0c815448ed8d7e826b5
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
index d41ebee..8cd7aa8 100644
--- a/src/scss/components/_power-ops.scss
+++ b/src/scss/components/_power-ops.scss
@@ -41,12 +41,13 @@
// Power bar indicator
.power__indicator-bar {
font-weight: bold;
- padding: 1.4em 3em;
+ padding: 1.4em 3em 0;
margin-bottom: 3.750em;
background-size: 200% 100%;
background-image: linear-gradient(to right, $status-ok-light 50%, $lightgrey 50%);
background-position: 100%;
transition: background-position 2s ease;
+ overflow: hidden;
p {
padding: 0;
margin: 0;
@@ -73,67 +74,20 @@
// Power button options
.power-option {
border-top: 1px solid $lightgrey;
- padding: 1.8em 0 1em 1.8em;
+ padding: 1.8em 0 1em 0;
position: relative;
overflow: hidden;
min-height: 1px;
+ min-width: 100%;
.btn-secondary {
margin-bottom: .5em;
- }
- // Confirmation message for power option
- .power__confirm {
- position: absolute;
- top: 0;
- transform: translateY(-100%);
- width: 100%;
- margin-left: -1.8em;
- z-index: 5;
- background: $darkbg__primary;
- color: $white;
- padding: 2em 2em 1.55em 2em;
- &.active {
- transform: translateY(0);
- @include fastTransition-all;
+ @include mediaQuery(small) {
+ min-width: 300px;
}
}
- &.disabled {
- @include fastTransition-all;
- p {opacity: .4;}
+ @include mediaQuery(small){
+ padding: 1.8em 0 1em 1.8em;
}
}
-}
-// Power confirmation buttons
-.power__confirm-buttons {
- .btn-primary {
- background: transparent;
- border: 2px solid $white;
- padding: 1em 2.2em;
- margin: 0 10px;
- border-radius: 4px;
- &:focus,
- &:hover {
- background: $primebtn__bg;
- border: 2px solid $primebtn__bg;
- }
- }
- @include mediaQuery(large) {
- float: right;
- }
-}
-
-// Power confirmation message
-.power__confirm-message {
- display: inline-block;
-}
-
-// Power confirmation message icon
-.power__confirm-message i::before {
- content: '\26A0';
- color: $white;
- display: inline-block;
- font-size: 2em;
- vertical-align: middle;
- font-style: normal;
- margin-right: 15px;
-}
+} //end power-operations
\ No newline at end of file
diff --git a/src/scss/elements/_alerts.scss b/src/scss/elements/_alerts.scss
index a6d66b0..76624b1 100644
--- a/src/scss/elements/_alerts.scss
+++ b/src/scss/elements/_alerts.scss
@@ -43,4 +43,25 @@
}
.alert__message {
background: $alert__message;
-}
\ No newline at end of file
+}
+
+// Power confirmation buttons
+.power__confirm-buttons {
+ .btn-primary {
+ background: transparent;
+ border: 2px solid $white;
+ padding: 1em 2.2em;
+ margin: 0 10px;
+ border-radius: 4px;
+ &:focus,
+ &:hover {
+ background: $primebtn__bg;
+ border: 2px solid $primebtn__bg;
+ }
+ }
+ @include mediaQuery(large) {
+ float: right;
+ }
+}
+
+
diff --git a/src/scss/elements/_all.scss b/src/scss/elements/_all.scss
index 2913202..7d04da2 100644
--- a/src/scss/elements/_all.scss
+++ b/src/scss/elements/_all.scss
@@ -1,4 +1,5 @@
@import "toggle-switch";
@import "status";
-@import "alerts";
\ No newline at end of file
+@import "alerts";
+@import "inline-confirm";
\ No newline at end of file
diff --git a/src/scss/elements/_inline-confirm.scss b/src/scss/elements/_inline-confirm.scss
new file mode 100644
index 0000000..863b606
--- /dev/null
+++ b/src/scss/elements/_inline-confirm.scss
@@ -0,0 +1,53 @@
+
+// inline confirmation message
+.inline__confirm {
+ position: absolute;
+ top: 0;
+ transform: translateY(-100%);
+ width: 100%;
+ margin-left: -1.8em;
+ z-index: 5;
+ background: $darkbg__primary;
+ color: $white;
+ padding: 2em 2em 1.55em 2em;
+ overflow: hidden;
+ &.active {
+ transform: translateY(0);
+ @include fastTransition-all;
+ }
+}
+
+// Power confirmation buttons
+.inline__confirm-buttons {
+ .btn-primary {
+ background: transparent;
+ border: 2px solid $white;
+ padding: 1em 2.2em;
+ margin: 0 10px;
+ border-radius: 4px;
+ &:focus,
+ &:hover {
+ background: $primebtn__bg;
+ border: 2px solid $primebtn__bg;
+ }
+ }
+ @include mediaQuery(large) {
+ float: right;
+ }
+}
+
+// confirmation message
+.inline__confirm-message {
+ display: inline-block;
+}
+
+// Power confirmation message icon
+.inline__confirm-message i::before {
+ content: '\26A0';
+ color: $white;
+ display: inline-block;
+ font-size: 2em;
+ vertical-align: middle;
+ font-style: normal;
+ margin-right: 15px;
+}
\ No newline at end of file