This commit is contained in:
mgabdev
2019-09-16 19:31:30 -04:00
parent 293c6502da
commit deb9ed29bd
43 changed files with 1285 additions and 7786 deletions

View File

@@ -29,14 +29,12 @@ code {
}
}
.radio > label {
.radio>label {
position: relative;
padding-left: 28px;
input {
position: absolute;
top: -2px;
left: 0;
@include abs-position(-2px, auto, auto, 0);
}
}
}
@@ -45,7 +43,7 @@ code {
position: relative;
margin-bottom: 0;
.label_input > label {
.label_input>label {
font-family: inherit;
font-size: 14px;
padding-top: 5px;
@@ -119,11 +117,8 @@ code {
color: $gab-secondary-text;
&.subtle-hint {
text-align: center;
font-size: 12px;
line-height: 18px;
margin-top: 15px;
margin-bottom: 0;
@include text-sizing(12px, 400, 18px, center);
@include vertical-margin(15px, 0);
}
}
@@ -145,13 +140,13 @@ code {
.label_input {
display: flex;
& > label {
&>label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
font-weight: 500;
min-width: 150px;
flex: 0 0 auto;
@include text-sizing(14px, 500);
}
input,
@@ -167,14 +162,14 @@ code {
}
.input.with_label {
.label_input > label {
.label_input>label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
display: block;
margin-bottom: 8px;
word-wrap: break-word;
font-weight: 500;
@include text-sizing(14px, 500);
}
.hint {
@@ -189,13 +184,13 @@ code {
.input.with_block_label {
max-width: none;
& > label {
&>label {
font-family: inherit;
font-size: 16px;
color: $primary-text-color;
display: block;
font-weight: 500;
padding-top: 5px;
@include text-sizing(16px, 500);
}
.hint {
@@ -308,10 +303,10 @@ code {
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding: 10px;
@include border-design(darken($ui-base-color, 14%), 1px, 4px);
&:invalid {
box-shadow: none;
}
@@ -366,8 +361,7 @@ code {
display: flex;
&.actions--top {
margin-top: 0;
margin-bottom: 30px;
@include vertical-margin(0, 30px);
}
}
@@ -375,25 +369,22 @@ code {
.button,
.block-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
background: $ui-highlight-color;
color: $primary-text-color;
font-size: 18px;
line-height: inherit;
height: auto;
padding: 10px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
box-sizing: border-box;
cursor: pointer;
font-weight: 500;
outline: 0;
margin-bottom: 10px;
margin-right: 10px;
@include size(100%, auto);
@include text-sizing(18px, 500, inherit, center);
&:last-child {
margin-right: 0;
}
@@ -431,16 +422,14 @@ code {
font-size: 16px;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding-left: 10px;
padding-right: 30px;
height: 41px;
@include size(100%, 41px);
@include horizontal-padding(10px, 30px);
@include border-design(darken($ui-base-color, 14%), 1px, 4px);
}
.label_input {
@@ -449,9 +438,6 @@ code {
}
&__append {
position: absolute;
right: 3px;
top: 1px;
padding: 10px;
padding-bottom: 9px;
font-size: 16px;
@@ -463,15 +449,16 @@ code {
white-space: nowrap;
overflow: hidden;
@include abs-position(1px, 3px);
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 1px;
width: 5px;
background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
@include pseudo;
}
}
}
@@ -480,22 +467,19 @@ code {
position: relative;
&__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba($ui-base-color, 0.65);
backdrop-filter: blur(2px);
border-radius: 4px;
@include flex(center, center);
@include size(100%);
@include abs-position(0, auto, auto, 0);
&__content {
text-align: center;
&.rich-formatting {
&,
p {
color: $primary-text-color;
@@ -755,8 +739,7 @@ code {
}
.actions {
padding: 30px 0;
padding-right: 20px;
padding: 30px 20px 30px 0;
flex: 0 0 auto;
}
}
@@ -771,8 +754,7 @@ code {
}
.alternative-login {
margin-top: 20px;
margin-bottom: 20px;
@include vertical-margin(20px);
h4 {
font-size: 16px;
@@ -805,8 +787,6 @@ code {
.input-copy {
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
display: flex;
align-items: center;
padding-right: 4px;
@@ -814,6 +794,8 @@ code {
top: 1px;
transition: border-color 300ms linear;
@include border-design(darken($ui-base-color, 14%), 1px, 4px);
&__wrapper {
flex: 1 1 auto;
}
@@ -830,12 +812,12 @@ code {
flex: 0 0 auto;
margin: 4px;
text-transform: none;
font-weight: 400;
font-size: 14px;
padding: 7px 18px;
padding-bottom: 6px;
width: auto;
transition: background 300ms linear;
@include text-sizing(14px, 400);
}
&.copied {
@@ -894,13 +876,12 @@ code {
&::after {
background-color: darken($ui-base-color, 4%);
content: '';
display: block;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 1px;
@include pseudo;
@include size(1px, 100%);
}
}
@@ -909,4 +890,4 @@ code {
display: flex;
flex-direction: row;
}
}
}