diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index ea2ea9b..4655bb7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -225,38 +225,49 @@ a, &.button { padding: 0.55rem 2.5rem; border-radius: 100em; - *, & { + + *, + & { font-size: 1.4rem; } - + &.small { - *, & { + + *, + & { font-size: 1rem; } } &.text-bold { - *, & { + + *, + & { font-weight: bold; } } &.text-uppercase { - *, & { + + *, + & { text-transform: uppercase; } } - + &.rounded { border-radius: 50%; padding: 0.5rem 1rem; - } + } &.button-link { border-radius: 100em; - *, & { + + *, + & { text-decoration: underline; } + &:hover { text-decoration: none; } @@ -265,69 +276,90 @@ a, &.with-icon::before { font-size: 1.6rem; margin-right: 1rem; + &.icon-plus { - /* ... */ + @include icon('plus'); } + &.icon-close { - /* ... */ + @include icon('close'); } + &.icon-edit { - /* ... */ + @include icon('pencil'); } } - + &.button-yellow { background-color: white; - *, & { + + *, + & { color: hsl(43, 100%, 50%); } + &.bordered { border: 1px solid hsl(43, 100%, 50%); } + &:hover { background-color: #FFCE51; - *, & { + + *, + & { color: white; } } } - + &.button-blue { background-color: white; - *, & { + + *, + & { color: hsl(244, 73%, 62%); } + &.bordered { border: 1px solid hsl(244, 73%, 62%); } + &:hover { background-color: hsl(244, 73%, 62%); - *, & { + + *, + & { color: white; } } } - + &.button-dark { color: hsl(233, 18%, 29%); background-color: white; + &.bordered { border: 1px solid hsl(233, 18%, 29%); } + &:hover { background-color: hsl(233, 18%, 29%); color: white; } } - + &.reversed { &.button-yellow { background-color: hsl(43, 100%, 50%); - *, & { + + *, + & { color: white; } + &:hover { background-color: #FFCE51; + &.bordered { border: 1px solid hsl(43, 100%, 50%); } @@ -336,30 +368,42 @@ a, &.button-blue { background-color: hsl(244, 73%, 62%); - *, & { + + *, + & { color: white; } + &:hover { background-color: white; - *, & { + + *, + & { color: hsl(244, 73%, 62%); } + &.bordered { border: 1px solid hsl(244, 73%, 62%); } } } - + &.button-dark { background-color: hsl(233, 18%, 29%); - *, & { + + *, + & { color: white; } + &:hover { background-color: white; - *, & { + + *, + & { color: hsl(233, 18%, 29%); } + &.bordered { border: 1px solid hsl(233, 18%, 29%); } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index f9d2499..683403e 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -36,6 +36,8 @@ >ul { cursor: pointer; + display: flex; + flex-direction: column; list-style: none; margin: 0; padding-left: 0;