Addition to user file handling
Enabled usage of predeterminded javascript user files. Added `variables.js`, `functions.js` and `globals.js` to build queue. Therefore added option for emtpy single globs. Changed some sass for better modular usage.
This commit is contained in:
Stephan
parent
874ecaa7cf
commit
6775ea0712
11 changed files with 106 additions and 113 deletions
|
|
@ -17,6 +17,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
%h_content_full {
|
||||
height: 100%;
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
%hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -80,14 +88,18 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.height_basic {
|
||||
.h_basic {
|
||||
height: 1024px;
|
||||
}
|
||||
|
||||
.height_full {
|
||||
.h_full_view {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h_100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: (100% - $width_basic) / 2;
|
||||
|
|
@ -159,7 +171,7 @@
|
|||
|
||||
// Positioned elements
|
||||
// -----------------------------------------------------------------------------
|
||||
%full_viewport {
|
||||
%viewport_fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -206,7 +218,7 @@
|
|||
}
|
||||
|
||||
.pos_full_view {
|
||||
@extend %full_viewport;
|
||||
@extend %viewport_fixed;
|
||||
background-color: rgba($alpha_color, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -225,7 +237,7 @@
|
|||
}
|
||||
|
||||
.hover_full_view_change {
|
||||
@extend %full_viewport;
|
||||
@extend %viewport_fixed;
|
||||
z-index: $z_heaven;
|
||||
background-color: transparentize($color_darkest, 0.5);
|
||||
transition: background-color $duration_long $timing_basic $duration_long;
|
||||
|
|
|
|||
|
|
@ -1,99 +1,77 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Card module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%absolute_full {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card_body {
|
||||
height: 100%;
|
||||
.bkg_box {
|
||||
@extend %absolute_full;
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
z-index: -1;
|
||||
}
|
||||
.bkg_box > svg {
|
||||
position: relative;
|
||||
}
|
||||
.flex_wrap_center {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.flex_content {
|
||||
position: relative;
|
||||
padding: 64px 64px 24px 64px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 40;
|
||||
}
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #1E1E1E;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
/* .full {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.mark {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
*/
|
||||
.marked {
|
||||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
text-align: center;
|
||||
}
|
||||
.marked::before { content: "*\0000a0" }
|
||||
.decent { color: #666 }
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #F4F9FA;
|
||||
background-color: #0C85FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// Card module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
.card_html {
|
||||
@extend %h_content_full;
|
||||
|
||||
body {
|
||||
.bkg_box {
|
||||
@extend %full_parent;
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
z-index: -1;
|
||||
}
|
||||
.bkg_box > svg {
|
||||
position: relative;
|
||||
}
|
||||
.flex_wrap_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.flex_content {
|
||||
position: relative;
|
||||
padding: 64px 64px 24px 64px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 40;
|
||||
}
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #1E1E1E;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
// .full {
|
||||
// position: absolute;
|
||||
// width: 128px;
|
||||
// height: 128px;
|
||||
// top: 16px;
|
||||
// left: 16px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
// .mark {
|
||||
// float: left;
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// margin-top: 16px;
|
||||
// }
|
||||
|
||||
.marked {
|
||||
padding-left: 1em;
|
||||
text-indent: -1em;
|
||||
text-align: center;
|
||||
}
|
||||
.marked::before { content: "*\0000a0" }
|
||||
.decent { color: #666 }
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #F4F9FA;
|
||||
background-color: #0C85FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue