//==================================== // Additional theme classes //==================================== // General .tofront { position:relative; z-index:1; } .full-width { width: 100vw; position: relative; margin-left: -50vw; left: 50%; } .c-pointer:hover { cursor:pointer; } .c-move:hover { cursor:move; } .z-index-1 { z-index:1; } // Typography .display-3 { @include media-breakpoint-down(md) { font-size: 3.5rem; } @include media-breakpoint-down(sm) { font-size: 2rem; } } // Margins .row.gap-y>.col, .row.gap-y>[class*="col-"] { padding-top: 15px; padding-bottom: 15px; } .mt-neg5 { margin-top: -5rem; } .ml-neg5 { margin-left: -5rem; } // Heights @include media-breakpoint-up(md) { .h-md-100-v { height: 100vh; } .h-md-100 { height: 100vh; } } @include media-breakpoint-only(xl) { .h-xl-300 { height: 300px; } .h-max-380 { max-height:380px; } } // Mixins @mixin button-variant-link($color){ color: $color; } // Buttons .btn-round { border-radius: $round-radius !important; } .btn { @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); &:hover, &:focus { box-shadow: $box-shadow; outline: 0 !important; } //.badge { // position: absolute; // top: -.625rem; // right: -.3125rem; //} position:relative; } .btn-lg { @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); } .btn-link { &:hover, &:focus { box-shadow:none; } } @each $color, $value in $theme-colors { .btn-link.btn-#{$color} { @include button-variant-link($value); border-color: transparent; } } .btn-white {background-color:#fff;} // Inputs .input-round { border-radius: $round-radius !important; } .input-group.input-round { input:first-child {border-radius:30px 0 0 30px} input:last-child {border-radius:0px 30px 30px 0px} } // Nav .navbar { font-weight: $font-weight-normal; } .navbar-brand { margin-right:2rem; font-size:1.25rem; } .dropdown-item { font-weight: $font-weight-base; } .dropdown-menu { border:0; text-transform:none; box-shadow: $box-shadow-lg; &:before { @include media-breakpoint-up(md) { content: ''; top: -8px; position: absolute; left: 50px; border-top: 16px solid #fff; border-left: 16px solid #fff; transform: rotate(45deg); z-index: -1; } } &.dropdown-menu-right{ &:before { @include media-breakpoint-up(md) { left:unset; right: 50px; } } } &.dropdown-caret-0{ &:before{ content: none; } } } // Dark links against a light background .navbar-light { .navbar-brand { color: $navbar-light-active-color; @include hover-focus { color: $navbar-light-active-color; } } .navbar-nav { .nav-link { color: $navbar-light-color; @include hover-focus { color: $navbar-light-hover-color; } &.disabled { color: $navbar-light-disabled-color; } } .show > .nav-link, .active > .nav-link, .nav-link.show, .nav-link.active { color: $navbar-light-active-color; } } .navbar-toggler { color: $navbar-light-color; border-color: $navbar-light-toggler-border-color; } .navbar-toggler-icon { background-image: $navbar-light-toggler-icon-bg; } .navbar-text { color: $navbar-light-color; a { color: $navbar-light-active-color; @include hover-focus { color: $navbar-light-active-color; } } } } // Jumbotron .jumbotron { background-size:cover; padding: 7rem 1rem; } @include media-breakpoint-up(lg) { .jumbotron-lg-withnav {padding-bottom: calc(10rem - 70px);} .jumbotron-lg { padding:10rem 0;} .jumbotron-xl { padding:15rem 0;} .jumbotron-xl {min-height:100vh;} .bottom-align-text-absolute { position: absolute; bottom: 30px; margin:auto; left: 0; right:0; } } // Backgrounds .bg-black { background-color: $black; } .overlay { position: relative; .container { position: relative; } &:before { content: ""; display: block; height: 100%; left: 0; top: 0; position: absolute; width: 100%; } } .overlay-black { &:before { background-color: rgba(0, 0, 0, 0.5); } } .overlay-blue { &:before { background-color: rgba(23, 29, 90, 0.5); } } .overlay-red { &:before { background:linear-gradient(0deg,rgba(44,44,44,.2),rgba(224,23,3,.6)); } } .overlay-blue { &:before { background-color: rgba(23, 29, 90, 0.5); } } // SVG fills @mixin fill-variant($parent, $color) { #{$parent} { fill: $color !important; } } @each $color, $value in $theme-colors { @include fill-variant(".bg-#{$color}", $value); } // Icons .iconbox { border:1px solid; text-align:center; display:inline-block; } .iconbox.iconsmall { width:40px; height:40px; line-height:40px; font-size:1rem; } .iconbox.iconmedium { width:60px; height:60px; line-height:60px; font-size:1.8rem; } .iconbox.iconlarge { width:80px; height:80px; line-height:80px; font-size:2.2rem; } // Alerts @each $color, $value in $theme-colors { .alert-#{$color} { @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), #fff); } } // Lists ul.list-unstyled li {margin-bottom:1rem;} // Login @include media-breakpoint-up(md) { .loginarea { z-index: 1111; } }