seepur/resources/sass/main.scss

161 lines
3.3 KiB
SCSS
Raw Normal View History

@charset "utf-8";
@import './colors.scss';
@import './variables.scss';
@import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass";
.hero-bg-landing01 {
background-image: url('/images/landing-hero01.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing02 {
background-image: url('/images/landing-hero02.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing03 {
background-image: url('/images/landing-hero03.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing04 {
background-image: url('/images/landing-hero04.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing05 {
background-image: url('/images/landing-hero05.jpg');
background-size: cover;
background-position: center;
}
.hero {
.navbar.darken {
@include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
}
$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
('none', 0),
('xxs', 0.75),
('xs', 0.25),
('sm', 0.5),
('md', 1),
('lg', 2),
('xl', 4),
('xxl', 8),
);
$positions: (
('t', 'top'),
('r', 'right'),
('b', 'bottom'),
('l', 'left')
);
@function sizeValue($key, $value) {
@return if($key == 'none', 0, $value + $sizeUnit);
}
@each $size in $sizes {
$sizeKey: nth($size, 1);
$sizeValue: nth($size, 2);
.#{$marginKey}#{$separator}#{$sizeKey} {
margin: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$sizeKey} {
padding: sizeValue($sizeKey, $sizeValue);
}
@each $position in $positions {
$posKey: nth($position, 1);
$posValue: nth($position, 2);
.#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
}
}
2020-02-09 15:17:11 +00:00
// .app {
// .columns{
// margin-bottom: 0px !important;
// max-height: calc(100vh - 12.25rem);
// height: calc(100vh - 12.25rem);
// }
// }
.app-content{
// height: 100vh;
}
.sidebar{
// margin: auto;
flex-direction: column;
2020-02-09 15:17:11 +00:00
max-width: 5em;
width: 5em;
height: 100%;
// background-color:rgba(127, 88, 145, 0.7);
// color: $beige-lighter;
2020-02-09 15:17:11 +00:00
border-right: thin #ccc solid;
}
.menu-titles{
margin-top: -2em;
}
.is-sidebar {
2020-02-09 15:17:11 +00:00
// transform: translate(15%, 0);
// background-color: rgba(0, 0, 0, .3);
}
.sidebar-menu{
position: absolute;
2020-02-09 15:17:11 +00:00
bottom: 25px;
left: 1em;
}
.sideway-text{
// transform: translate(0, -50%);
// display: inline;
// margin: 0 0;
}
.sideway-letter{
// width: 50%;
// height: 2em;
transform: rotate(-90deg);
margin: -.8em auto;
}
2020-02-09 15:17:11 +00:00
.columns{
&.is-fullheight{
min-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
max-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
height: calc(100vh - ( #{$navbar-height} - .75rem ) );
display: flex;
flex-direction: row;
justify-content: stretch;
.column{
overflow-y: auto;
}
}
}
.child-avatar-image{
display: table;
margin: auto;
}
.is-avatar{
padding:2px;
border: thin solid #ccc;
}
.m-auto{
margin: auto;
}