sidebar corrected

This commit is contained in:
Gaëlle Morin 2019-11-05 19:58:40 +01:00
parent 3c7700e966
commit 372ee5c6e8
2 changed files with 71 additions and 25 deletions

View File

@ -225,38 +225,49 @@ a,
&.button { &.button {
padding: 0.55rem 2.5rem; padding: 0.55rem 2.5rem;
border-radius: 100em; border-radius: 100em;
*, & {
*,
& {
font-size: 1.4rem; font-size: 1.4rem;
} }
&.small { &.small {
*, & {
*,
& {
font-size: 1rem; font-size: 1rem;
} }
} }
&.text-bold { &.text-bold {
*, & {
*,
& {
font-weight: bold; font-weight: bold;
} }
} }
&.text-uppercase { &.text-uppercase {
*, & {
*,
& {
text-transform: uppercase; text-transform: uppercase;
} }
} }
&.rounded { &.rounded {
border-radius: 50%; border-radius: 50%;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
&.button-link { &.button-link {
border-radius: 100em; border-radius: 100em;
*, & {
*,
& {
text-decoration: underline; text-decoration: underline;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
@ -265,69 +276,90 @@ a,
&.with-icon::before { &.with-icon::before {
font-size: 1.6rem; font-size: 1.6rem;
margin-right: 1rem; margin-right: 1rem;
&.icon-plus { &.icon-plus {
/* ... */ @include icon('plus');
} }
&.icon-close { &.icon-close {
/* ... */ @include icon('close');
} }
&.icon-edit { &.icon-edit {
/* ... */ @include icon('pencil');
} }
} }
&.button-yellow { &.button-yellow {
background-color: white; background-color: white;
*, & {
*,
& {
color: hsl(43, 100%, 50%); color: hsl(43, 100%, 50%);
} }
&.bordered { &.bordered {
border: 1px solid hsl(43, 100%, 50%); border: 1px solid hsl(43, 100%, 50%);
} }
&:hover { &:hover {
background-color: #FFCE51; background-color: #FFCE51;
*, & {
*,
& {
color: white; color: white;
} }
} }
} }
&.button-blue { &.button-blue {
background-color: white; background-color: white;
*, & {
*,
& {
color: hsl(244, 73%, 62%); color: hsl(244, 73%, 62%);
} }
&.bordered { &.bordered {
border: 1px solid hsl(244, 73%, 62%); border: 1px solid hsl(244, 73%, 62%);
} }
&:hover { &:hover {
background-color: hsl(244, 73%, 62%); background-color: hsl(244, 73%, 62%);
*, & {
*,
& {
color: white; color: white;
} }
} }
} }
&.button-dark { &.button-dark {
color: hsl(233, 18%, 29%); color: hsl(233, 18%, 29%);
background-color: white; background-color: white;
&.bordered { &.bordered {
border: 1px solid hsl(233, 18%, 29%); border: 1px solid hsl(233, 18%, 29%);
} }
&:hover { &:hover {
background-color: hsl(233, 18%, 29%); background-color: hsl(233, 18%, 29%);
color: white; color: white;
} }
} }
&.reversed { &.reversed {
&.button-yellow { &.button-yellow {
background-color: hsl(43, 100%, 50%); background-color: hsl(43, 100%, 50%);
*, & {
*,
& {
color: white; color: white;
} }
&:hover { &:hover {
background-color: #FFCE51; background-color: #FFCE51;
&.bordered { &.bordered {
border: 1px solid hsl(43, 100%, 50%); border: 1px solid hsl(43, 100%, 50%);
} }
@ -336,30 +368,42 @@ a,
&.button-blue { &.button-blue {
background-color: hsl(244, 73%, 62%); background-color: hsl(244, 73%, 62%);
*, & {
*,
& {
color: white; color: white;
} }
&:hover { &:hover {
background-color: white; background-color: white;
*, & {
*,
& {
color: hsl(244, 73%, 62%); color: hsl(244, 73%, 62%);
} }
&.bordered { &.bordered {
border: 1px solid hsl(244, 73%, 62%); border: 1px solid hsl(244, 73%, 62%);
} }
} }
} }
&.button-dark { &.button-dark {
background-color: hsl(233, 18%, 29%); background-color: hsl(233, 18%, 29%);
*, & {
*,
& {
color: white; color: white;
} }
&:hover { &:hover {
background-color: white; background-color: white;
*, & {
*,
& {
color: hsl(233, 18%, 29%); color: hsl(233, 18%, 29%);
} }
&.bordered { &.bordered {
border: 1px solid hsl(233, 18%, 29%); border: 1px solid hsl(233, 18%, 29%);
} }

View File

@ -36,6 +36,8 @@
>ul { >ul {
cursor: pointer; cursor: pointer;
display: flex;
flex-direction: column;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;