From 5ca59e11d18b94d9d45824d571fa8af9c75a6072 Mon Sep 17 00:00:00 2001
From: Julie Thezenas <julie.thezenas@gmail.com>
Date: Tue, 5 Jul 2022 14:11:13 +0000
Subject: [PATCH] feat: add all buttons colors properties
---
src/css/buttons.css | 129 +++++++++++++++++++++++++++++++++++++++
src/css/custom.css | 49 +--------------
src/css/dark-theme.css | 7 ---
src/pages/dummy_page.mdx | 29 +++++++--
4 files changed, 155 insertions(+), 59 deletions(-)
create mode 100644 src/css/buttons.css
diff --git a/src/css/buttons.css b/src/css/buttons.css
new file mode 100644
index 0000000..93fd8af
--- /dev/null
+++ b/src/css/buttons.css
@@ -0,0 +1,129 @@
+/***** BUTTON *****/
+.button {
+ margin: 10px;
+ border-color: var(--ifm-color-success);
+ color: var(--ifm-color-frame);
+ border-style: none;
+ white-space : initial;
+ font-family: var(--ifm-font-family-base);
+}
+
+.button--beta {
+ background-color: var(--ifm-color-success);
+ border-color: var(--ifm-color-success);
+ color: var(--ifm-color-frame);
+ border-style: none;
+}
+
+.button--beta:hover {
+ color: var(--ifm-color-secondary);
+ background-color: var(--ifm-color-info);
+ border-style: none;
+}
+
+/* btn note */
+.button--note {
+ background-color: var(--ifm-color-gray-300);
+ color: var(--ifm-color-gray-800);
+ border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:not(.button--outline) {
+ background-color: var(--ifm-color-gray-300);
+ color: var(--ifm-color-gray-800);
+ text-decoration: none;
+ border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:hover, .button--note:not(.button--outline):hover {
+ color: var(--ifm-color-gray-800);
+ background-color: var(--ifm-color-gray-100);
+ border-style: none;
+ border: 1px solid var(--ifm-color-gray-800);
+}
+
+/* btn success */
+.button--success {
+ background-color: var(--ifm-color-success-darkest);
+ color: var(--ifm-color-white);
+ border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:not(.button--outline) {
+ background-color: var(--ifm-color-success-darkest);
+ color: var(--ifm-color-white);
+ text-decoration: none;
+ border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:hover, .button--success:not(.button--outline):hover {
+ color: var(--ifm-color-secondary);
+ background-color: var(--ifm-color-success);
+ border-style: none;
+ border: 1px solid var(--ifm-color-white);
+}
+
+/* btn info */
+.button--info {
+ background-color: var(--ifm-color-info-darkest);
+ color: var(--ifm-color-white);
+ border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:not(.button--outline) {
+ background-color: var(--ifm-color-info-darkest);
+ color: var(--ifm-color-white);
+ text-decoration: none;
+ border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:hover, .button--info:not(.button--outline):hover {
+ color: var(--ifm-color-secondary);
+ background-color: var(--ifm-color-info-dark);
+ border-style: none;
+ border: 1px solid var(--ifm-color-white);
+}
+
+/* btn warning */
+.button--warning {
+ background-color: var(--ifm-color-warning-darkest);
+ color: var(--ifm-color-white);
+}
+
+.button--warning:not(.button--outline) {
+ background-color: var(--ifm-color-warning-darkest);
+ color: var(--ifm-color-white);
+ text-decoration: none;
+ border: 1px solid var(--ifm-color-white);
+}
+
+.button--warning:hover, .button--warning:not(.button--outline):hover {
+ color: var(--ifm-color-secondary);
+ background-color: var(--ifm-color-warning-darker);
+ border: 1px solid var(--ifm-color-white);
+}
+
+/* btn danger */
+.button--danger {
+ background-color: var(--ifm-color-danger-darkest);
+ color: var(--ifm-color-white);
+}
+
+.button--danger:not(.button--outline) {
+ background-color: var(--ifm-color-danger-darkest);
+ color: var(--ifm-color-white);
+ text-decoration: none;
+ border: 1px solid var(--ifm-color-white);
+}
+
+.button--danger:hover, .button--danger:not(.button--outline):hover {
+ color: var(--ifm-color-secondary);
+ background-color: var(--ifm-color-danger);
+ border: 1px solid var(--ifm-color-white);
+}
+
+/* button "La doc de Froggit" */
+.breadcrumbs__item--active .breadcrumbs__link {
+ background: var(--ifm-breadcrumb-item-background-active);
+ color: var(--ifm-color-warning);
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index da3b543..269a697 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,4 +1,5 @@
@import url("variables.css");
+@import url("buttons.css");
@import url("fonts.css");
@import url("footer.css");
@import url("dark-theme.css");
@@ -126,48 +127,6 @@ ul {
padding-bottom: 20px;
}
-.btn-little-txt {
- font-size: small;
-}
-
-/***** BUTTON *****/
-.button {
- margin: 10px;
- border-color: var(--ifm-color-success);
- color: var(--ifm-color-frame);
- border-style: none;
- white-space : initial;
- font-family: var(--ifm-font-family-base);
-}
-
-.button--beta {
- border-color: var(--ifm-color-success);
- border-style: none;
- background-color: var(--ifm-color-frame);
- color: var(--ifm-color-black);
-}
-
-.button--beta:hover {
- color: var(--ifm-color-secondary);
- background-color: var(--ifm-color-success);
- border-style: none;
-}
-
-.button--warning {
- color: var(--ifm-color-success);
- border-style: none;
-}
-
-.button--warning:hover, .button--warning:not(.button--outline):hover {
- color: var(--ifm-color-secondary);
- background-color: var(--ifm-color-info);
- border-style: none;
-}
-
-.button--warning:not(.button--outline) {
- background-color: var(--ifm-color-frame);
-}
-
/******* MAIN ELEM *******/
.section-promises {
padding: 4rem 0;
@@ -239,12 +198,6 @@ ul {
color: var(--ifm-color-warning);
}
-/* button "La doc de Froggit" */
-.breadcrumbs__item--active .breadcrumbs__link {
- background: var(--ifm-breadcrumb-item-background-active);
- color: var(--ifm-color-warning);
-}
-
/****** MEDIA SCREEN *******/
@media screen and (max-width:330px) {
.navbar {
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index e2a62f3..ed4d3e5 100644
--- a/src/css/dark-theme.css
+++ b/src/css/dark-theme.css
@@ -40,13 +40,6 @@ html[data-theme='dark'] .clean-btn :hover {
color: var(--ifm-color-secondary);
}
-/* dark theme button*/
-html[data-theme='dark'] .button--beta:hover {
- color: var(--ifm-color-secondary);
- background-color: var(--ifm-color-info);
- border-style: none;
-}
-
/* a & text */
html[data-theme='dark'] .theme-doc-footer-edit-meta-row a {
color: var(--ifm-color-warning);
diff --git a/src/pages/dummy_page.mdx b/src/pages/dummy_page.mdx
index 1198068..9690f2c 100644
--- a/src/pages/dummy_page.mdx
+++ b/src/pages/dummy_page.mdx
@@ -13,11 +13,32 @@ Page factice penser à créer une vraie page !
echo "Hello World"
```
-## Hello mon carousel Libre !
+<button className="button button--note">button--note</button>
+<button className="button button--success">button--success</button>
+<button className="button button--info">button--info</button>
+<button className="button button--warning">button--warning</button>
+<button className="button button--danger">button--danger</button>
-<div>
- <CarouselLibre />
-</div>
+
+:::note Encart note
+🔜 **Les tarifs arrivent !** <a class="button button--note" href="#">Bouton note !</a>
+:::
+
+:::success Encart success
+🔜 **Les tarifs arrivent !** <a class="button button--success" href="#">Bouton success !</a>
+:::
+
+:::info Encart info
+🔜 **Les tarifs arrivent !** <a class="button button--info" href="#">Bouton info !</a>
+:::
+
+:::caution Encart caution
+🔜 **Les tarifs arrivent !** <a class="button button--warning" href="#">Bouton caution !</a>
+:::
+
+:::danger Encart danger
+🔜 **Les tarifs arrivent !** <a class="button button--danger" href="#">Bouton danger !</a>
+:::
:::note
--
GitLab