Initial commit
This commit is contained in:
Timon Ostertun
224
client/scss/sticky/_dark.scss
Normal file
224
client/scss/sticky/_dark.scss
Normal file
@@ -0,0 +1,224 @@
|
||||
//This page is not in SCSS structure
|
||||
//Everything is arranged in compacted CSS code
|
||||
|
||||
/*Gradient Adjustments*/
|
||||
.bg-gradient{background:linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 20%,rgba(0,0,0,0.1) 30%,rgba(0,0,0,0.8) 70%,rgba(0,0,0,1) 100%);}
|
||||
.bg-gradient-fade{bottom:0px!important;}
|
||||
.theme-light .bg-gradient-fade{background:linear-gradient(to bottom,
|
||||
rgba(240,240,240,0.0) 0%,
|
||||
rgba(240,240,240,0.99) 65%,
|
||||
rgba(240,240,240,1) 100%);
|
||||
}
|
||||
.theme-dark .bg-gradient-fade{background:linear-gradient(to bottom,
|
||||
rgba(27, 29, 33,0.0) 0%,
|
||||
rgba(27, 29, 33,0.99) 65%,
|
||||
rgba(27, 29, 33,1) 100%);
|
||||
}
|
||||
|
||||
.theme-light .bg-gradient-fade-small{background:linear-gradient(to bottom,
|
||||
rgba(240,240,240,0.0) 0%,
|
||||
rgba(240,240,240,0.2) 50%,
|
||||
rgba(240,240,240,0.9) 75%,
|
||||
rgba(240,240,240,1) 100%);
|
||||
}
|
||||
.theme-dark .bg-gradient-fade-small{background:linear-gradient(to bottom,
|
||||
rgba(27, 29, 33,0.0) 0%,
|
||||
rgba(27, 29, 33,0.2) 50%,
|
||||
rgba(27, 29, 33,0.9) 75%,
|
||||
rgba(27, 29, 33,1) 100%);
|
||||
}
|
||||
|
||||
|
||||
/*Basic Colors*/
|
||||
.color-white{color:$color_white!important;}
|
||||
.color-black{color:$color_black!important;}
|
||||
.bg-white{background-color:$color_white!important;}
|
||||
.bg-black{background-color:$color_black!important;}
|
||||
|
||||
/*Main Color Settings*/
|
||||
.theme-dark .bg-theme{background-color:$theme-dark-background!important;}
|
||||
.theme-light .bg-theme{background-color:$color_white!important;}
|
||||
.theme-light .color-theme{color:$theme-dark-background!important;}
|
||||
.theme-dark .color-theme{color:$color_white!important;}
|
||||
|
||||
/*Hide Show Based on Color Scheme*/
|
||||
.theme-dark .show-on-theme-dark{display:block;}
|
||||
.theme-dark .show-on-theme-light{display:none;}
|
||||
.theme-light .show-on-theme-light{display:block;}
|
||||
.theme-light .show-on-theme-dark{display:none;}
|
||||
|
||||
/*Dark Theme Settings*/
|
||||
.theme-dark p{color:$theme-dark-text;}
|
||||
.theme-dark h1,
|
||||
.theme-dark h2,
|
||||
.theme-dark h3,
|
||||
.theme-dark h4,
|
||||
.theme-dark h5,
|
||||
.theme-dark h6,
|
||||
.theme-dark #footer-bar a i,
|
||||
.theme-dark #footer-bar a span
|
||||
.theme-dark p strong{
|
||||
color:$theme-dark-headings;
|
||||
}
|
||||
|
||||
.theme-dark .accordion-btn,
|
||||
.theme-dark .menu .nav-title,
|
||||
.theme-dark .menu .nav a i,
|
||||
.theme-dark .menu .nav a span,
|
||||
.theme-dark .menu .nav .active-nav i,
|
||||
.theme-dark .menu .nav .active-nav span,
|
||||
.theme-dark .header .header-icon,
|
||||
.theme-dark .header .header-title,
|
||||
.theme-dark .search-header .fa-search,
|
||||
.theme-dark .color-theme,
|
||||
.theme-dark .countdown div,
|
||||
.theme-dark .list-group i:last-child,
|
||||
.theme-dark .search-icon-list a,
|
||||
.theme-dark .fac label,
|
||||
.theme-dark .pagination a,
|
||||
.theme-dark .accordion-style-2 a,
|
||||
.theme-dark .input-style-1 .input-icon,
|
||||
.theme-dark .input-style-2 .input-icon,
|
||||
.theme-dark .input-style-1 span,
|
||||
.theme-dark .input-style-2 span,
|
||||
.theme-dark .input-style-1 input,
|
||||
.theme-dark .input-style-2 input,
|
||||
.theme-dark input,
|
||||
.theme-dark .contact-form i,
|
||||
.theme-dark .demo-icon-font article,
|
||||
.theme-dark [data-tab],
|
||||
.theme-dark span:not(.badge),
|
||||
.theme-dark .profile-2 .profile-stats a,
|
||||
.theme-dark .vcard-field *,
|
||||
.theme-dark .search-header input,
|
||||
.theme-dark .search-header input::placeholder,
|
||||
.theme-dark .footer .footer-title{
|
||||
color:$color_white!important;
|
||||
}
|
||||
|
||||
.theme-dark,
|
||||
.theme-dark .page-bg,
|
||||
.theme-dark #page,
|
||||
.theme-dark .loader-main,
|
||||
.theme-dark .instant-article,
|
||||
.theme-dark .divider-icon i,
|
||||
.theme-dark .table tr.even td,
|
||||
.theme-dark .timeline-body,
|
||||
.theme-dark table,
|
||||
.theme-dark td{
|
||||
background-color:$theme-dark-switch!important;
|
||||
}
|
||||
|
||||
.theme-dark .ios-switch label::before,
|
||||
.theme-dark .android-switch label::before{
|
||||
background-color:$theme-dark-switch;
|
||||
border:solid 1px $theme-dark-lighter!important;
|
||||
}
|
||||
|
||||
.theme-dark .footer,
|
||||
.theme-dark .card,
|
||||
.theme-dark #preloader{
|
||||
background-color:$theme-dark-background;
|
||||
}
|
||||
|
||||
.theme-dark .input-style-2 span{background-color:$color_black;}
|
||||
.theme-dark .card .input-style-2 span,
|
||||
.theme-dark .menu .input-style-2 span,
|
||||
.theme-dark .card.input-style span,
|
||||
.theme-dark .bg-theme{
|
||||
background-color:$theme-dark-background!important;
|
||||
}
|
||||
|
||||
.theme-dark .link-list-3 a,
|
||||
.theme-dark .pricing-1,
|
||||
.theme-dark .pricing-2,
|
||||
.theme-dark .pricing-3,
|
||||
.theme-dark .pricing-4,
|
||||
.theme-dark .search-box,
|
||||
.theme-dark .link-list-2 a,
|
||||
.theme-dark .vcard-field,
|
||||
.theme-dark table{
|
||||
border:solid 1px $theme-dark-lighter;
|
||||
}
|
||||
|
||||
.theme-dark input::placeholder,
|
||||
.theme-dark textarea::placeholder,
|
||||
.theme-dark select::placeholder,
|
||||
.theme-dark select,
|
||||
.theme-dark .form-field input,
|
||||
.theme-dark .form-field textarea{
|
||||
color:$color_white!important;
|
||||
border-color:$theme-dark-lighter!important;
|
||||
}
|
||||
|
||||
.theme-dark .input-style-1 input,
|
||||
.theme-dark .input-style-1 select,
|
||||
.theme-dark .input-style-1 textarea,
|
||||
.theme-dark input,
|
||||
.theme-dark textarea,
|
||||
.theme-dark select{
|
||||
border-color:$theme-dark-lighter;
|
||||
}
|
||||
|
||||
.theme-dark .input-style-1 input:focus,
|
||||
.theme-dark .input-style-1 select:focus,
|
||||
.theme-dark .input-style-1 textarea:focus,
|
||||
.theme-dark input:focus,
|
||||
.theme-dark textarea:focus,
|
||||
.theme-dark select:focus{
|
||||
border-color:$gray-700!important;
|
||||
}
|
||||
|
||||
.theme-dark .list-custom-large a,
|
||||
.theme-dark .list-custom-small a{
|
||||
border-color:$theme-dark-lighter!important;
|
||||
}
|
||||
|
||||
.theme-dark .input-style-1 em,
|
||||
.theme-dark .input-style-2 em{
|
||||
color:$theme-dark-text;
|
||||
}
|
||||
|
||||
.theme-dark .timeline-deco{
|
||||
background-color:$theme-dark-lighter!important;
|
||||
}
|
||||
|
||||
.theme-dark .footer-links,
|
||||
.theme-dark #footer-bar,
|
||||
.theme-dark .footer-copyright{
|
||||
border-top:solid 1px $theme-dark-lighter!important;
|
||||
}
|
||||
|
||||
.theme-dark .border-bottom{border-bottom:1px solid $theme-dark-lighter!important;}
|
||||
.theme-dark .border-top{border-top:1px solid $theme-dark-lighter!important;}
|
||||
.theme-dark .border-left{border-left:1px solid $theme-dark-lighter!important;}
|
||||
.theme-dark .border-right{border-right:1px solid $theme-dark-lighter!important;}
|
||||
|
||||
.theme-dark th,
|
||||
.theme-dark .menu,
|
||||
.theme-dark .header,
|
||||
.theme-dark .polaroid-effect,
|
||||
.theme-dark .timeline-item-content,
|
||||
.theme-dark .tab-controls,
|
||||
.theme-dark #footer-bar,
|
||||
.theme-dark .menu .input-style span,
|
||||
.theme-dark .timeline-item-content-full{
|
||||
background-color:$theme-dark-structure!important;
|
||||
color:$color_white;
|
||||
}
|
||||
|
||||
.theme-dark .divider,
|
||||
.theme-dark .menu .nav a:hover,
|
||||
.theme-dark .menu .nav .active-subnav,
|
||||
.theme-dark .menu .nav .divider{
|
||||
background-color:$theme-dark-lighter;
|
||||
}
|
||||
|
||||
.theme-dark .menu-hider{background-color:$theme-dark-menu-hider;}
|
||||
.theme-dark .gallery-filter-controls li{color:$color_white;}
|
||||
.theme-dark .gallery-view-controls a{color:$color_white;}
|
||||
.theme-dark .gallery-view-controls{border-bottom:solid 1px $theme-dark-lighter;}
|
||||
.theme-dark .tab-controls a{border:solid 1px $theme-dark-lighter;}
|
||||
.theme-dark .form-control:focus,
|
||||
.theme-dark .form-control{background-color:transparent!important;}
|
||||
|
||||
149
client/scss/sticky/_footer-bar.scss
Normal file
149
client/scss/sticky/_footer-bar.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
/*-Footer Menu-*/
|
||||
#footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 98;
|
||||
background-color: rgba(249,249,249,.98);
|
||||
box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.06);
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
transition: $globalTransitions;
|
||||
a {
|
||||
color: $color-dark;
|
||||
padding-top: 12px;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
margin-top: -6px;
|
||||
opacity: 0.7;
|
||||
font-family: $font-main-family !important;
|
||||
}
|
||||
i {
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
font-style: normal;
|
||||
z-index: 5;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
margin-left: 3px;
|
||||
color: $color-white !important;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
padding: 0px;
|
||||
padding-left: 0px !important;
|
||||
border-radius: 18px;
|
||||
margin-top: 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.footer-bar-2 {
|
||||
.active-nav {
|
||||
strong {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
.footer-bar-4 {
|
||||
.active-nav {
|
||||
strong {
|
||||
position: absolute;
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
border-radius: 60px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
bottom: 0px;
|
||||
}
|
||||
color: $color-white !important;
|
||||
}
|
||||
span {
|
||||
display: none !important;
|
||||
}
|
||||
i {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
.footer-bar-5 {
|
||||
.active-nav {
|
||||
strong {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
border-radius: 60px;
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-bar-3 {
|
||||
span {
|
||||
display: none !important;
|
||||
}
|
||||
.active-nav {
|
||||
span {
|
||||
display: block !important;
|
||||
}
|
||||
padding-top: 11px !important;
|
||||
}
|
||||
a {
|
||||
padding-top: 18px !important;
|
||||
}
|
||||
}
|
||||
.footer-menu-hidden {
|
||||
transition: all 100ms ease;
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.footer-bar-white {
|
||||
* {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
#footer-bar.position-relative {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
.is-ios {
|
||||
#footer-bar {
|
||||
height: calc(65px + (constant(safe-area-inset-bottom))*1.1);
|
||||
height: calc(65px + (env(safe-area-inset-bottom))*1.1);
|
||||
}
|
||||
}
|
||||
.is-not-ios {
|
||||
.footer-menu-clear {
|
||||
height: 70px;
|
||||
display: block;
|
||||
}
|
||||
.footer {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
#footer-menu {
|
||||
a {
|
||||
i {
|
||||
padding-top: 13px;
|
||||
}
|
||||
span {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
310
client/scss/sticky/_header-bar.scss
Normal file
310
client/scss/sticky/_header-bar.scss
Normal file
@@ -0,0 +1,310 @@
|
||||
/*--Header---*/
|
||||
.header-title {
|
||||
span {
|
||||
font-family: $font-heading-family;
|
||||
}
|
||||
}
|
||||
.footer-title {
|
||||
span {
|
||||
font-family: $font-heading-family;
|
||||
}
|
||||
}
|
||||
.header-logo {
|
||||
span {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
color: $color-transparent !important;
|
||||
}
|
||||
.header {
|
||||
.header-title {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
color: $color-black;
|
||||
font-weight: 600;
|
||||
z-index: 1;
|
||||
font-family: $font-heading-family;
|
||||
}
|
||||
.header-logo {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 50px;
|
||||
z-index: 99;
|
||||
transition: $globalTransitions;
|
||||
background-color: $color-white;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.03);
|
||||
box-shadow: 0 4px 18px 0 rgba(0,0,0,0.08);
|
||||
.header-icon {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
line-height: 49px;
|
||||
font-size: 12px;
|
||||
color: $color-dark;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: $color-transparent !important;
|
||||
}
|
||||
.dropdown-menu {
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
.header-nav {
|
||||
.header-title {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
color: $color-black;
|
||||
font-weight: 600;
|
||||
z-index: 1;
|
||||
font-family: $font-heading-family;
|
||||
}
|
||||
.header-logo {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 50px;
|
||||
z-index: 99;
|
||||
transition: $globalTransitions;
|
||||
.header-icon {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
line-height: 49px;
|
||||
font-size: 12px;
|
||||
color: $color-dark;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: $color-transparent !important;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
.footer-logo {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.header-auto-show {
|
||||
opacity: 0;
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
.header-active {
|
||||
opacity: 1;
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
.header-always-show {
|
||||
.header {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
.header-static {
|
||||
position: relative !important;
|
||||
}
|
||||
.header-transparent {
|
||||
background-color: $color-transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.header-clear {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.header-clear-small {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.header-clear-medium {
|
||||
padding-top: 70px;
|
||||
}
|
||||
.header-clear-large {
|
||||
padding-top: 85px;
|
||||
}
|
||||
.header-icon {
|
||||
.badge {
|
||||
position: absolute;
|
||||
margin-left: -5px;
|
||||
color: $color-white !important;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
padding: 0px;
|
||||
padding-left: 1px !important;
|
||||
border-radius: 18px;
|
||||
margin-top: 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.header-transparent-light {
|
||||
background-color: $color-transparent;
|
||||
box-shadow: none !important;
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
.header-transparent-dark {
|
||||
background-color: $color-transparent;
|
||||
box-shadow: none !important;
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
.header-logo-center {
|
||||
.header-icon-1 {
|
||||
left: 0px;
|
||||
}
|
||||
.header-icon-2 {
|
||||
left: 45px;
|
||||
}
|
||||
.header-icon-3 {
|
||||
right: 45px;
|
||||
}
|
||||
.header-icon-4 {
|
||||
right: 0px;
|
||||
}
|
||||
.header-title {
|
||||
width: 150px;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-logo {
|
||||
background-position: center center;
|
||||
width: 150px !important;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.header-logo-left {
|
||||
.header-icon-1 {
|
||||
right: 0px;
|
||||
}
|
||||
.header-icon-2 {
|
||||
right: 45px;
|
||||
}
|
||||
.header-icon-3 {
|
||||
right: 90px;
|
||||
}
|
||||
.header-icon-4 {
|
||||
right: 135px;
|
||||
}
|
||||
.header-logo {
|
||||
left: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
.header-title {
|
||||
left: 15px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
.header-logo-right {
|
||||
.header-icon-1 {
|
||||
left: 0px;
|
||||
}
|
||||
.header-icon-2 {
|
||||
left: 45px;
|
||||
}
|
||||
.header-icon-3 {
|
||||
left: 90px;
|
||||
}
|
||||
.header-icon-4 {
|
||||
left: 135px;
|
||||
}
|
||||
.header-logo {
|
||||
left: auto !important;
|
||||
right: 20px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
.header-title {
|
||||
left: auto !important;
|
||||
right: 20px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
.header-logo-app {
|
||||
.header-icon-1 {
|
||||
left: 3px;
|
||||
}
|
||||
.header-icon-2 {
|
||||
right: 2px;
|
||||
}
|
||||
.header-icon-3 {
|
||||
right: 45px;
|
||||
}
|
||||
.header-icon-4 {
|
||||
right: 90px;
|
||||
}
|
||||
.header-logo {
|
||||
left: 0px !important;
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
.header-title {
|
||||
left: 0px !important;
|
||||
margin-left: 55px !important;
|
||||
}
|
||||
}
|
||||
.footer-logo {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.header-demo {
|
||||
z-index: 98 !important;
|
||||
position: relative;
|
||||
}
|
||||
.is-on-homescreen {
|
||||
.header-clear {
|
||||
padding-top: calc(50px + (constant(safe-area-inset-top))*0.8) !important;
|
||||
padding-top: calc(50px + (env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
.header-clear-small {
|
||||
padding-top: calc(20px + (constant(safe-area-inset-top))*0.8) !important;
|
||||
padding-top: calc(20px + (env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
.header-clear-medium {
|
||||
padding-top: calc(70px + (constant(safe-area-inset-top))*0.8) !important;
|
||||
padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
.header-clear-large {
|
||||
padding-top: calc(85px + (constant(safe-area-inset-top))*0.8) !important;
|
||||
padding-top: calc(85px + (env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
.header {
|
||||
height: calc(50px + (constant(safe-area-inset-top))*0.8) !important;
|
||||
height: calc(50px + (env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
.header-icon {
|
||||
margin-top: calc((constant(safe-area-inset-top))*0.8) !important;
|
||||
margin-top: calc((env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
.header-title {
|
||||
margin-top: calc((constant(safe-area-inset-top))*0.8) !important;
|
||||
margin-top: calc((env(safe-area-inset-top))*0.8) !important;
|
||||
}
|
||||
}
|
||||
16
client/scss/sticky/_logos.scss
Normal file
16
client/scss/sticky/_logos.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
/*Logos*/
|
||||
$header-light-logo-location:url(../images/preload-logo.png);
|
||||
$header-dark-logo-location:url(../images/preload-logo.png);
|
||||
|
||||
$footer-light-logo-location:url(../images/preload-logo.png);
|
||||
$footer-dark-logo-location:url(../images/preload-logo.png);
|
||||
|
||||
.header-logo{background-size:28px 28px; width:50px;}
|
||||
.footer .footer-logo{background-size:80px 80px; height:80px!important; margin-bottom:20px!important;}
|
||||
|
||||
.theme-light .header .header-logo{background-image:$header-light-logo-location}
|
||||
.theme-dark .header .header-logo{background-image:$header-light-logo-location}
|
||||
|
||||
.theme-light .footer .footer-logo{background-image:$footer-light-logo-location}
|
||||
.theme-dark .footer .footer-logo{background-image:$footer-dark-logo-location}
|
||||
|
||||
185
client/scss/sticky/_menu.scss
Normal file
185
client/scss/sticky/_menu.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
/*Menus & Action Sheets & Modals*/
|
||||
|
||||
$theme-dark-menu-hider: rgba(0,0,0,0.7);
|
||||
$theme-light-menu-hider: rgba(0,0,0,0.35);
|
||||
|
||||
/*--Menu System---*/
|
||||
.menu-title {
|
||||
h1 {
|
||||
font-size: 23px;
|
||||
font-weight: 700;
|
||||
padding: 20px 0px 3px 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 11px;
|
||||
margin: -15px 0px 10px 20px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
a {
|
||||
font-size: 20px;
|
||||
color: $red;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 55px;
|
||||
line-height: 85px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
.menu-bg {
|
||||
background-color: $theme-light-background;
|
||||
}
|
||||
.menu-hider {
|
||||
position: fixed;
|
||||
top: -100px;
|
||||
bottom: -100px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background-color: $theme-light-menu-hider;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
.menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
background-color: $color-white;
|
||||
z-index: 101;
|
||||
overflow: scroll;
|
||||
transition: $globalTransitions;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.content {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
.menu-box-left {
|
||||
left: 0px;
|
||||
top: 0px !important;
|
||||
top: constant(safe-area-inset-top) !important;
|
||||
top: env(safe-area-inset-top) !important;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
bottom: 0px;
|
||||
box-shadow: 0 15px 25px 1px rgba(0,0,0,0.1);
|
||||
transform: translate3d(-100%,0,0);
|
||||
}
|
||||
.menu-box-right {
|
||||
right: 0px;
|
||||
transform: translateX(100%);
|
||||
top: 0px !important;
|
||||
top: constant(safe-area-inset-top) !important;
|
||||
top: env(safe-area-inset-top) !important;
|
||||
height: 100%;
|
||||
bottom: 0px;
|
||||
box-shadow: 0 15px 25px 1px rgba(0,0,0,0.1);
|
||||
width: 250px;
|
||||
}
|
||||
.menu-box-top {
|
||||
transform: translate3d(0, -115%, 0);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 300px;
|
||||
}
|
||||
.menu-box-bottom {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 300px;
|
||||
transform: translate3d(0, 110%, 0);
|
||||
}
|
||||
.menu-box-modal {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0, 0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
.menu-box-top.menu-box-detached {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.menu-box-bottom.menu-box-detached {
|
||||
bottom: 20px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.menu-box-left.menu-active {transform: translate3d(0%, 0, 0) !important;}
|
||||
.menu-box-right.menu-active {transform: translate3d(0%, 0, 0) !important;}
|
||||
.menu-box-top.menu-active {transform: translate3d(0%, 0, 0) !important;}
|
||||
.is-on-homescreen {
|
||||
.menu-box-top.menu-active {
|
||||
transform: translate3d(0%, 40px, 0) !important;
|
||||
}
|
||||
}
|
||||
.menu-box-bottom.menu-active {
|
||||
transform: translate3d(0%, 0, 0) !important;
|
||||
}
|
||||
.menu-box-modal.menu-active {
|
||||
transition: $globalTransitions;
|
||||
pointer-events: all !important;
|
||||
opacity: 1 !important;
|
||||
transform: translate(-50%, -50%) scale(1, 1) !important;
|
||||
}
|
||||
.menu-hider.menu-active {
|
||||
transition: $globalTransitions;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
.menu-hider.menu-active.menu-active-clear {
|
||||
background-color: $color-transparent !important;
|
||||
}
|
||||
.menu-box-left[data-menu-effect="menu-reveal"] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(0px) !important;
|
||||
z-index: 96;
|
||||
}
|
||||
.menu-box-right[data-menu-effect="menu-reveal"] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(0px) !important;
|
||||
z-index: 96;
|
||||
}
|
||||
.menu-active.menu {
|
||||
opacity: 1 !important;
|
||||
transition: $globalTransitions;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
/*Menu Update*/
|
||||
#menu-update {
|
||||
background-color: $color-white;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 310px;
|
||||
height: 430px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
border-radius: 10px;
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
.menu-active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.menu-active-no-click {
|
||||
opacity: 1;
|
||||
background-color: $theme-dark-menu-hider;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
#menu-install-pwa-ios {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.fa-ios-arrow {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
.theme-light {
|
||||
.fa-ios-arrow {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
34
client/scss/sticky/_structure.scss
Normal file
34
client/scss/sticky/_structure.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
/*Page Stucture Settings*/
|
||||
#page {
|
||||
position: relative;
|
||||
}
|
||||
.page-content {
|
||||
overflow-x: hidden;
|
||||
transition: $globalTransitions;
|
||||
z-index: 90;
|
||||
padding-bottom: 80px;
|
||||
padding-bottom: calc(80px + (constant(safe-area-inset-bottom))*1.1);
|
||||
padding-bottom: calc(80px + (env(safe-area-inset-bottom))*1.1);
|
||||
}
|
||||
.content-box {
|
||||
background-color: $theme-light-structure;
|
||||
border-radius: $rounded-m;
|
||||
margin-left: $globalMargin/2;
|
||||
margin-right: $globalMargin/2;
|
||||
box-shadow: $shadow-m;
|
||||
}
|
||||
/*Content Boxes*/
|
||||
.content {
|
||||
margin: ($globalMargin/2)+5 $globalMargin/2 ($globalMargin - 10) $globalMargin/2;
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-full {
|
||||
margin: 0px;
|
||||
}
|
||||
.content-boxed {
|
||||
padding: ($globalMargin/2)+5 $globalMargin/2 0px $globalMargin/2;
|
||||
}
|
||||
29
client/scss/sticky/_typography.scss
Normal file
29
client/scss/sticky/_typography.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
/*Typography Settings*/
|
||||
body {
|
||||
font-size: $font-main-size;
|
||||
font-family: $font-main-family !important;
|
||||
line-height: $font-main-line;
|
||||
color: $font-main-color !important;
|
||||
background-color: $theme-light-background;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-weight:$font-heading-weight;
|
||||
color: $font-heading-color;
|
||||
font-family: $font-heading-family !important;
|
||||
margin-bottom:5px;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
h1{font-size:$font-h1-size; line-height:$font-h1-line}
|
||||
h2{font-size:$font-h2-size; line-height:$font-h2-line}
|
||||
h3{font-size:$font-h3-size; line-height:$font-h3-line}
|
||||
h4{font-size:$font-h4-size; line-height:$font-h4-line}
|
||||
h5{font-size:$font-h5-size; line-height:$font-h5-line}
|
||||
|
||||
a {text-decoration: none !important;}
|
||||
p {
|
||||
color: $font-main-color;
|
||||
margin-bottom: $globalMargin;
|
||||
padding-bottom: 0px
|
||||
}
|
||||
63
client/scss/sticky/_utilities.scss
Normal file
63
client/scss/sticky/_utilities.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
/*Sticky Utility / Secondary Classes*/
|
||||
/*Rounded Borders*/
|
||||
.rounded-0{border-radius:$rounded-0!important;}
|
||||
.rounded-xs{border-radius:$rounded-xs!important;}
|
||||
.rounded-s{border-radius:$rounded-s!important;}
|
||||
.rounded-sm{border-radius:$rounded-sm!important;}
|
||||
.rounded-m{border-radius:$rounded-m!important;}
|
||||
.rounded-l{border-radius:$rounded-l!important;}
|
||||
.rounded-xl{border-radius:$rounded-xl!important;}
|
||||
|
||||
/*Shadows*/
|
||||
.shadow-none{box-shadow: $shadow-0!important;}
|
||||
.shadow-0{box-shadow: $shadow-0!important;}
|
||||
.shadow-xs{box-shadow: $shadow-xs!important;}
|
||||
.shadow-s{box-shadow: $shadow-s!important;}
|
||||
.shadow-m{box-shadow:$shadow-m!important;}
|
||||
.shadow-l{box-shadow:$shadow-l!important;}
|
||||
.shadow-xl{box-shadow:$shadow-xl!important;}
|
||||
|
||||
/*Line Height Control*/
|
||||
.line-height-xs{line-height:$line-height-xs!important;}
|
||||
.line-height-s{line-height:$line-height-s!important;}
|
||||
.line-height-m{line-height:$line-height-m!important;}
|
||||
.line-height-l{line-height:$line-height-l!important;}
|
||||
.line-height-xl{line-height:$line-height-xl!important;}
|
||||
|
||||
/*Text Shadow*/
|
||||
.text-shadow-s{text-shadow:0px 1px 0px rgba(0,0,0,0.4);}
|
||||
.text-shadow-l{text-shadow:0px 1px 2px rgba(0,0,0,0.4);}
|
||||
|
||||
/*Boxed Text*/
|
||||
.boxed-text-xl, .boxed-text-l, .boxed-text-m, .boxed-text-s{display:block; text-align:center; margin-left:auto; margin-right:auto;}
|
||||
.boxed-text-xl{width:$box-text-xl; max-width:340px;}
|
||||
.boxed-text-l{width:$box-text-l; max-width:300px;}
|
||||
.boxed-text-m{width:$box-text-m; max-width:300px;}
|
||||
.boxed-text-s{width:$box-text-s; max-width:260px;}
|
||||
|
||||
/*Font Weights*/
|
||||
$fontWeight: 200, 300, 400, 500, 600, 700, 800, 900;
|
||||
@each $fontWeight in $fontWeight{.font-#{$fontWeight}{font-weight:$fontWeight;}}
|
||||
|
||||
/*Opacity Values - Used for Contrasting Text, example opacity-30 will make the opacity 0.3*/
|
||||
$opacity: 10, 20, 30, 40, 50, 60, 70, 80, 85, 90;
|
||||
@each $opacity in $opacity{.opacity-#{$opacity}{opacity:$opacity/100;}}
|
||||
|
||||
/*Font Array - Better Typography Control, example font-30 class will make the font size 30px*/
|
||||
$fontSizes: 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40;
|
||||
@each $fontSizes in $fontSizes{.font-#{$fontSizes}{font-size:$fontSizes+px!important;}}
|
||||
|
||||
|
||||
/*Scaling Animation*/
|
||||
@keyframes scale-animation {0% {transform:scale(1, 1)} 50% {transform:scale(1.05, 1.05)} 0% {transform:scale(1, 1)}}
|
||||
.scale-box{animation:scale-animation 1.5s; animation-iteration-count: infinite;}
|
||||
|
||||
@keyframes scale-icon {0% {transform:scale(1, 1)} 50% {transform:scale(1.3, 1.3)} 0% {transform:scale(1, 1)}}
|
||||
.scale-icon{animation:scale-icon 1.5s; animation-iteration-count: infinite;}
|
||||
|
||||
/*Control Classes*/
|
||||
::-webkit-scrollbar{display: none;}
|
||||
img.mx-auto{display:block;}
|
||||
.disabled{display:none!important}
|
||||
.no-click{pointer-events: none!important;}
|
||||
.no-outline{outline:none!important;}
|
||||
98
client/scss/sticky/_variables.scss
Normal file
98
client/scss/sticky/_variables.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
//General Font Settings*/
|
||||
$font-main-size:13px;
|
||||
$font-main-line: 26px!important;
|
||||
$font-main-color:#6c6c6c;
|
||||
$font-main-family:'Roboto', sans-serif;
|
||||
|
||||
$font-h1-size: 24px; $font-h1-line: 30px;
|
||||
$font-h2-size: 21px; $font-h2-line: 25px;
|
||||
$font-h3-size: 20px; $font-h3-line: 24px;
|
||||
$font-h4-size: 18px; $font-h4-line: 23px;
|
||||
$font-h5-size: 16px; $font-h5-line: 22px;
|
||||
$font-heading-color:#1f1f1f;
|
||||
$font-heading-weight:700;
|
||||
$font-heading-family:'Source Sans Pro', sans-serif;
|
||||
|
||||
//Line Heights*/
|
||||
$line-height-xs:14px;
|
||||
$line-height-s:17px;
|
||||
$line-height-m:24px;
|
||||
$line-height-l:26px;
|
||||
$line-height-xl:37px;
|
||||
|
||||
//Boxed Text Sizes*/
|
||||
$box-text-xl:90%;
|
||||
$box-text-l:85%;
|
||||
$box-text-m:80%;
|
||||
$box-text-s:70%;
|
||||
|
||||
//Element Rounded Borders*/
|
||||
$rounded-0:0px;
|
||||
$rounded-xs:5px;
|
||||
$rounded-s:8px;
|
||||
$rounded-sm:10px;
|
||||
$rounded-m:15px;
|
||||
$rounded-l:30px;
|
||||
$rounded-xl:50px;
|
||||
$rounded-card-style:15px;
|
||||
|
||||
//Buttons Sizes*/
|
||||
$btn-xxs:6px 10px;
|
||||
$btn-xs:7px 14px;
|
||||
$btn-s:8px 18px;
|
||||
$btn-sm:10px 18px;
|
||||
$btn-m:12px 20px;
|
||||
$btn-l:14px 26px;
|
||||
$btn-xl:15px 30px;
|
||||
$btn-xxl:17px 34px;
|
||||
|
||||
//Center Button Sizes*/
|
||||
$btn-center-xs:100px;
|
||||
$btn-center-s:120px;
|
||||
$btn-center-m:160px;
|
||||
$btn-center-l:220px;
|
||||
$btn-center-xl:250px;
|
||||
|
||||
//Icons*/
|
||||
$icon-xxs:32px;
|
||||
$icon-xs:38px;
|
||||
$icon-s:40px;
|
||||
$icon-m:45px;
|
||||
$icon-l:51px;
|
||||
$icon-xl:55px;
|
||||
$icon-xxl:60px;
|
||||
|
||||
//Shadows*/
|
||||
$shadow-0:0px 0px 0px 0px rgba(0,0,0,0);
|
||||
$shadow-xs:0px 0px 5px 2px rgba(0,0,0,0.04);
|
||||
$shadow-s:0 4px 10px 0 rgba(0,0,0,0.10);
|
||||
$shadow-m:0 2px 14px 0 rgba(0,0,0,0.08);
|
||||
$shadow-l:0 5px 15px 0 rgba(0,0,0,0.09);
|
||||
$shadow-xl:0 5px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);
|
||||
|
||||
//Dark Mode Main Colors*/
|
||||
$color_transparent: rgba(0,0,0,0);
|
||||
$color_white: #FFF;
|
||||
$color_black: #000;
|
||||
$color_dark: #1f1f1f;
|
||||
|
||||
$theme-light-text: #666666;
|
||||
$theme-light-structure:#FFFFFF;
|
||||
$theme-light-background:#f0f0f0;
|
||||
$theme-dark-structure: #21252a;
|
||||
$theme-dark-background: #0f1117;
|
||||
$theme-dark-lighter:rgba(255,255,255,0.05);
|
||||
|
||||
$theme-dark-text: #898989;
|
||||
$theme-dark-headings: #FFF;
|
||||
$theme-dark-switch: #1b1d21;
|
||||
|
||||
//Global Spacing Settings*/
|
||||
//$globalShadow: 0 4px 10px 0 rgba(0,0,0,0.05);
|
||||
$globalShadow: 0 4px 24px 0 rgba(0,0,0,.08);
|
||||
$globalMargin: 30px;
|
||||
|
||||
//Transitions for Menus, Action Sheets, Modals etc*/
|
||||
$disabledTransitions: all 0ms ease;
|
||||
$globalTransitions: all 350ms ease;
|
||||
|
||||
Reference in New Issue
Block a user