Skip to content

Commit

Permalink
fix: colors reference (devhatt#201)
Browse files Browse the repository at this point in the history
  • Loading branch information
juliaam authored Apr 26, 2024
1 parent 604580c commit db901c7
Show file tree
Hide file tree
Showing 12 changed files with 674 additions and 646 deletions.
128 changes: 64 additions & 64 deletions src/components/AvatarButton/index.scss
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
@use '~styles/colors' as colors;
@use '~styles/fonts' as fonts;

.avatar-button {
display: flex;

&__container {
display: flex;
flex-direction: column;
gap: 0.8rem;

align-items: center;

text-decoration: none;

&:hover {
.avatar-button__bg {
border: 0.15rem solid colors.$grey900;

background: colors.$appContentColor;
}

.avatar-button__cross {
filter: invert(1);
}

.avatar-button__text {
opacity: 0.8;
}
}
}

&__bg {
width: 3rem;
height: 3rem;

display: flex;

align-items: center;
justify-content: center;

padding: 1.8rem;
border: 0.15rem solid colors.$appContentColor;

background: colors.$grey900;
border-radius: 8rem;

transition: 0.6s;
}

&__cross {
filter: invert(0);

transition: 0.6s;
}

&__text {
font-family: fonts.$primaryFont;
color: colors.$appContentColor;
font-size: 1.4rem;

transition: 0.6s;
}
}
@use '~styles/colors' as colors;
@use '~styles/fonts' as fonts;

.avatar-button {
display: flex;

&__container {
display: flex;
flex-direction: column;
gap: 0.8rem;

align-items: center;

text-decoration: none;

&:hover {
.avatar-button__bg {
border: 0.15rem solid colors.$gray900;

background: colors.$secondary100;
}

.avatar-button__cross {
filter: invert(1);
}

.avatar-button__text {
opacity: 0.8;
}
}
}

&__bg {
width: 3rem;
height: 3rem;

display: flex;

align-items: center;
justify-content: center;

padding: 1.8rem;
border: 0.15rem solid colors.$secondary100;

background: colors.$gray900;
border-radius: 8rem;

transition: 0.6s;
}

&__cross {
filter: invert(0);

transition: 0.6s;
}

&__text {
font-family: fonts.$primaryFont;
color: colors.$secondary100;
font-size: 1.4rem;

transition: 0.6s;
}
}
70 changes: 36 additions & 34 deletions src/components/Button/index.scss
Original file line number Diff line number Diff line change
@@ -1,34 +1,36 @@
@use '~styles/colors.scss' as colors;

.button {
font-family: 'Noto Sans', sans-serif;
color: rgb(255, 255, 255);
font-size: 1.6rem;
font-weight: 500;

padding: 1.6rem;
border: unset;

background-color: colors.$blue500;
border-radius: 1.4rem;

transition: 0.3s ease-in-out;

cursor: pointer;
appearance: none;

&--block {
width: 100%;
display: block;
}

&:hover:not(:disabled) {
background: colors.$appColor;
transform: scale(1.02);
}

&:disabled {
background: colors.$gray600;
cursor: not-allowed;
}
}
@use '~styles/colors.scss' as colors;

.button {
font-family: 'Noto Sans', sans-serif;
color: rgb(255, 255, 255);
font-size: 1.6rem;
font-weight: 500;

padding: 1.6rem;
border: unset;

background-color: colors.$primary200;
border-radius: 1.4rem;

transition: 0.3s ease-in-out;

cursor: pointer;
appearance: none;

&--block {
width: 100%;

display: block;
}

&:hover:not(:disabled) {
background: colors.$primary600;
transform: scale(1.02);
}

&:disabled {
background: colors.$gray600;

cursor: not-allowed;
}
}
96 changes: 48 additions & 48 deletions src/components/Checkbox/index.scss
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
@use '~styles/colors.scss' as colors;
@use '~styles/fonts.scss' as fonts;

.checkbox-container {
display: inline-flex;

align-items: center;

margin: 1rem;

cursor: pointer;

&__input {
width: 2.2rem;
height: 2.2rem;

margin: 0.8rem;
border: 0.2rem solid colors.$gray500;

border-radius: 0.5rem;

cursor: pointer;
appearance: none;

&:checked {
border-color: colors.$purple500;

background: colors.$purple500 url('./images/check.svg') no-repeat center
center/70%;
}

&:disabled {
border-color: colors.$gray500;

cursor: not-allowed;
}
}

&__checkboxText {
font-family: fonts.$primaryFont;
color: colors.$gray800;
text-align: left;
font-size: fonts.$xs;
font-weight: fonts.$semiBold;
line-height: 2;
letter-spacing: 0;
}
}
@use '~styles/colors.scss' as colors;
@use '~styles/fonts.scss' as fonts;

.checkbox-container {
display: inline-flex;

align-items: center;

margin: 1rem;

cursor: pointer;

&__input {
width: 2.2rem;
height: 2.2rem;

margin: 0.8rem;
border: 0.2rem solid colors.$gray500;

border-radius: 0.5rem;

cursor: pointer;
appearance: none;

&:checked {
border-color: colors.$primary500;

background: colors.$primary500 url('./images/check.svg') no-repeat center
center/70%;
}

&:disabled {
border-color: colors.$gray500;

cursor: not-allowed;
}
}

&__checkboxText {
font-family: fonts.$primaryFont;
color: colors.$gray800;
text-align: left;
font-size: fonts.$xs;
font-weight: fonts.$semiBold;
line-height: 2;
letter-spacing: 0;
}
}
2 changes: 1 addition & 1 deletion src/components/Dropdown/components/DropdownItem/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
padding: 0.3rem;

&:hover {
background-color: colors.$blue500;
background-color: colors.$primary200;
}

&[data-selected='true'] {
Expand Down
74 changes: 37 additions & 37 deletions src/components/ProgressBar/index.scss
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
@use '~styles/colors.scss' as colors;

.progress-bar {
width: 100%;

display: grid;

&__background {
width: 100%;
height: 50%;

grid-row: 1;
grid-column: 1;

position: relative;
top: 25%;
z-index: 0;

background-color: colors.$grey150;
border-radius: 100000px;
}

&__foreground {
height: 6px;

grid-row: 1;
grid-column: 1;

position: relative;
z-index: 1;

background-color: colors.$yellow500;
border-radius: 100000px;

transition: width 1s ease-in-out;
}
}
@use '~styles/colors.scss' as colors;

.progress-bar {
width: 100%;

display: grid;

&__background {
width: 100%;
height: 50%;

grid-row: 1;
grid-column: 1;

position: relative;
top: 25%;
z-index: 0;

background-color: colors.$gray150;
border-radius: 100000px;
}

&__foreground {
height: 6px;

grid-row: 1;
grid-column: 1;

position: relative;
z-index: 1;

background-color: colors.$primary300;
border-radius: 100000px;

transition: width 1s ease-in-out;
}
}
Loading

0 comments on commit db901c7

Please sign in to comment.