2016-12-08 17:50:51 +01:00
|
|
|
// Clearing and floating
|
|
|
|
|
// ------------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
.clear {
|
|
|
|
|
clear: both;
|
|
|
|
|
&::before,
|
|
|
|
|
&::after {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-12-08 23:21:28 +01:00
|
|
|
|
2016-12-08 17:50:51 +01:00
|
|
|
.float_left {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: $space_3;
|
|
|
|
|
}
|
2016-12-08 23:21:28 +01:00
|
|
|
|
2016-12-08 17:50:51 +01:00
|
|
|
.overflow {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// General positioning attributes
|
|
|
|
|
// ------------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
.center_50 {
|
|
|
|
|
margin-right: 25%;
|
|
|
|
|
margin-left: 25%;
|
|
|
|
|
}
|
|
|
|
|
.center_25 {
|
|
|
|
|
margin-right: 37.5%;
|
|
|
|
|
margin-left: 37.5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.width_full {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2017-02-07 16:24:43 +01:00
|
|
|
%size_content {
|
|
|
|
|
box-sizing: content-box;
|
2017-02-07 16:28:31 +01:00
|
|
|
}
|
|
|
|
|
|
2017-02-07 16:31:48 +01:00
|
|
|
%size_content_solo {
|
2017-02-07 16:28:31 +01:00
|
|
|
@extend %size_content;
|
2017-02-27 17:51:25 +01:00
|
|
|
|
2017-02-07 16:24:43 +01:00
|
|
|
*,
|
|
|
|
|
::before,
|
|
|
|
|
::after {
|
2017-08-17 19:47:06 +02:00
|
|
|
box-sizing: $box_sizing;
|
2017-02-07 16:24:43 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-12-08 17:50:51 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// Structure attributes
|
|
|
|
|
// ------------------------------------------------------------------------------
|
|
|
|
|
|
2017-08-16 19:49:36 +02:00
|
|
|
%full_viewport {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
2016-12-08 17:50:51 +01:00
|
|
|
}
|
|
|
|
|
|
2017-08-18 01:35:50 +02:00
|
|
|
%full_parent {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2016-12-08 17:50:51 +01:00
|
|
|
// Fixed elements
|
2017-08-18 01:35:50 +02:00
|
|
|
.pos_rel {
|
2016-12-08 17:50:51 +01:00
|
|
|
position: relative;
|
|
|
|
|
}
|
2017-08-18 01:35:50 +02:00
|
|
|
.pos_fix {
|
2016-12-08 17:50:51 +01:00
|
|
|
position: fixed;
|
|
|
|
|
}
|
2017-08-18 01:35:50 +02:00
|
|
|
.pos_bottom {
|
2016-12-08 17:50:51 +01:00
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2017-02-27 17:51:25 +01:00
|
|
|
// Absolute elements
|
2017-08-18 01:35:50 +02:00
|
|
|
.pos_full_view {
|
2017-08-16 19:49:36 +02:00
|
|
|
@extend %full_viewport;
|
2017-08-18 01:35:50 +02:00
|
|
|
background-color: rgba($alpha_color, .5);
|
2017-08-16 19:49:36 +02:00
|
|
|
}
|
|
|
|
|
|
2017-08-18 01:35:50 +02:00
|
|
|
.hover_back_change {
|
|
|
|
|
background-color: darken($basic_back_color, 10%);
|
2017-08-16 19:49:36 +02:00
|
|
|
transition: background-color .2s ease-in-out;
|
|
|
|
|
&:hover {
|
2017-08-18 01:35:50 +02:00
|
|
|
background-color: $basic_back_color;
|
2017-08-16 19:49:36 +02:00
|
|
|
}
|
2017-02-27 17:51:25 +01:00
|
|
|
}
|