From 3bb5eb4196222e8efe737a7b07599bc056d65d37 Mon Sep 17 00:00:00 2001
From: HAUTBOIS Aurelie <aurelie.hautbois@ext.soprasteria.com>
Date: Mon, 25 Jan 2021 09:47:00 +0100
Subject: [PATCH] feat: create mixins buttons
---
src/styles/base/_buttons.scss | 82 +++++++++++++++++++++++++++++++++++
src/styles/base/_mixins.scss | 26 +++++++++++
src/styles/index.scss | 1 +
3 files changed, 109 insertions(+)
create mode 100644 src/styles/base/_buttons.scss
create mode 100644 src/styles/base/_mixins.scss
diff --git a/src/styles/base/_buttons.scss b/src/styles/base/_buttons.scss
new file mode 100644
index 000000000..1bc819489
--- /dev/null
+++ b/src/styles/base/_buttons.scss
@@ -0,0 +1,82 @@
+@import 'color';
+@import 'mixins';
+
+button {
+ &.btn-highlight {
+ @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+ background-color: darken($gold-shadow, 12%);
+ }
+ }
+ &.btn-primary-positive {
+ @include button(
+ transparent,
+ $gold-shadow,
+ 1px solid $dark-light-2,
+ transparent
+ ) {
+ background-color: rgba($dark-light-2, 0.2);
+ span:first-child {
+ color: rgba($gold-shadow, 0.7);
+ }
+ }
+ }
+ &.btn-primary-negative {
+ @include button(
+ transparent,
+ $gold-shadow,
+ 1px solid $grey-dark,
+ transparent
+ ) {
+ background-color: rgba($grey-dark, 0.2);
+ span:first-child {
+ color: rgba($gold-shadow, 0.7);
+ }
+ }
+ }
+ &.btn-secondary-positive {
+ @include button(
+ transparent,
+ $grey-bright,
+ 1px solid $dark-light-2,
+ transparent
+ ) {
+ background-color: rgba($dark-light-2, 0.2);
+ span:first-child {
+ color: rgba($grey-bright, 0.7);
+ }
+ }
+ }
+ &.btn-secondary-negatif {
+ @include button(
+ transparent,
+ $grey-bright,
+ 1px solid $grey-dark,
+ transparent
+ ) {
+ background-color: rgba($grey-dark, 0.2);
+ span:first-child {
+ color: rgba($grey-bright, 0.7);
+ }
+ }
+ }
+ &.btn-duel-off {
+ @include button(
+ $dark-light-2,
+ $white,
+ 1px solid rgba(97, 240, 242, 0.5),
+ $dark-light-2
+ ) {
+ background-color: darken($dark-light-2, 12%);
+ }
+ }
+ &.btn-duel-active {
+ @include button($blue, $dark-light-2, none, $blue) {
+ background-color: darken($blue, 30%);
+ }
+ }
+ &.btn-duel-on {
+ @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
+ background-color: darken($dark-light-2, 12%);
+ }
+ }
+}
diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss
new file mode 100644
index 000000000..2ee793743
--- /dev/null
+++ b/src/styles/base/_mixins.scss
@@ -0,0 +1,26 @@
+@mixin button(
+ $background,
+ $text-color,
+ $border: none,
+ $background-gradient: $background
+) {
+ background: $background-gradient;
+ background-color: $background;
+ border: $border;
+ border-radius: 2px;
+ margin: 1.5rem 0 0;
+ padding: 0.5rem 2.5rem;
+ width: 100%;
+ span:first-child {
+ color: $text-color;
+ }
+ &:hover,
+ &:focus,
+ &.active,
+ &:disabled {
+ @content;
+ }
+ &:disabled {
+ cursor: initial;
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 418f64c99..9d1b920ba 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,6 +7,7 @@
@import 'base/color';
@import 'base/breakpoint';
@import 'base/typography';
+@import 'base/buttons';
@import 'components/barchart';
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
--
GitLab