Skip to content

Commit

Permalink
update templates
Browse files Browse the repository at this point in the history
  • Loading branch information
OlegPhenomenon committed Oct 5, 2023
1 parent 15e81a3 commit 79b7ba7
Show file tree
Hide file tree
Showing 16 changed files with 547 additions and 325 deletions.
304 changes: 191 additions & 113 deletions app/assets/builds/application.css

Large diffs are not rendered by default.

130 changes: 116 additions & 14 deletions app/assets/stylesheets/components/_account.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
.c-account__title-wrapper{
flex-direction: column-reverse;
@include mq(tablet){
flex-direction: row;
}
}

.c-account__title{
margin: 0;
margin-top: 0;
margin-bottom: rem(24px);
@include mq(tablet){
margin-bottom: rem(32px);
}
}

.c-account--mainpage{
.c-account_editicons {
&> svg:first-child{
Expand All @@ -10,15 +22,8 @@
}
.c-account_editicons {
gap: 8px;
position: absolute;
top: 0;
right: -14px;
transform: translateY(-50%);
height: 32px;
@include mq(tablet){
position: static;
transform: none;
}
height: rem(32px);
margin-bottom: rem(24px);
&> svg{
cursor: pointer;
opacity: 1;
Expand Down Expand Up @@ -59,11 +64,11 @@
width: 50%;
}
@include mq(tablet){
width: 131px;
width: rem(131px);
}
&:last-child{
@include mq(tablet){
width: 165px;
width: rem(165px);
}
}
}
Expand All @@ -79,7 +84,7 @@

.c-account__input--readonly{
label{
margin-bottom: 20px;
margin-bottom: rem(20px);
}
input{
border: 0;
Expand All @@ -105,6 +110,10 @@
margin: 0;
}
}
.c-account .c-account__checkbox label {
margin: 0;
margin-top: rem(5px);
}
.c-account__chekboxtitle {
color: $black-color;
font-size: rem(14px);
Expand Down Expand Up @@ -139,4 +148,97 @@
display: inline-flex;
align-items: center;
gap: 10px;
}
}
.c-account__label-explain {
display: flex;
justify-content: space-between;
span {
font-weight: 500;
&:first-child{
display: block;
@include mq(tablet){
display: inline-block;
}
}
}
& > span {
color: $grey-400-color;
margin-right: rem(16px);
display: none;
@include mq(tablet){
display: block;
}
@include mq(laptop){
display: none;
}
@include mq(menu){
display: block;
}
}
}

.c-account__input-explain{
color: $grey-400-color;
text-align: right;
font-size: rem(14px);
font-weight: 500;
line-height: rem(24px);
display: block;
@include mq(tablet){
display: none;
}
@include mq(laptop){
display: block;
}
@include mq(menu){
display: none;
}
}
.c-account__title--password {
margin-bottom: rem(24px);
@include mq(tablet) {
margin-bottom: rem(32px);
}
}
.o-checkbox-text {
margin-left: rem(8px);
@include mq(tablet){
margin-left: rem(16px);
}
white-space: normal;
&:first-child {
margin-bottom: rem(24px);
@include mq(tablet){
margin-bottom: rem(32px);
}
}
a {
color: $primary-blue-color;
text-decoration: underline;
}
}

.c-btn{
font-size: rem(14px);
}
.c-account__title--confirm{
margin-bottom: rem(8px);
}
.c-account__subtitle{
font-size: rem(14px);
font-weight: 500;
line-height: rem(24px);
margin: rem(0 0 16px 0);
@include mq(tablet){
margin: rem(0 0 24px 0);
}
@include mq(laptop){
margin: rem(0 0 32px 0);
}
}
.c-account__btns{
justify-content: center;
@include mq(laptop){
justify-content: flex-start;
}
}
11 changes: 8 additions & 3 deletions app/assets/stylesheets/components/_address.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
.c-account--adresses{
.c-account_editicons {
width: 100%;
@include mq(laptop){
width: unset;
}
}
input{
max-width: 550px;
}
.c-account__input-title{
gap: 40px;
input{
border-radius: 0;
}
Expand All @@ -17,9 +22,9 @@
.c-account__input-wrapper{
max-width: 100%;
flex-wrap: wrap;
gap: 8px;
column-gap: 8px;
@include mq(tablet){
gap: 16px;
column-gap: 16px;
}
.c-account__input{
input{
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/components/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
@import "notices";
@import "login";
@import "account";
@import "create-account";
@import "profile";
@import "table-whishlist";
@import "wishlist";
Expand Down
26 changes: 26 additions & 0 deletions app/assets/stylesheets/components/_create-account.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.c-account--createnew {
.o-card {
height: auto;
&.o-card--personaldata{
margin-bottom: rem(50px);
@include mq(laptop){
margin-bottom: rem(80px);
}
}
}
.o-checkbox-container--green {
.o-checkbox-text{
margin-bottom: 0;
}
@include mq(laptop){
padding-bottom: rem(40px);
}
}
.c-account__btn{
margin: 0 auto;
display: block;
@include mq(laptop){
margin: 0;
}
}
}
122 changes: 0 additions & 122 deletions app/assets/stylesheets/components/_profile.scss
Original file line number Diff line number Diff line change
@@ -1,123 +1 @@
.c-account--profile {
.o-grid--two-col {
grid-template-columns: repeat(1,1fr);
@include mq(laptop){
grid-template-columns: repeat(2,1fr);
}
}
.o-grid--sep {
row-gap: rem(20px);
@include mq(tablet){
row-gap: rem(40px);
}
@include mq(laptop){
row-gap: rem(50px);
column-gap: rem(50px);
}
}
.o-card {
height: 100%;
&:last-child {
background-color: transparent;
box-shadow: unset;
@include mq(tablet){
padding: rem(0 48px 0 48px);
}
@include mq(laptop){
padding: rem(30px 48px 48px 48px);
}
}
}
.c-account__title {
margin-bottom: rem(24px);
@include mq(tablet){
margin-bottom: rem(32px);
}
}
.o-checkbox-text {
margin-left: 8px;
@include mq(tablet){
margin-left: rem(16px);
}
white-space: normal;
&:first-child {
margin-bottom: rem(24px);
@include mq(tablet){
margin-bottom: rem(32px);
}
}
a {
color: $primary-blue-color;
text-decoration: underline;
}
}
.c-account__label-explain {
display: flex;
justify-content: space-between;
span {
font-weight: 500;
&:first-child{
display: block;
@include mq(tablet){
display: inline-block;
}
}
}
& > span {
color: $grey-400-color;
margin-right: rem(16px);
display: none;
@include mq(tablet){
display: block;
}
@include mq(laptop){
display: none;
}
@include mq(menu){
display: block;
}
}
}

.c-account__input-explain{
color: $grey-400-color;
text-align: right;
font-size: rem(14px);
font-weight: 500;
line-height: rem(24px);
display: block;
@include mq(tablet){
display: none;
}
@include mq(laptop){
display: block;
}
@include mq(menu){
display: none;
}
}
.c-btn{
font-size: 14px;
}
.c-account__title--confirm{
margin-bottom: 8px;
}
.c-account__subtitle{
font-size: rem(14px);
font-weight: 500;
line-height: rem(24px);
margin: rem(0 0 16px 0);
@include mq(tablet){
margin: rem(0 0 24px 0);
}
@include mq(laptop){
margin: rem(0 0 32px 0);
}
}
.c-account__btns{
justify-content: center;
@include mq(laptop){
justify-content: flex-start;
}
}
}
21 changes: 19 additions & 2 deletions app/assets/stylesheets/objects/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,31 @@
padding: rem(24px 24px 48px 24px);
align-self: self-start;
position: relative;

@include mq(tablet){
padding: rem(30px 48px 48px 48px);
}
}

.o-card--no-shadow {
background-color: transparent;
box-shadow: unset;
@include mq(tablet){
padding: rem(0 48px 0 48px);
}
@include mq(laptop){
padding: rem(40px 48px 48px 48px);
}
}
.o-card__title{
color: $black-color;
font-size: 24px;
font-weight: 900;
}
.c-account{
.o-card{
height: 100%;
padding: rem(36px 24px 48px 24px);
@include mq(tablet){
padding: rem(40px 48px 48px 48px);
}
}
}
Loading

0 comments on commit 79b7ba7

Please sign in to comment.