This repository has been archived on 2024-12-15. You can view files and clone it, but cannot push or open issues or pull requests.
seepur/resources/sass/main.scss

403 lines
7.9 KiB
SCSS
Raw Normal View History

@charset "utf-8";
@import './colors.scss';
@import './variables.scss';
@import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass";
2020-04-12 14:25:42 +00:00
// @import '../../node_modules/animate.css/source/_base.css';
2020-05-08 23:52:24 +00:00
// nav.navbar {
// padding-left: 5rem;
// padding-right: 5rem;
// }
html{
scroll-behavior: smooth;
}
2020-04-23 02:16:19 +00:00
.hero-bg{
2020-05-02 16:31:22 +00:00
// @include pattern(#c0ebfa, #7FD7F5);
2020-05-02 19:39:16 +00:00
// @include pattern(#c1d7df, rgb(183, 236, 253));
background-image: url('/images/clouds-bg.svg');
background-size: cover;
background-color: #fff;
position: relative;
2020-05-02 19:39:16 +00:00
// @include linearGradient(#eef6fc, #f8afaf);
// background: url('/images/whale.svg') 15% 25% no-repeat, linear-gradient(to bottom, #eef6fc 0%, #f8afaf 100%);
// background-size: 250px, auto;
// background-position: ;
// background-repeat: no-repeat;
2020-05-02 16:31:22 +00:00
}
2020-05-08 23:52:24 +00:00
.mixed-background{
background-image: url('/images/flowers.svg'), url('/images/sun+cloud.svg'), url('/images/moon+stars.svg');
background-position: calc(100% - 20px) calc(100% - 10px), 10% calc(170vh + 150px), calc(100vw - 500px) calc(100vh - 100px);
background-repeat: no-repeat, no-repeat, no-repeat;
}
2020-05-08 23:52:24 +00:00
.scroll-down-indicator{
position: absolute;
bottom: 25px;
left: 50%;
animation: bounce 1.5s;
animation-delay: 1s;
animation-iteration-count: 2;
transform: translate(-50%,0);
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(-50%, -30px, 0);
transform: translate3d(-50%, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(-50%, -15px, 0);
transform: translate3d(-50%, -15px, 0);
}
90% {
-webkit-transform: translate3d(-50%,-4px,0); transform: translate3d(-50%,-4px,0);
}
}
2020-05-02 16:31:22 +00:00
.landing-featue-image{
max-height: 180px !important;
2020-05-02 16:31:22 +00:00
width: auto;
object-fit: contain;
z-index: 0;
}
.navbar-menu{
&.is-active{
// transition: all;
// position: relative;
// top:0;
animation: expand-animation .1s ease-in;
}
}
@keyframes expand-animation{
from{
height: 0;
transform: scaleY(0);
}
to{
transform: scaleY(1);
height: auto;
}
}
.hero {
.navbar.darken {
@include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
// .navbar-item{
2020-04-23 19:47:53 +00:00
// color: $primary;
// }
}
.has-inner-shadow-bottom{
box-shadow: inset 0px -10px 15px -11px rgba(0,0,0,0.75);
}
.has-inner-shadow-top{
box-shadow: inset 0px 10px 15px -11px rgba(0,0,0,0.75);
}
2020-04-23 19:47:53 +00:00
.has-shadow-top{
box-shadow: 0px 10px 15px -11px rgba(0,0,0,0.75);
}
$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),
('diego', 6.25),
);
$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);
}
}
}
.m-t-a{
margin-top: auto;
}
2020-04-25 21:10:06 +00:00
.m-b-a{
margin-bottom: auto;
}
.m-l-a{
margin-left: auto;
}
.m-r-a{
margin-right: auto;
}
.sidebar{
flex-direction: column;
2020-02-09 15:17:11 +00:00
max-width: 5em;
width: 5em;
height: 100%;
border-right: thin #ccc solid;
}
.menu-titles{
margin-top: -2em;
}
.sidebar-menu{
position: absolute;
2020-02-09 15:17:11 +00:00
bottom: 25px;
left: 1em;
}
.sideway-letter{
transform: rotate(-90deg);
margin: -.8em auto;
}
2020-02-09 15:17:11 +00:00
2020-04-12 14:25:42 +00:00
.is-fullheight{
min-height: calc(100vh - ( #{$navbar-height} ) );
2020-05-01 18:32:29 +00:00
// max-height: calc(100vh - ( #{$navbar-height} ) );
// height: calc(100vh - ( #{$navbar-height} ) );
// .column{
// overflow-y: auto;
// }
2020-02-09 15:17:11 +00:00
}
.is-fullwidth{
width: 100vw;
overflow: hidden;
}
.app-content{
display: flex;
flex-direction: row;
justify-content: center;
}
2020-04-12 14:25:42 +00:00
.avatar-badge-image{
2020-02-09 15:17:11 +00:00
display: table;
margin: auto;
}
.is-avatar{
padding:2px;
border: thin solid #ccc;
}
.m-auto{
margin: auto;
}
2020-04-12 14:25:42 +00:00
.css-loader{
display: flex;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
.dot{
margin: 5px;
width: 2rem;
height: 2rem;
background: $primary;
border-radius: 50%;
animation-name: loading-pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
&.delay-1{
animation-delay:.3s;
}
&.delay-2{
animation-delay:.6s;
}
}
}
@keyframes loading-pulse{
0%{
opacity: .1;
transform: scale(.7);
}
50%{
opacity: 1;
transform: scale(1);
}
100%{
opacity: .1;
transform: scale(.7);
}
}
.has-pointer{
cursor: pointer;
}
2020-04-25 21:10:06 +00:00
2020-04-12 14:25:42 +00:00
.notifications {
width: 15vw;
z-index: 100;
position: fixed;
right: 25px;
top: calc(25px + ( #{$navbar-height} ) );
}
.notification-fade{
animation: notification-fade .2s;
}
@keyframes notification-fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
2020-04-14 00:56:04 +00:00
// TODO: Remove this - make generic
.flipbook {
2020-05-09 21:52:22 +00:00
width: 99%;
height: 100%;
overflow-y: visible;
2020-05-09 21:52:22 +00:00
object-fit: contain;
transition: opacity .5s;
}
.book-flip-buttons{
height: 100%;
2020-04-14 00:56:04 +00:00
}
2020-04-14 01:40:10 +00:00
.video-strip{
display: flex;
justify-content: center;
align-content:center;
max-height: 15vh;
2020-04-14 01:40:10 +00:00
}
2020-04-14 01:40:10 +00:00
video{
2020-05-09 21:52:22 +00:00
// margin-left: 5px;
// margin-right: 5px;
2020-04-14 01:40:10 +00:00
background-color:rgba(56, 181, 187, 0.19);
2020-05-09 21:52:22 +00:00
// border-radius: 15px;
2020-04-14 01:40:10 +00:00
border: solid 1px rgba(56, 181, 187, 0.30);
flex-basis: 100%;
2020-05-09 21:52:22 +00:00
// max-width: 15vh;
2020-04-14 01:40:10 +00:00
}
.book-thumb{
// cursor: not-allowed;
transition: all .2s;
z-index: inherit;
flex-basis: 12%;
text-align: center;
}
.book-thumb.enabled{
cursor: pointer;
&:hover{
transform: scale(1.1);
z-index: 10;
}
}
2020-05-09 19:11:55 +00:00
.book-cover{
position:relative;
border: 1px solid rgba(0,0,0,.4);
.image{
&:before{
border: 1px solid rgba(0,0,0,.4);
content: "";
position: absolute;
top:3px;
left:3px;
width: 100%;
height: 100%;
}
}
}
2020-05-01 17:24:22 +00:00
//Fade vue transition
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
2020-05-03 22:38:33 +00:00
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition-duration: 0.2s;
transition-property: height, opacity, transform;
transition-timing-function: ease-in-out;
overflow: hidden;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(2em, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-2em, 0);
}
.has-diego-width-800{
max-width: 50rem;
}
2020-05-09 19:11:55 +00:00
.is-borderless{
border: none;
}
2020-05-09 19:11:55 +00:00
.is-justify-centered{
justify-content: center;
}
2020-05-09 21:52:22 +00:00
.video-side-bar{
height: calc(100vh - ( #{$navbar-height} ) );
video{
width: 100%;
height: 50%;
object-fit: cover;
}
}
.book-view{
height: 100%;
position: relative;
}
.is-transparent{
opacity: 0;
}
.is-mirrored{
transform: scaleX(-1);
}