Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 5ca59e11 authored by Julie Thezenas's avatar Julie Thezenas Committed by Christophe Chaudier
Browse files

feat: add all buttons colors properties

parent 6368a94e
No related branches found
No related tags found
1 merge request!65Resolve "Change buttons colors"
Hide whitespace changes
Inline Side-by-side
src/css/buttons.css 0 → 100644
+ 129
− 0
View file @ 5ca59e11
/***** 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);
}
src/css/custom.css
+ 1
− 48
View file @ 5ca59e11
@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 {
......
src/css/dark-theme.css
+ 0
− 7
View file @ 5ca59e11
......@@ -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);
......
src/pages/dummy_page.mdx
+ 25
− 4
View file @ 5ca59e11
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service