created remote console page
TODO: Remove HTERM.
Change-Id: I72026e5ea64c9fba3089b68dfd2b8198255dabb8
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index d13f2ce..4b7a1eb 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -1,3 +1,8 @@
+
+$lightbg__grey: #b8c1c1;
+$lightbg__accent: #3c6df0;
+$lightbg__primary: #19273c;
+
//Breakpoints mixin
@mixin mediaQuery($breakpoint) {
@if $breakpoint == "x-small" {
@@ -9,15 +14,21 @@
@media (min-width: 47.938em) { //767px
@content;
}
- } @else if $breakpoint == "medium" {
+ }
+
+ @else if $breakpoint == "medium" {
@media (min-width: 64.000em) { //1024px
@content;
}
- } @else if $breakpoint == "large" {
+ }
+
+ @else if $breakpoint == "large" {
@media (min-width: 85.375em) { //1366px
@content;
}
- } @else if $breakpoint == "x-large" {
+ }
+
+ @else if $breakpoint == "x-large" {
@media (min-width: 100.000em) { //1600px
@content;
}
@@ -26,43 +37,10 @@
//Fonts mixin
@mixin fontFamily {
- font-family: Helvetica, Arial, Verdana, sans-serif;
+ font-family: Arial, Verdana, sans-serif;
font-weight: 200;
}
-@mixin fontFamilyBold {
- font-family: Helvetica, Arial, Verdana, sans-serif;
- font-weight: 700;
-}
-
-@mixin fontCourierBold {
- font-family: "Courier New", Helvetica, monospace, arial, sans-serif;
- font-weight: 700;
-}
-
-//Navigation icons
-@mixin navIcons {
- color: $white;
- fill: $white;
- max-height: 40px;
- stroke-width: .5;
- display: block;
- width: 40px;
- margin: 0 auto .5em auto;
- .st0 {
- fill: none;
- stroke: #fff;
- stroke-width: 2;
- stroke-miterlimit: 10;
- }
- .st1 {
- fill: none;
- stroke: #fff;
- stroke-width: 4;
- stroke-miterlimit: 10;
- }
-}
-
//Transitions mixin
@mixin fastTransition-all {
transition: all .5s ease;
@@ -78,99 +56,11 @@
}
@mixin bgImage__arrowDown-accent {
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #3c6df0'></polygon></svg>");
+ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #3c6df0'></polygon></svg>");
}
@mixin bgImage__arrowDown-grey {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}
-@mixin calcColumn-5 {
- min-width: calc(100% * (1/5) - 5px);
-}
-@mixin calcColumn-4 ($offset: 0) {
- min-width: calc(100% * (1/4) - #{$offset});
-}
-
-@mixin calcColumn-3 {
- min-width: calc(100% * (1/3) - 5px);
-}
-
-@mixin calcSplitColumn {
- min-width: calc(100% * (1/2) - 5px);
-}
-
-@mixin vertCenter {
- top: 50%;
- transform: translateY(-50%);
-}
-
-@mixin indeterminate-bar {
- background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
- -webkit-animation: progress 2s linear infinite;
- -moz-animation: progress 2s linear infinite;
- animation: progress 2s linear infinite;
- background-size: 165% 100%;
-
- @-webkit-keyframes progress {
- 0% {
- background-position: -70px 0;
- }
- 100% {
- background-position: 0 0;
- }
- }
-
- @-moz-keyframes progress {
- 0% {
- background-position: -70px 0;
- }
- 100% {
- background-position: 0 0;
- }
- }
-
- @-ms-keyframes progress {
- 0% {
- background-position: -70px 0;
- }
- 100% {
- background-position: 0 0;
- }
- }
-
- @keyframes progress {
- 0% {
- background-position: -70px 0;
- }
- 100% {
- 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