From 3c7700e96686c445a754b87424d6702d2e60fec3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 5 Nov 2019 16:52:34 +0000
Subject: [PATCH] update: semantic css for buttons
---
src/styles/base/main.scss | 221 ++++++++++++++++++++++++++++----------
1 file changed, 162 insertions(+), 59 deletions(-)
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index d43fd442..ea2ea9bc 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
--
GitLab