Skip to content

GitLab

S
scratch-www
Commit bc026353 authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

align gender/org input msg with others 

Because the `input` field is already to the right, they were being transformed too far over. This overrides the transform to be correct, and also scopes some css in more detail
parent db2b7ebc
Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 107 deletions
src/components/card/card.scss
View file @ bc026353
......@@ -21,43 +21,6 @@
}
}
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translate(16rem, 0);
margin-left: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
padding: 1rem;
max-width: 18.75rem;
min-height: 1rem;
overflow: visible;
color: $type-white;
&:before {
display: block;
position: absolute;
top: 1rem;
left: -$arrow-border-width / 2;
transform: rotate(45deg);
border-bottom: 1px solid $active-gray;
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
width: $arrow-border-width;
height: $arrow-border-width;
content: "";
}
}
.form {
padding: 3rem 4rem;
......@@ -77,6 +40,43 @@
.col-sm-9 {
position: relative;
}
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translate(16rem, 0);
margin-left: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
padding: 1rem;
max-width: 18.75rem;
min-height: 1rem;
overflow: visible;
color: $type-white;
&:before {
display: block;
position: absolute;
top: 1rem;
left: -$arrow-border-width / 2;
transform: rotate(45deg);
border-bottom: 1px solid $active-gray;
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
width: $arrow-border-width;
height: $arrow-border-width;
content: "";
}
}
}
}
}
......@@ -105,15 +105,19 @@
@media only screen and (max-width: $desktop - 1) {
.card {
.validation-message {
position: relative;
transform: none;
margin: inherit;
width: 100%;
height: inherit;
&:before {
display: none;
.form {
.row {
.validation-message {
position: relative;
transform: none;
margin: inherit;
width: 100%;
height: inherit;
&:before {
display: none;
}
}
}
}
}
......
src/components/registration/steps.scss
View file @ bc026353
......@@ -2,10 +2,6 @@
@import "../../frameless";
.registration-step {
.demographics-checkbox-is-robot {
display: none;
}
.invite-avatar {
display: block;
margin: 0 auto 1rem auto;
......@@ -13,20 +9,30 @@
border-radius: 8px;
}
.gender-input,
.other-input {
float: right;
width: 90%;
.card {
.demographics-checkbox-is-robot {
display: none;
}
.row {
margin-left: .5rem;
.gender-input,
.other-input {
float: right;
width: 90%;
.row {
margin-left: .5rem;
.validation-message {
transform: translate(14rem, 0);
}
}
}
}
.help-text {
margin: .25rem 0;
text-align: left;
color: $ui-dark-gray;
.help-text {
margin: .25rem 0;
text-align: left;
color: $ui-dark-gray;
}
}
&.class-invite-step {
......@@ -51,58 +57,66 @@
}
&.username-step {
.username-label {
margin-bottom: .75rem;
.card {
.username-label {
margin-bottom: .75rem;
}
}
}
&.demographics-step {
.gender-input {
margin-top: -5.5rem;
}
.card {
.gender-input {
margin-top: -5.5rem;
}
.radio {
margin-right: 2.5rem;
line-height: 3rem;
.radio {
margin-right: 2.5rem;
line-height: 3rem;
input {
margin-right: 1rem;
input {
margin-right: 1rem;
}
}
}
}
&.phone-step {
.form-group {
margin-bottom: 2rem;
}
.card {
.form-group {
margin-bottom: 2rem;
}
input {
&[type=checkbox] {
margin-bottom: 1.25rem;
input {
&[type=checkbox] {
margin-bottom: 1.25rem;
}
}
}
}
&.organization-step {
.checkbox-group {
.validation-message {
transform: translate(16rem, 8rem);
.card {
.checkbox-group {
.validation-message {
transform: translate(16rem, 8rem);
}
}
}
input {
&[value="8"] {
margin: 1rem 0;
input {
&[value="8"] {
margin: 1rem 0;
}
}
}
.other-input {
margin-top: -5.75rem;
.other-input {
margin-top: -5.75rem;
}
}
}
&.usescratch-step {
.form {
.card {
.form-group {
margin-bottom: 0;
......@@ -112,13 +126,13 @@
}
}
}
}
p {
&.char-count {
margin-top: 0;
margin-bottom: 1rem;
text-align: right;
p {
&.char-count {
margin-top: 0;
margin-bottom: 1rem;
text-align: right;
}
}
}
}
......@@ -149,9 +163,11 @@
@media only screen and (max-width: $mobile - 1) {
.registration-step {
&.demographics-step {
.radio {
width: 100%;
text-align: left;
.card {
.radio {
width: 100%;
text-align: left;
}
}
}
......@@ -167,24 +183,30 @@
@media only screen and (max-width: $desktop - 1) {
.registration-step {
.form {
text-align: left;
.card {
.form {
text-align: left;
}
}
&.phone-step {
.checkbox,
.validation-message {
text-align: left;
}
.card {
.checkbox,
.validation-message {
text-align: left;
}
.checkbox {
margin-bottom: 1rem;
.checkbox {
margin-bottom: 1rem;
}
}
}
&.organization-step {
.checkbox-group {
text-align: left;
.card {
.checkbox-group {
text-align: left;
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment