react: progress on react containers and mobx-state-tree store

This commit is contained in:
Torkel Ödegaard
2017-12-21 11:56:45 +01:00
402 changed files with 14430 additions and 17385 deletions

View File

@@ -109,6 +109,10 @@ $input-border: 1px solid $input-border-color;
&--error {
color: $critical;
}
&:disabled {
color: $text-color-weak;
}
}
.gf-form-label + .gf-form-label {
@@ -213,7 +217,7 @@ $input-border: 1px solid $input-border-color;
background-color: transparent;
color: $text-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: "\f0d7";
content: '\f0d7';
pointer-events: none;
}
}
@@ -244,12 +248,30 @@ $input-border: 1px solid $input-border-color;
position: relative;
background-color: $input-bg;
.gf-form-select-icon {
position: absolute;
z-index: 1;
left: $input-padding-x;
top: 50%;
margin-top: -7px;
& + .gf-form-input {
position: relative;
z-index: 2;
padding-left: $input-padding-x*3;
background-color: transparent;
option {
// Firefox
color: $black;
}
}
}
select.gf-form-input {
text-indent: 0.01px;
text-overflow: "";
padding-right: $input-padding-x*4;
-webkit-appearance: none;
-moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
text-overflow: '';
padding-right: $input-padding-x*3;
appearance: none;
&:-moz-focusring {
@@ -270,7 +292,7 @@ $input-border: 1px solid $input-border-color;
background-color: transparent;
color: $text-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: "\f0d7";
content: '\f0d7';
pointer-events: none;
font-size: 11px;
}
@@ -297,7 +319,7 @@ $input-border: 1px solid $input-border-color;
}
.natural-language-input {
&input[type="number"] {
&input[type='number'] {
font-size: $font-size-base;
line-height: $input-line-height;
margin: -6px -5px 0 5px;
@@ -320,7 +342,7 @@ $input-border: 1px solid $input-border-color;
background-color: transparent;
color: $input-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: "\f0d7";
content: '\f0d7';
pointer-events: none;
}

View File

@@ -69,8 +69,9 @@
text-transform: uppercase;
}
.page-header__select_nav {
.page-header__select-nav {
margin-bottom: 10px;
max-width: 100%;
@include media-breakpoint-up(lg) {
display: none;
@@ -139,7 +140,7 @@
}
&::after {
content: "";
content: '';
position: absolute;
top: 0;
right: -14px; // half of square's length
@@ -156,8 +157,7 @@
background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
// stylish arrow design using box shadow
box-shadow: 2px -2px 0 2px rgb(35, 31, 31),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
// 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/