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 529e22af authored by Julie Thezenas's avatar Julie Thezenas
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"
This commit is part of merge request !65. Comments created here will be created in the context of that merge request.
/***** 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("variables.css");
@import url("buttons.css");
@import url("fonts.css"); @import url("fonts.css");
@import url("footer.css"); @import url("footer.css");
@import url("dark-theme.css"); @import url("dark-theme.css");
...@@ -126,6 +127,7 @@ ul { ...@@ -126,6 +127,7 @@ ul {
padding-bottom: 20px; padding-bottom: 20px;
} }
<<<<<<< HEAD
.btn-little-txt { .btn-little-txt {
font-size: small; font-size: small;
} }
...@@ -168,6 +170,8 @@ ul { ...@@ -168,6 +170,8 @@ ul {
background-color: var(--ifm-color-frame); background-color: var(--ifm-color-frame);
} }
=======
>>>>>>> feat: add all buttons colors properties
/******* MAIN ELEM *******/ /******* MAIN ELEM *******/
.section-promises { .section-promises {
padding: 4rem 0; padding: 4rem 0;
...@@ -239,12 +243,6 @@ ul { ...@@ -239,12 +243,6 @@ ul {
color: var(--ifm-color-warning); 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 *******/
@media screen and (max-width:330px) { @media screen and (max-width:330px) {
.navbar { .navbar {
......
...@@ -13,11 +13,32 @@ Page factice penser à créer une vraie page ! ...@@ -13,11 +13,32 @@ Page factice penser à créer une vraie page !
echo "Hello World" 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 /> :::note Bêta en cours 🧪
</div> 🔜 **Les tarifs arrivent !** <a class="button button--note" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
:::
:::success Bêta en cours 🧪
🔜 **Les tarifs arrivent !** <a class="button button--success" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
:::
:::info Bêta en cours 🧪
🔜 **Les tarifs arrivent !** <a class="button button--info" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
:::
:::caution Bêta en cours 🧪
🔜 **Les tarifs arrivent !** <a class="button button--warning" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
:::
:::danger Bêta en cours 🧪
🔜 **Les tarifs arrivent !** <a class="button button--danger" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
:::
:::note :::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