d8a0b5e8d0
Adapted w3c structure for html5 elements New files for different sections of elements Indentation now made with tabs Added optional "above the fold" file
119 lines
2.4 KiB
SCSS
119 lines
2.4 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;
|
|
}
|
|
|
|
|
|
|
|
// Structure attributes
|
|
// ------------------------------------------------------------------------------
|
|
|
|
// Simulate new body element
|
|
.div_body {
|
|
width: $basic_width;
|
|
@media screen and (orientation: landscape) {
|
|
@media (min-width: $screen_small) {
|
|
width: $width_2;
|
|
}
|
|
@media (min-width: $screen_medium) {
|
|
width: $width_3;
|
|
}
|
|
@media (min-width: $screen_large) {
|
|
width: $width_4;
|
|
}
|
|
}
|
|
@media screen and (orientation: portrait) {
|
|
@media (min-width: $screen_small) {
|
|
width: $width_2;
|
|
}
|
|
}
|
|
margin: 0 auto;
|
|
border-top-width: $border_width_8;
|
|
border-top-style: solid;
|
|
border-color: $basic_border_color;
|
|
padding-top: $space_3;
|
|
}
|
|
|
|
// Fixed elements
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
.div_fix {
|
|
position: fixed;
|
|
}
|
|
.bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
// 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;
|
|
}
|