133 lines
2.5 KiB
SCSS
133 lines
2.5 KiB
SCSS
// Clearing and floating
|
|
// ------------------------------------------------------------------------------
|
|
|
|
.clear {
|
|
clear: both;
|
|
&::before,
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.float_left {
|
|
float: left;
|
|
margin-right: $space_3;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
%size_content {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
%size_content_solo {
|
|
@extend %size_content;
|
|
|
|
*,
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Structure attributes
|
|
// ------------------------------------------------------------------------------
|
|
|
|
%full_viewport {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
// Fixed elements
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
.div_fix {
|
|
position: fixed;
|
|
}
|
|
.bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
// Absolute elements
|
|
.viewport-full-body {
|
|
@extend %full_viewport;
|
|
background-color: transparentize($alpha_color, .5);
|
|
}
|
|
|
|
.viewport-hover-body {
|
|
@extend %full_viewport;
|
|
background-color: darken($basic_background_color, 20%);
|
|
transition: background-color .2s ease-in-out;
|
|
&:hover {
|
|
background-color: $basic_background_color;
|
|
}
|
|
}
|
|
|
|
|
|
// Space and placeholders
|
|
.space_box {
|
|
float: left;
|
|
display: table;
|
|
width: $space_4;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
span {
|
|
display: table-cell;
|
|
}
|
|
}
|
|
|
|
.div_placeholder {
|
|
width: 100%;
|
|
height: $space_4;
|
|
border: $border_width_4 solid rgba($black,.1);
|
|
border-radius: $basic_corner;
|
|
padding: $basic_space;
|
|
background-color: rgba($black,.1);
|
|
svg {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.div_placeholder_bkg {
|
|
width: 100%;
|
|
height: $space_4;
|
|
border: $border_width_4 solid rgba($black,.1);
|
|
border-radius: $basic_corner;
|
|
padding: $basic_space;
|
|
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
|
|
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
|
|
background-color: rgba($black,.1);
|
|
}
|
|
|
|
.div_info {
|
|
padding: $space_2 $basic_indent;
|
|
border-right: $basic_space solid rgba($echo_color, .6);
|
|
background-color: rgba($echo_color, .1) !important;
|
|
}
|