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"
/***** 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);
}
@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 {
......
......@@ -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);
......
......@@ -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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment