webpack-bootstrap-ui-kit/src/scss/_layout.scss

386 lines
5.9 KiB
SCSS
Raw Normal View History

2019-06-08 17:20:51 +02:00
/**
* Your custom style
*/
2021-01-31 14:29:24 +01:00
.a.active,
.a:focus,
.a:hover,
.a[aria-expanded='true'],
.btn.active,
.btn:focus,
.btn:hover,
.btn[aria-expanded='true'],
[data-toggle].active,
[data-toggle]:focus,
[data-toggle]:hover,
[data-toggle][aria-expanded='true'],
a.active,
a:focus,
a:hover,
a[aria-expanded='true'],
button.active,
button:focus,
button:hover,
button[aria-expanded='true'] {
opacity: 1;
img,
.img {
filter: grayscale(1);
}
}
body {
position: relative;
}
.field {
margin: 2rem 0;
&.required:after {
display: none;
}
}
.breadcrumb {
margin-bottom: 0;
}
.form-control,
.select2-container--default .select2-selection,
.select2-dropdown .select2-search__field {
border-width: 0 0 1px 0;
}
2019-06-08 17:20:51 +02:00
.bg-alt {
2021-01-31 14:29:24 +01:00
@extend .bg-dark;
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
background-color: $bg-alt !important;
2019-06-08 17:20:51 +02:00
}
.bootstrap-select .dropdown-toggle .filter-option .option {
2021-01-31 14:29:24 +01:00
background: #dedede;
padding: 0.2rem 0.5rem;
margin: 0.2rem;
color: #212529;
2019-06-08 17:20:51 +02:00
}
2021-01-31 14:29:24 +01:00
$full-body-min-width: map-get($grid-breakpoints, 'sm') !default;
@media (max-width: $full-body-min-width - 1) {
.jsSidebarUI__inner {
width: auto !important;
transform: none !important;
position: static !important;
}
}
.dropdown-menu {
padding: 0;
border-radius: 0;
.dropdown-list {
@extend .list-unstyled;
}
.dropdown-menu {
top: 0;
left: 100%;
}
}
.nav-link {
@include fix-bold();
&:focus,
&:hover,
&.active {
background: $nav-link-hover-bg;
color: $nav-link-hover-color;
font-weight: bold;
}
}
.active {
.nav-link {
background: $nav-link-hover-bg;
color: $nav-link-hover-color;
}
2019-11-30 09:28:57 +01:00
}
2019-06-08 17:20:51 +02:00
// shrink elements on scroll
2020-08-14 00:32:02 +02:00
body.shrink {
2021-01-31 14:29:24 +01:00
@media (max-width: map-get($grid-breakpoints, 'lg') - 1) {
padding-top: 100px;
#Header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
}
@media (min-width: map-get($grid-breakpoints, 'lg')) and (max-width: map-get($grid-breakpoints, 'xl') - 1) {
padding-top: 146px;
#Header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
}
2020-08-14 00:32:02 +02:00
}
2019-06-08 17:20:51 +02:00
// sticky footer
2021-01-31 14:29:24 +01:00
body > .wrapper {
min-height: 100%;
min-height: 100vh;
}
@media (min-width: $full-body-min-width) {
/*body {
2019-06-08 17:20:51 +02:00
height: 100%;
min-height: 100%;
2021-01-31 14:29:24 +01:00
}*/
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.wrapper {
padding-bottom: $footer-size + $footer-bar-size + $grid-gutter-height /
2;
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
//padding-top: $grid-gutter-height;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.footer {
height: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
margin-top: -($footer-size + $footer-bar-size + $grid-gutter-height / 2);
}
2019-06-08 17:20:51 +02:00
}
2021-01-31 14:29:24 +01:00
.sidebar__col {
position: relative;
margin-top: $grid-gutter-element-height;
margin-bottom: $grid-gutter-element-height * 2;
}
.content-holder__sidebar {
> .container {
padding: 0;
}
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
#SiteWideMessage {
text-align: center;
.alert {
margin-bottom: 0;
.btn-close {
margin-top: -0.5rem;
float: right;
}
}
2019-06-08 17:20:51 +02:00
}
// stick navbar to top using mobile layout
/*#Header {
position: relative;
padding-top: $grid-gutter-height / 2;
padding-bottom: 1rem;
@media (min-width: map-get($grid-breakpoints, "lg")) {
padding-top: 1rem;
padding-bottom: 0;
}
}
#Navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
@media (min-width: map-get($grid-breakpoints, "lg")) {
position: relative;
margin-top: 1rem;
}
}*/
2021-01-31 14:29:24 +01:00
#Header {
background-color: $header-bg;
color: $header-color;
a {
color: $header-link;
}
.nav-container {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: static;
}
.logo {
filter: invert(100%);
}
.tagline {
display: inline-block;
font-size: 1.2rem;
margin-left: 2em;
}
}
#Navigation {
font-size: 1.5rem;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.25rem;
position: fixed;
top: 0;
right: 0;
z-index: 4;
width: 100%;
background: $header-bg;
@media (min-width: map-get($grid-breakpoints, 'md')) {
position: static;
width: auto;
background: none;
}
.navbar-toggler {
color: $main-nav-link-color;
position: absolute;
top: 0;
right: 0;
font-size: $main-nav-toggler-size;
}
.nav-item,
.nav-link {
display: flex;
align-items: center;
justify-content: center;
}
.nav-link {
color: $main-nav-link-color;
background: $main-nav-link-bg;
&:focus,
&:hover,
&.active {
background: $main-nav-link-hover-bg;
color: $main-nav-link-hover-color;
}
}
.active {
.nav-link {
background: $main-nav-link-hover-bg;
color: $main-nav-link-hover-color;
}
}
.nav-item .nav-dropdown {
.fa-chevron-right
//&:after
{
display: none;
}
}
.dropdown-menu {
border-color: $main-nav-dropdown-bg;
background: $main-nav-dropdown-bg;
margin-top: 0;
border-top: 0;
width: 100%;
.nav-item-link {
color: $main-nav-dropdown-color;
}
}
.dropdown-item {
padding: 0;
&:focus,
&:hover {
background: $main-nav-dropdown-hover-bg;
.nav-item-link {
color: $main-nav-dropdown-hover-color;
}
}
.nav-item-link {
width: 100%;
justify-content: flex-start;
align-items: flex-start;
}
}
@media (min-width: map-get($grid-breakpoints, 'md')) {
.navbar-nav > .nav-item {
padding-right: 2rem;
padding-left: 2rem;
}
.dropdown-item .nav-item-link {
padding-left: 1rem;
padding-right: 1rem;
}
}
}
/*#MainContent {
padding-top: 2 * $grid-gutter-element-height;
padding-bottom: 2 * $grid-gutter-element-height;
}*/
#PageBreadcumbs {
position: relative;
z-index: 2;
}
2019-06-08 17:20:51 +02:00
#Footer {
2021-01-31 14:29:24 +01:00
background-color: $footer-bg;
color: $footer-color;
> .wrapper {
padding-top: $grid-gutter-element-height;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
a {
color: $footer-link;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
ul {
margin-bottom: 0;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.field:first-child {
margin-top: 0;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.footer {
background-color: $footer-footer-bg;
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.copyright {
padding-right: 0.5rem;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
li {
padding: 0 0.5rem;
}
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
@media (min-width: $full-body-min-width) {
.wrapper {
padding-bottom: $footer-bar-size;
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.footer {
height: $footer-bar-size;
margin-top: -$footer-bar-size;
line-height: $footer-bar-size;
}
}
}
2019-06-08 17:20:51 +02:00
2021-01-31 14:29:24 +01:00
.flyout-FlyoutUI {
display: none;
2019-06-08 17:20:51 +02:00
}