app/assets/stylesheets/application.css
/*
0 - 600px: Phone
600 - 900px: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + : Big desktop
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop
ORDER: Base + typography > general layout + grid > page layout > components
1em = 16px
*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
text-decoration: none;
outline: 0; }
html {
font-size: 87.5%; }
@media only screen and (max-width: 75em) {
html {
font-size: 75%; } }
@media only screen and (max-width: 56.25em) {
html {
font-size: 62.5%; } }
@media only screen and (min-width: 112.5em) {
html {
font-size: 87.5%; } }
body {
box-sizing: border-box; }
@media only screen and (max-width: 56.25em) {
body {
padding: 0; } }
main {
min-height: 63vh; }
@media only screen and (max-width: 56.25em) {
main {
margin-top: 3rem; } }
@media only screen and (max-width: 37.5em) {
main {
margin-top: 3rem; } }
@media only screen and (max-width: 75em) {
main {
min-height: 68vh; } }
li {
list-style-type: none; }
a {
text-decoration: none !important; }
.border_command {
border: 1px solid gray;
width: 15%; }
td input {
-webkit-appearance: none;
border: none;
width: 60%;
color: black;
background-color: #78c702;
text-align: center; }
.flash_success {
color: green;
background-color: #DDD;
border-radius: 15px;
padding: 5px;
width: 20%;
font-size: 20px;
font-weight: bold;
margin: 0 auto; }
/* NAVIGATION */
#logo {
width: 10rem; }
.bg-dark {
background-color: #2f2f2f !important; }
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
color: #fff;
text-decoration: none;
font-size: 0.9rem;
text-transform: uppercase; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active > .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active:hover,
.navbar-light .navbar-nav .nav-link.show:hover,
.navbar-light .navbar-nav .show > .nav-link:hover {
color: #78c702; }
.active {
border-left: 2px solid rgba(120, 199, 2, 0.5);
border-right: 2px solid rgba(120, 199, 2, 0.5);
font-weight: bold; }
.active .nav-link {
color: #78c702 !important; }
.active .fa .fa-navicon {
color: #fff; }
@media only screen and (max-width: 56.25em) {
.nav-item {
border: none;
text-align: center; }
.nav-item.active {
border-bottom: 1px solid #78c702;
width: 8rem;
margin: 0 auto; } }
@media only screen and (max-width: 75em) {
.nav-item {
border: none;
text-align: center; }
.nav-item.active {
border-bottom: 1px solid #78c702;
width: 8rem;
margin: 0 auto; } }
.custom-toggler.navbar-toggler {
border-color: #78c702;
color: #78c702; }
/* PAGINATION */
.pagination {
display: block;
margin: 0 auto;
float: none;
margin-top: 1rem; }
.pagination a,
.pagination span.gap {
padding: 0 12px;
line-height: 38px;
text-decoration: none;
background-color: #2f2f2f;
border-radius: 6px;
color: #78c702;
font-weight: bold;
margin: 0 3px; }
.pagination span.current {
padding: 0 12px;
line-height: 0px;
text-decoration: none;
border-radius: 6px;
color: #2f2f2f;
font-weight: bold;
background-color: #78c702;
margin: 0 3px; }
.pagination a:hover {
background-color: #78c702;
color: #2f2f2f; }
.first,
.prev,
.next,
.last {
display: none; }
.page {
padding: 0;
float: none;
border: none; }
#bloc_facture {
border: 2px solid black;
height: 200px;
margin: 1rem;
padding: 3rem; }
@media only screen and (max-width: 56.25em) {
#bloc_facture {
padding: 2rem; } }
@media only screen and (max-width: 75em) {
#bloc_facture {
padding: 4rem; } }
@media only screen and (max-width: 56.25em) {
#bloc_facture {
padding: 2rem; } }
section.gpmt {
justify-content: center; }
section.gpmt .block-gpmt {
display: flex;
flex-wrap: wrap;
justify-content: center; }
section.gpmt .block-gpmt .profil-card {
background-color: #2f2f2f;
display: flex;
width: 300px;
height: 90px;
padding: 10px;
margin: 5px;
justify-content: center;
border-radius: 5px; }
section.gpmt .block-gpmt .profil-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right bottom, #6ce61a, #0c920e);
transform: scale(1) translateY(-0.2rem); }
section.gpmt .block-gpmt .profil-card .main-image {
width: 30%;
display: flex;
justify-content: center; }
section.gpmt .block-gpmt .profil-card .main-image .profil-img {
width: 70px;
clip-path: circle(50% at 50% 50%); }
section.gpmt .block-gpmt .profil-card .image {
width: 15%;
display: flex;
align-items: center;
justify-content: center; }
section.gpmt .block-gpmt .profil-card .image .rank-img {
width: 25px; }
section.gpmt .block-gpmt .profil-card .name {
color: white;
width: 55%;
display: flex;
align-items: center; }
section.gpmt .block-gpmt .profil-card .name p {
margin-bottom: 0;
font-size: 15px; }
.bl-2 {
border-left: 1px solid rgba(0, 0, 0, 0.2); }
@media only screen and (max-width: 56.25em) {
.bl-2 {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.2); } }
#btns {
background-color: #78c702;
border-radius: 15px;
padding: 6px 13px;
color: black;
font-weight: bold;
border: none;
cursor: pointer; }
#btns:hover {
background-color: #1f1f1f;
color: #78c702; }
#buttonToTop {
display: inline-block;
background-color: #78c702;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s, opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
box-shadow: 0px 5px 10px black; }
#buttonToTop::before {
font-size: 2em;
line-height: 50px;
color: #2f2f2f; }
#buttonToTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #2f2f2f; }
#buttonToTop:hover {
cursor: pointer;
background-color: #DDD; }
#buttonToTop:active {
background-color: gray; }
#buttonToTop.show {
opacity: 1;
visibility: visible; }
.footer {
background-color: #2f2f2f;
padding: 1rem;
font-size: 1.4rem;
color: #78c702;
width: 100%;
position: sticky; }
@media only screen and (max-width: 56.25em) {
.footer {
padding: 8rem 0; } }
@media only screen and (max-width: 75em) {
.footer {
padding: 1rem 0; } }
.footer__logo-box {
text-align: center;
margin-bottom: 3rem;
margin-top: 2rem; }
.footer__logo {
width: 15rem;
height: auto; }
.footer__navigation {
border-top: 1px solid #1f1f1f;
padding-top: 2rem;
display: inline-block; }
@media only screen and (max-width: 56.25em) {
.footer__navigation {
width: 100%;
text-align: center; } }
.footer__list {
list-style: none; }
.footer__item {
display: inline-block; }
.footer__item:not(:last-child) {
margin-right: 1.5rem; }
.footer__link {
font-size: 1.1rem; }
.footer__link:link, .footer__link:visited {
color: #78c702;
background-color: #2f2f2f;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: all .2s; }
.footer__link:hover, .footer__link:active {
color: #fff;
text-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.4);
transform: rotate(1deg) scale(1.1); }
.footer__link--lowcase {
text-transform: none; }
.footer__link--lowcase:link, .footer__link--lowcase:visited {
color: #78c702;
background-color: #2f2f2f;
text-decoration: none;
display: inline-block;
transition: all .2s; }
.footer__link--lowcase:hover, .footer__link--lowcase:active {
color: #fff;
transform: rotate(1deg) scale(1.3); }
.footer__copyright {
border-top: 1px solid #1f1f1f;
padding-top: 2rem;
width: 75%;
float: right;
text-align: center;
font-size: 1.1rem; }
@media only screen and (max-width: 56.25em) {
.footer__copyright {
width: 100%;
float: none; } }
.footer img {
width: 15rem; }
@media only screen and (max-width: 37.5em) {
.footer img {
width: 35%; } }
@media only screen and (max-width: 56.25em) {
.footer img {
width: 30%; } }
.icons {
width: 2.5rem; }
.bg-video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
opacity: .6;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 71%, 0% 100%); }
.bg-video__content {
height: 100%;
width: 100%;
object-fit: cover; }
.align-mid {
margin: 33vh 0; }
.section-2 {
height: 85vh;
background-image: linear-gradient(to right bottom, rgba(47, 47, 47, 0.8), rgba(120, 199, 2, 0.8));
background-size: cover;
background-position: top;
position: relative; }
.section-2 .bg {
position: absolute;
top: 4rem;
left: 4rem;
height: 100vw; }
div#flash_notice.flash_message {
background-color: rgba(120, 199, 2, 0.3);
background-image: url("valid.png");
background-size: 2rem;
background-repeat: no-repeat;
border: 1px solid #78c702;
border-radius: 6px;
color: black;
width: 33%;
height: 30px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center; }
.row {
max-width: 114rem;
margin: 0 auto; }
.row:not(:last-child) {
margin-bottom: 8rem; }
@media only screen and (max-width: 56.25em) {
.row:not(:last-child) {
margin-bottom: 2rem; } }
@media only screen and (max-width: 56.25em) {
.row {
max-width: 50rem;
padding: 0 3rem; } }
.row::after {
content: "";
display: table;
clear: both; }
.row [class^="col-"] {
float: left; }
.row [class^="col-"]:not(:last-child) {
margin-right: 1rem; }
@media only screen and (max-width: 56.25em) {
.row [class^="col-"]:not(:last-child) {
margin-right: 0;
margin-bottom: 2rem; } }
@media only screen and (max-width: 56.25em) {
.row [class^="col-"] {
width: 100% !important; } }
.row .col-1-of-2 {
width: calc((100% - 1rem) / 2); }
.row .col-1-of-3 {
width: calc((100% - 2 * 1rem) / 3); }
.row .col-2-of-3 {
width: calc(2 * ((100% - 2 * 1rem) / 3) + 1rem); }
.row .col-1-of-4 {
width: calc((100% - 3 * 1rem) / 4); }
.row .col-2-of-4 {
width: calc(2 * ((100% - 3 * 1rem) / 4) + 1rem); }
.row .col-3-of-4 {
width: calc(3 * ((100% - 3 * 1rem) / 4) + 2 * 1rem); }
.manage_products {
margin-bottom: 5rem; }
.cookie_text {
font-size: 16px;
letter-spacing: 0px;
color: #2f2f2f;
text-align: center;
padding-top: 8px; }
#message {
width: 100%;
height: auto;
text-align: center;
display: none;
background-color: #c6f271;
border-radius: 0 0 20px 20px; }
[type="reset"], [type="submit"], button, html [type="button"] {
background-color: #2f2f2f;
color: #78c702; }
.cookie_link {
font-size: 16px;
color: #fff;
font-weight: bold;
text-decoration: underline; }
.cookie_link:hover {
color: #fff;
text-decoration: underline; }