diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index d43fd44..ea2ea9b 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -82,55 +82,6 @@ h5 { font-size: 2rem; } -button { - background: none; - border: none; - padding: 0; -} - -sib-route, -sib-link, -button, -input, -a { - cursor: pointer; - &:hover, - &:link, - &:active { - cursor: pointer; - } -} - -sib-link.yellow-button { - @include icon('plus'); - - &::before { - font-size: 1.6rem; - margin-right: 1rem; - } -} - -sib-delete { - - button { - @include icon('close'); - background-color: $color-233-18-29; - border: none; - /*border-radius: 100em;*/ - color: $color-0-0-100; - /*cursor: pointer;*/ - /*font-size: 1.4rem;*/ - /*font-weight: bold;*/ - /*padding: 0.55rem 2.5rem;*/ - /*text-transform: uppercase;*/ - - &::before { - font-size: 1.6rem; - margin-right: 1rem; - } - } -} - %padding-main { padding: 5rem; } @@ -231,15 +182,6 @@ sib-delete { } } -.editlink { - - @include icon('pencil'); - background: $color-244-73-62; - border-radius: 50%; - color: white; - padding: 12px; -} - .name { color: $color-216-4-22; font-size: 2rem; @@ -264,4 +206,165 @@ sib-delete { @import 'form'; @import 'header'; @import 'menu-left'; -@import 'user-avatar'; \ No newline at end of file +@import 'user-avatar'; + +// Button global CSS +sib-delete, +sib-route, +sib-link, +button, +input[type='submit'], +a, +.button { + display: inline-block; + cursor: pointer; + background: none; + border: none; + padding: 0; + + &.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; + } + } + + &.with-icon::before { + font-size: 1.6rem; + margin-right: 1rem; + &.icon-plus { + /* ... */ + } + &.icon-close { + /* ... */ + } + &.icon-edit { + /* ... */ + } + } + + &.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%); + } + } + } + + &.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%); + } + } + } + } + } +} \ No newline at end of file