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~HEAD b/app/common/styles/base/mixins.scss~HEAD
new file mode 100644
index 0000000..d13f2ce
--- /dev/null
+++ b/app/common/styles/base/mixins.scss~HEAD
@@ -0,0 +1,176 @@
+//Breakpoints mixin
+@mixin mediaQuery($breakpoint) {
+ @if $breakpoint == "x-small" {
+ @media (min-width: 25.000em) { //400px
+ @content;
+ }
+ }
+ @if $breakpoint == "small" {
+ @media (min-width: 47.938em) { //767px
+ @content;
+ }
+ } @else if $breakpoint == "medium" {
+ @media (min-width: 64.000em) { //1024px
+ @content;
+ }
+ } @else if $breakpoint == "large" {
+ @media (min-width: 85.375em) { //1366px
+ @content;
+ }
+ } @else if $breakpoint == "x-large" {
+ @media (min-width: 100.000em) { //1600px
+ @content;
+ }
+ }
+}
+
+//Fonts mixin
+@mixin fontFamily {
+ font-family: Helvetica, 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;
+}
+
+@mixin slowTransition-all {
+ transition: all 1.5s ease;
+}
+
+//Custom SVG arrow
+@mixin bgImage__arrowDown-primary {
+ 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: #19273c'></polygon></svg>");
+}
+
+@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>");
+}
+
+@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