New version of hello-friend-ng-clone

This commit is contained in:
Aloïs Micard 2021-07-27 17:42:08 +02:00
parent 66da990f5c
commit 34adf86a92
58 changed files with 1482 additions and 437 deletions

View file

@ -13,7 +13,6 @@ a.button {
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-weight: 500;
@ -22,24 +21,51 @@ a.button {
appearance: none;
cursor: pointer;
outline: none;
// Default
background: $light-background-header;
.dark-theme & {
background: $dark-background-secondary;
@media (prefers-color-scheme: dark) {
background: $dark-background-header;
color: inherit;
}
/* variants */
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
color: inherit;
}
[data-theme=light] & {
background: $light-background-header;
}
&.outline {
background: transparent;
border-color: $light-background-secondary;
box-shadow: none;
padding: 8px 18px;
// Default
border-color: $light-background-secondary;
.dark-theme & {
@media (prefers-color-scheme: dark) {
border-color: $dark-background-secondary;
color: inherit;
}
@media (prefers-color-scheme: light) {
border-color: $light-background-secondary;
}
[data-theme=dark] & {
border-color: $dark-background-secondary;
color: inherit;
}
[data-theme=light] & {
border-color: $light-background-secondary;
}
:hover {
transform: none;
@ -80,7 +106,6 @@ a.button {
justify-content: center;
padding: 3px 8px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-size: 13px;
@ -90,10 +115,25 @@ a.button {
appearance: none;
cursor: pointer;
outline: none;
// Default
background: $light-background-secondary;
.dark-theme & {
@media (prefers-color-scheme: dark) {
background: $dark-background-secondary;
color: inherit;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-secondary;
color: inherit;
}
[data-theme=light] & {
background: $light-background-secondary;
}
}
}