poulpe/shared/static/css/global.css
2017-08-28 18:08:48 +02:00

242 lines
6.2 KiB
CSS

@charset "UTF-8";
/*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
FICHIER .SCSS */
/* COLORS */
/* FONTS */
.message-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1; }
.message-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6; }
.message-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc; }
.message-error {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1; }
/* BANNER */
.strong-banner {
background-color: #FF9C5F;
height: 40px; }
.strong-banner a {
color: #ffebdf; }
.soft-banner {
background-color: #ffcbac;
height: 60px; }
header .navigation {
display: flex;
flex-direction: row;
justify-content: center; }
header .navigation.main-nav {
justify-content: space-between; }
header .navigation ul, header .navigation ul.navigation {
list-style-type: none; }
header .navigation li {
margin: 10px;
display: inline-block; }
header h1 {
margin: 5px 0px 0px 0px;
font-size: 25px; }
.btn-primary {
/**
* This mixins allows defining color-related properties of buttons.
*
* It sets the following properties:
* color: $color, except for disabled-like buttons.
* border-color: $border.
* background-color: Depending on button state:
* - Default, disabled:
* $background-base
* - Hovered, focused, actived, responsible of an opened dropdown:
* (one is sufficent)
* $background-special
*
* ## Bootstrap compatibility
*
* This mixin can be used to replace colors behaviors of Bootstrap buttons.
* Indeed, this mixin aims to replace each definition done by the
* 'button-variant' Bootstrap mixin.
*
*/
color: white;
background-color: #FF9C5F;
border-color: #FF9C5F;
/**
* This mixin applies content if the button is in at least one of the
* following states:
*
* - hovered,
* - focused,
* - actived,
* - is responsible of an opened dropdown.
*
* Where possible, state is checked from class attribute and
* :pseudo-classes.
*
* ## Bootstrap compatibility
*
* If content defines 'color', 'background-color' and 'border', it is safe
* to use this mixin with Bootstrap buttons as it will overrides all
* Bootstrap color defaults of the previous cases.
* To be precise, this covers all special important-like cases of the
* Bootstrap mixin 'button-variant' (except the 'disabled' case).
*
*/ }
.btn-primary:focus, .btn-primary.focus, .btn-primary:hover {
color: white;
background-color: #ffcbac;
border-color: #FF9C5F; }
.btn-primary:active, .btn-primary.active {
color: white;
background-color: #ffcbac;
border-color: #FF9C5F; }
.btn-primary:active:focus, .btn-primary:active.focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .btn-primary.active:hover {
color: white;
background-color: #ffcbac;
border-color: #FF9C5F; }
.open > .btn-primary.dropdown-toggle {
color: white;
background-color: #ffcbac;
border-color: #FF9C5F; }
.open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:hover {
color: white;
background-color: #ffcbac;
border-color: #FF9C5F; }
.btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:hover {
background-color: #FF9C5F;
border-color: #FF9C5F; }
.btn-primary .badge {
color: #FF9C5F;
background-color: white; }
/* SURCHARGE DE LA GRILLE */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
/* On rajoute une taille pour les
* très grand écrans */ }
@media (min-width: 768px) {
.container {
width: 750px; } }
@media (min-width: 992px) {
.container {
width: 970px; } }
@media (min-width: 1200px) {
.container {
width: 1170px; } }
@media (min-width: 1500px) {
.container {
width: 1470px; } }
/* MISE EN FORME GÉNÉRALE */
html {
height: 100%;
background-color: #C4E1E7; }
body {
font-family: "Saira Semi Condensed", sans-serif;
font-size: 15px;
display: flex;
flex-direction: column;
height: 100%; }
header, footer {
flex: 0 0 auto; }
#principal {
background-color: #C4E1E7;
flex: 1 0 auto; }
/*shadow*/
.shadow {
box-shadow: -10px 10px #8ec5d1;
padding: 15px; }
@media (min-width: 768px) {
.shadow {
margin: 0px; } }
/*MAIN*/
main {
margin: 0px;
padding: 0px;
padding-left: 0px !important;
padding-right: 0px !important; }
@media (min-width: 768px) {
main {
margin-top: 0px;
padding-left: 7px !important;
padding-right: 7px !important; } }
main .shadow {
background-color: white; }
main .shadow a {
color: #FF9C5F; }
main .shadow a:hover, main .shadow a:active, main .shadow a:focus {
color: #FF9C5F; }
main h1 {
border-bottom: 7px solid #557E84;
padding-bottom: 5px;
font-family: "Saira", sans-serif;
font-weight: 600; }
main h2 {
border-bottom: 2px solid #FF9C5F;
color: #FF9C5F;
padding-bottom: 5px;
font-family: "Saira", sans-serif;
font-weight: 600; }
/*ASIDE*/
aside {
margin: 0px;
padding: 0px;
padding-left: 0px !important;
padding-right: 0px !important; }
@media (min-width: 768px) {
aside {
margin-top: 0px;
padding-left: 7px !important;
padding-right: 7px !important; } }
aside .shadow {
background-color: #7ba4aa;
color: white; }
aside .shadow a {
color: #ffebdf; }
aside .shadow a:hover, aside .shadow a:active, aside .shadow a:focus {
color: #ffebdf; }
@media (min-width: 768px) {
main {
margin-top: 20px; }
aside {
margin-top: 20px; } }
hr {
border-top: 1px solid #557E84; }
.box-sm {
margin: 3px; }
/* COULD BE USERFULL LATER
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
*/
/*# sourceMappingURL=global.css.map */