Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Styles for SignUp #49

Merged
4 commits merged into from
Mar 11, 2019
Merged

Styles for SignUp #49

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
42459db
feat(signup): add styles for the signup
ignaciorodrigues1 Mar 11, 2019
91c0bbb
feat(styles): separate this component in form
ignaciorodrigues1 Mar 11, 2019
a577abe
Revert "feat(styles): separate this component in form"
ignaciorodrigues1 Mar 11, 2019
fb9af0b
feat(styles): separate this component in form
ignaciorodrigues1 Mar 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 108 additions & 1 deletion assets/scss/core/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ label {
color: $dp-color-grey;
font-weight: $dp-font-weight-bold;
font-size: $dp-font-size-small;
font-family: $dp-font-family-proximanova;
}
/* span with class .dropdown-arrow to draw arrow dropdown */
.dropdown-arrow {
Expand All @@ -37,7 +38,6 @@ select {
font-size: $dp-font-size-small;
padding: 0 40px 0 10px;
text-align: left;
height: 40px;
line-height: 40px;
cursor: pointer;
-webkit-appearance: button;
Expand All @@ -64,4 +64,111 @@ textarea {

textarea:focus {
border: 1px solid $dp-color-yellow;
}

.content-checkbox {
width: 100%;
position: relative;
display: inline-block;
text-align: left;
margin: 20px 0;
}

.checkbox {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ésto tendría que estar creado como un componente reutilizable.

display: flex;
cursor: pointer;
align-items: center;

label {
margin-left: -34px;
margin-bottom: 0;
font-weight: normal;
}
}

input[type='checkbox'] {
flex: 0 1 80px;
margin-left: -20px;
height: 40px;
cursor: pointer;
z-index: 0;
opacity: 0;

&:checked {
& ~ .checkmark {
border-color: $dp-color-green;
background-color: $dp-color-green;

&:after {
display: block;
}
}
}
}

.checkmark {
margin-right: 10px;
height: 16px;
width: 16px;
position: absolute;
border: 1px solid $dp-color-lightgrey;
border-radius: 3px;
background-color: $dp-color-white;
pointer-events: none;

&:after {
content: '';
top: 1px;
left: 5px;
width: 5px;
height: 10px;
position: absolute;
border: solid $dp-color-white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
}

input:not(.button):not([type='checkbox']) {
padding: 10px 12px;
height: 40px;
width: 100%;
border: 1px solid $dp-color-lightgrey;
border-radius: $dp-border-radius;
background-color: $dp-color-white;
font-size: $dp-font-size-form;
font-family: $dp-font-family-proximanova;
line-height: 20px;

&::placeholder {
color: $dp-color-default;
font-style: italic;
}

&:required {
box-shadow: none;
}

&:focus {
color: $dp-color-default;
border: 1px solid $dp-color-yellow;
border-radius: $dp-border-radius;
-webkit-box-shadow: 0 0 0 2px $dp-color-brown-brightness;
box-shadow: 0 0 0 2px $dp-color-brown-brightness;
outline: none;

&::placeholder {
font-style: normal;
}
}
}

input[type="tel"] {
-moz-appearance: textfield;

&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
3 changes: 2 additions & 1 deletion assets/scss/core/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ $dp-font-button-medium: 13px;
$dp-font-button-small: 11px;
$dp-font-size-15: 15px;
$dp-font-size-24: 24px;
$dp-font-small-lineheight: 18px;

body {
color: $dp-color-grey;
Expand Down Expand Up @@ -99,7 +100,7 @@ p {
small {
font: $dp-font;
font-size: $dp-font-size-small;
line-height: 18px;
line-height: $dp-font-small-lineheight;
}

.link-green {
Expand Down
1 change: 0 additions & 1 deletion assets/scss/modules/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
text-transform: uppercase;
border: none;
outline: none;
margin: 0 5px;
appearance: none;
font-family: $dp-font-family-proximanova;
border-radius: $dp-border-radius;
Expand Down
68 changes: 47 additions & 21 deletions assets/scss/templates/_signup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@
.main-panel {
flex: 1.5;
height: 100vh;
padding: 40px 50px;
background-color: $dp-color-white;
overflow-y: auto;
padding: 40px 50px;

.logo-doppler {
height: 30px;
}

.content-signin {
display: inline-block;
float: right;
display: inline-block;
margin-top: 6px;
font-family: $dp-font-family-proximanova;
font-style: italic;
Expand All @@ -31,39 +31,44 @@

h5 {
margin: 60px 0 0;
color: $dp-color-brown;
font-family: $dp-font-family-proximanova;
color: $dp-color-brown;
font-weight: bold;
text-transform: uppercase;
}

p {
.content-subtitle {
margin: 10px 0 30px;
font-family: $dp-font-family-proximanova;
}

.content-promotion {
padding-top: 16px;
border-top: 1px $dp-color-grey dashed;
font-family: $dp-font-family-proximanova;
}

.signup-form {
.holder-small {
display: inline-block;
width: 47.4%;

&.content-subtitle {
margin: 10px 0 30px;
&:nth-child(1) {
margin-right: 4%;
}
}

&.content-promotion {
font-size: 15px;
border-top: 1px $dp-color-grey dashed;
padding-top: 16px;
ul > li:nth-child(n+3) {
margin-top: 20px;
}
}

.content-legal {
p {
font-size: 12px;
}
small {
font-family: $dp-font-family-proximanova;
}

footer {
padding-top: 15px;

p {
font-family: $dp-font-family-proximanova;
font-size: 14px;
}
}
}

Expand All @@ -79,18 +84,18 @@
max-width: 500px;

h6 {
margin-bottom: 10px;
font-family: $dp-font-family-proximanova;
font-weight: bold;
color: $dp-color-white;
text-transform: uppercase;
margin-bottom: 10px;
}

h3 {
margin: 10px 0;
font-family: $dp-font-family-proximanova;
font-weight: bold;
color: $dp-color-white;
margin: 10px 0;
}

p {
Expand Down Expand Up @@ -122,4 +127,25 @@
.feature-panel {
display: none;
}
}
@include media-breakpoint('mobile') {
.panel-wrapper {
.main-panel {
.signup-form {
.holder-small {
width: 100%;
margin-right: 0;
display: block;

&:nth-child(1) {
margin-right: 0;
}
}

ul > li:nth-child(n+2) {
margin-top: 20px;
}
}
}
}
}