poulpe/shared/static/sass/global.scss
2018-10-12 17:15:55 +02:00

416 lines
7.8 KiB
SCSS

/*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
FICHIER .SCSS */
@import '_variables';
@import '_messages';
@import '_header';
@import '_forms';
@import '_tree';
@import '_filters';
@import '_dashed-shadows';
/* MISE EN FORME GÉNÉRALE */
html {
height : 100% ;
background-color: $html-background;
}
body {
font-family: $font_normal;
font-size: medium;
}
#principal {
background-color: $html-background;
}
/*MAIN*/
main {
background-color:$content-background;
border-width: 2px;
border-color: $content-border;
border-style: none;
border-collapse: collapse;
display: table-cell;
margin-top:0px;
padding: 0px;
.fuid, h1, h2, h3 {
margin-left: -15px;
margin-right: -15px;
margin-top: 0px;
margin-bottom: 0px;
}
h1, h2, h3 {
margin-top: -2px;
margin-bottom: -2px;
margin-left: -17px;
margin-right: -17px;
color: white;
padding-left: 15px;
padding-right: 15px;
}
h1 {
font-family: $font_bold;
font-weight: 600;
padding-bottom: 10px;
padding-top: 15px;
background-color: $h1_background;
&.activity {
background-color: $h1_background_activity;
}
&.event {
background-color: $h1_background_event;
}
&.todo {
background-color: $h1_background_todo;
}
&.equipment {
background-color: $h1_background_equipment;
}
&.staff {
background-color: $h1_background_staff;
}
}
h2, h3 {
border-bottom : 2px solid $main_c5;
padding-bottom : 5px ;
padding-top: 10px;
font-family: $font_bold;
font-weight: 600;
font-size: x-large;
background-color: $h2_background;
&.activity {
background-color: $h2_background_activity;
border-color: $activity_c8;
}
&.event {
background-color: $h2_background_event;
border-color: $event_c8;
}
&.todo {
background-color: $h2_background_todo;
border-color: $todo_c8;
}
&.equipment {
background-color: $h2_background_equipment;
border-color: $equipment_c8;
}
&.staff {
background-color: $h2_background_staff;
border-color: $staff_c8;
}
}
h3 {
background-color: $h3_background;
color: $main_c6;
&.activity {
background-color: $h3_background_activity;
color: $activity_c7;
}
&.event {
background-color: $h3_background_event;
color: $event_c7;
}
&.todo {
background-color: $h3_background_todo;
color: $todo_c7;
}
&.equipment {
background-color: $h3_background_equipment;
color: $equipment_c7;
}
&.staff {
background-color: $h3_background_staff;
color: $staff_c7;
}
}
a {
color: $main_bold_color;
&:hover,
&:active,
&:focus {
color : $main_bold_color;
}
}
.text {
padding: 15px;
}
}
/*ASIDE*/
aside {
background-color:$aside-background;
color: white;
margin-top: 0px;
padding: 0px!important;
a {
color: $main_soft_color;
&:hover,
&:active,
&:focus {
color : $main_soft_color;
}
}
code {
color: $main_c7;
background-color: $main_c3;
}
.heading {
padding: 8px 15px;
font-size: 32px;
line-height: 1.3;
text-align:center;
&.inverted {
background-color:$second_white_color;
color:black;
}
&.small {
font-size: 25px;
.sub {
font-size: 0.7em;
font-weight: normal;
}
}
.sub {
font-size: 0.7em;
font-weight: normal;
}
&.separator {
border-bottom-color: $main_soft_color;
border-bottom-style: solid;
}
}
.text {
padding: 15px;
&.inverted {
background-color:$second_white_color;
color:black;
}
}
}
@media (min-width: 768px) {
main {
margin-top:20px;
border-style: dashed;
}
aside {
margin-top:20px;
}
}
hr {
border-top : 1px solid $second_bold_color ;
}
span.vsep {
padding-left: 5px;
padding-right: 5px;
}
div.tag-list {
margin-top: 20px;
}
code {
font-size: small;
}
.module-list {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
a.module {
padding: 20px 40px;
margin: 5px;
border-bottom-style: solid;
font-size: large;
display: block;
border-bottom-color: $main_c7;
background-color: $main_c3;
color: $main_c7;
&.activity {
border-bottom-color: $activity_c8;
background-color: $activity_c3;
color: $activity_c8;
}
&.event {
border-bottom-color: $event_c8;
background-color: $event_c3;
color: $event_c8;
}
&.todo {
border-bottom-color: $todo_c8;
background-color: $todo_c3;
color: $todo_c8;
}
&.equipment {
border-bottom-color: $equipment_c8;
background-color: $equipment_c3;
color: $equipment_c8;
}
&.staff {
border-bottom-color: $staff_c8;
background-color: $staff_c3;
color: $staff_c8;
}
&:hover,
&:active,
&:focus {
text-decoration: none;
color: $main_c1;
background-color: $main_c7;
&.activity {
background-color: $activity_c7;
}
&.event {
background-color: $event_c7;
}
&.equipment {
background-color: $equipment_c7;
}
&.todo {
background-color: $todo_c7;
}
&.staff {
background-color: $staff_c7;
}
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
&:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
&:hover {
background-color: #555;
}
h3 {
margin-top: 0px;
margin-bottom: 0px;
display: inline-block;
}
}
.active {
background-color: #555;
&:after {
content: "\2212";
}
}
.content {
padding: 8px 18px;
display : none;
background-color: #f1f1f1;
&.fluid {
padding: 0px 0px;
background-color: transparent;
}
h4 {
font-size: x-large;
font-weight: bold;
display: inline-block;
margin: 0px 0px;
}
}
.planning {
.activity {
padding: 8px 18px;
padding-top: 8px;
padding-bottom: 12px;
border-left: none;
border-right: 6px solid $main_soft_color;
&.inverted {
border-left: 6px solid $main_soft_color;
border-right: none;
}
.activity-title {
font-size: large;
}
}
}
.glyphicon {
&.yes {
color:$yes_color!important;
}
&.no {
color:$no_color!important;
}
&.dunno {
color:$dunno_color!important;
}
}
.sending-request {
position: relative;
&:after {
content: "Chargement...";
position: absolute;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.8;
color: #777;
text-align: center;
box-sizing: border-box;
z-index: 5;
top: 0;
left: 0;
padding: 8%;
}
}