Misc CSS fixes
* set max content width to 960px
* created mixin for bold font
* move app-header content to global header
* minor global changes
* changed input alignment for network config inputs
* added pop-out button class
* changed lightgrey color
* fixed accordion header actions responsiveness
* fixed input box border colors
Change-Id: Iffe26d526439d7f2bb6808528a975ab7374ff1b2
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index e101385..0515926 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -3,7 +3,10 @@
position: relative;
padding: .5em .8em;
margin-top: -10px;
- border: 1px solid $lightgrey;
+ border: 1px solid $medgrey;
+ min-width: 70px;
+ padding-right: 25px;
+ font-weight: 400;
&.active,
&:hover {
background: $dropdown__focus-bg;
@@ -13,8 +16,11 @@
display: inline-block;
margin-left: 5px;
font-size: .8em;
- transform: rotate(90deg);
+ transform: translateY(-50%) rotate(90deg);
color: $lightbg__primary;
+ position: absolute;
+ right: .8em;
+ top: 50%;
}
}
@@ -41,6 +47,7 @@
padding: 1em 1em 1em 1.8em;
text-align: left;
width: 100%;
+ font-weight: 400;
&:hover {
background: $dropdown__focus-bg;
}
@@ -81,15 +88,14 @@
// Checkbox
-.control-check {
- font-size: 18px;
+.control-check,
+.control-radio {
position: relative;
display: inline-block;
margin-bottom: 15px;
- padding-left: 1em;
padding-top: 7px;
cursor: pointer;
- line-height: .5;
+ line-height: initial;
}
.control-check input {
@@ -108,10 +114,6 @@
border: 1px solid $lightgrey;
}
-.control--radio .control__indicator {
- border-radius: 50%;
-}
-
/* Hover and focus states */
.control-check:hover input ~ .control__indicator,
.control-check input:focus ~ .control__indicator {
@@ -169,4 +171,97 @@
.control-check input:disabled ~ .control__indicator:after {
border-color: $white;
color: $white;
+}
+
+// Radio Buttons
+.control-radio {
+ padding-left: 3em;
+}
+.control-radio.disabled:hover {
+ cursor: default;
+}
+.control-radio .control__indicator {
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 30px;
+ height: 30px;
+ background: $white;
+ border: 2px solid $darkgrey;
+}
+.control-radio input{
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
+
+.control-radio .control__indicator {
+ border-radius: 50%;
+}
+
+/* Hover and focus states */
+.control-radio input:focus ~ .control__indicator {
+ background: $primebtn__bg;
+ outline: 1px solid $primebtn__bg;
+ outline-offset: 3px;
+}
+
+.control-radio input:checked ~ .control__indicator {
+ background: $lightbg__accent;
+ border: 2px solid $primebtn__bg;
+}
+
+/* Disabled state */
+.control-radio input:disabled ~ .control__indicator{
+ pointer-events: none;
+ opacity: .6;
+ background: #ccc;
+ border: 1px solid $lightgrey;
+}
+
+.control-radio:hover > input:disabled ~ .control__indicator{
+ outline: 0;
+}
+
+.control-radio:hover input:disabled {
+ cursor: default;
+}
+
+/* mark */
+.control__indicator:after {
+ position: absolute;
+ display: none;
+ content: '';
+}
+
+/* Show mark */
+.control-radio input:checked ~ .control__indicator:after {
+ display: block;
+}
+
+/* Disabled tick colour */
+.control-radio input:disabled ~ .control__indicator:after{
+ border-color: $white;
+ color: $white;
+}
+
+/* Radio button inner circle */
+.control-radio .control__indicator:after {
+ top: 4px;
+ left: 4px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: $primebtn__bg;
+}
+
+.control-radio:hover .control__indicator:after {
+ display: block;
+}
+
+/* Disabled circle colour */
+.control-radio input:disabled ~ .control__indicator:after {
+ background: #7b7b7b;
+ width: 20px;
+ height: 20px;
}
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index e69de29..63d6cf7 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -0,0 +1,91 @@
+
+// Table Header
+.table-header {
+ width: 100%;
+ color: $black;
+ line-height: 30px;
+ padding: 10px 15px;
+
+ @include mediaQuery(medium) {
+ padding: 15px 20px;
+ }
+
+ @include mediaQuery(large) {
+ padding: 15px 30px;
+ }
+}
+
+
+// Table
+.table {
+ width: 100%;
+}
+
+.table__row {
+ display: flex;
+ width: 100%;
+ max-width: calc(100vw - 30px);
+ 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;
+ }
+}
+
+.table__cell {
+ flex: 0 0 100%;
+ line-height: 20px;
+ padding: 5px 15px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @include mediaQuery(small) {
+ flex: 1;
+ padding: 15px 20px;
+ }
+
+ @include mediaQuery(large) {
+ padding: 15px 30px;
+ }
+}
+
+.table__cell-label {
+ display: inline-block;
+ font-weight: 700;
+ min-width: 50%;
+ padding-right: 15px;
+
+ @include mediaQuery(small) {
+ display: none;
+ }
+}
+
+// Table Head
+.table__head {
+ .table__row {
+ display: none;
+ font-weight: 700;
+ border-bottom: 1px solid $medgrey;
+ background-color: $darkbg__primary;
+ color: $white;
+
+ @include mediaQuery(small) {
+ display: flex;
+ }
+
+ .table__cell {
+ @include fastTransition-all();
+ position: relative;
+
+ &:last-child {
+ border: 0;
+ }
+ }
+ }
+}
+