parent
87852330b7
commit
e00f81cc23
@ -1,677 +0,0 @@
|
||||
/*!*******************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss ***!
|
||||
\*******************************************************************************************************************************************/
|
||||
:root {
|
||||
--reflex-columns: 12;
|
||||
--reflex-grid-spacing: 15px;
|
||||
--reflex-xs: 576px;
|
||||
--reflex-sm: 768px;
|
||||
--reflex-md: 992px;
|
||||
--reflex-lg: 1200px;
|
||||
--reflex-xlg: 1600px;
|
||||
--reflex-xxs-max: 575px;
|
||||
--reflex-xs-max: 767px;
|
||||
--reflex-sm-max: 991px;
|
||||
--reflex-md-max: 1199px;
|
||||
--reflex-lg-max: 1599px;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-full {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.container .grid,
|
||||
.container-full .grid {
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 576px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 992px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
word-spacing: -0.43em;
|
||||
list-style-type: none;
|
||||
}
|
||||
.grid::before, .grid::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
[class*=col-] {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
[class*=col-]::before, [class*=col-]::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
[class*=col-] .grid {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
width: 83.3333333333%;
|
||||
*width: 83.2333333333%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
width: 75%;
|
||||
*width: 74.9%;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
width: 58.3333333333%;
|
||||
*width: 58.2333333333%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
width: 25%;
|
||||
*width: 24.9%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-xs-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
.col-xs-10 {
|
||||
width: 83.3333333333%;
|
||||
*width: 83.2333333333%;
|
||||
}
|
||||
.col-xs-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-xs-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
.col-xs-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
.col-xs-2 {
|
||||
width: 16.6666666667%;
|
||||
*width: 16.5666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-sm-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
.col-sm-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
.col-sm-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-md-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-md-7 {
|
||||
width: 58.3333333333%;
|
||||
*width: 58.2333333333%;
|
||||
}
|
||||
.col-md-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
.col-md-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
.col-md-3 {
|
||||
width: 25%;
|
||||
*width: 24.9%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-lg-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-lg-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.col-xlg-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
.col-xlg-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-xlg-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
}
|
||||
.col-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-sm-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-md-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-lg-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.col-xlg-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.order-3 {
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.order-2 {
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.order-1 {
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.order-md-3 {
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
.order-md-2 {
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
.order-md-1 {
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
margin-left: 25%;
|
||||
*margin-left: 24.9%;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.offset-md-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
*margin-left: 16.5666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.offset-lg-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
*margin-left: 8.2333333333%;
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
-ms-flex-wrap: nowrap;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.no-wrap [class*=col-] {
|
||||
-ms-flex-negative: 1;
|
||||
-webkit-flex-shrink: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.wrap-reverse {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.direction-row {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.direction-row-reverse {
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.direction-column-reverse {
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.align-end [class*=col-] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.align-center [class*=col-] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
-ms-flex-line-pack: start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-content-end {
|
||||
-ms-flex-line-pack: end;
|
||||
-webkit-align-content: flex-end;
|
||||
align-content: flex-end;
|
||||
}
|
||||
.align-content-end [class*=col-] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
-ms-flex-line-pack: center;
|
||||
-webkit-align-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.align-content-space-between {
|
||||
-ms-flex-line-pack: justify;
|
||||
-webkit-align-content: space-between;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
.align-content-space-around {
|
||||
-ms-flex-line-pack: distribute;
|
||||
-webkit-align-content: space-around;
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.align-self-stretch {
|
||||
-ms-flex-item-align: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
-ms-flex-item-align: start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
-ms-flex-item-align: end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
-ms-flex-item-align: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justify-end.grid {
|
||||
text-align: right;
|
||||
-moz-text-align-last: right;
|
||||
text-align-last: right;
|
||||
}
|
||||
.justify-end.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-center.grid {
|
||||
text-align: center;
|
||||
-moz-text-align-last: center;
|
||||
text-align-last: center;
|
||||
}
|
||||
.justify-center.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.justify-space-between {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-space-between.grid {
|
||||
text-align: justify;
|
||||
-moz-text-align-last: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.justify-space-between.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.justify-space-around {
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.justify-space-around.grid {
|
||||
text-align: justify;
|
||||
-moz-text-align-last: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.justify-space-around.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.grid-bleed [class*=col-] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-grid {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.col-grid.direction-row {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col-bleed {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-bleed-x {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.col-bleed-y {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.flex-img {
|
||||
display: block;
|
||||
-ms-flex: 0 0 auto;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
*width: auto;
|
||||
}
|
||||
|
||||
.flex-footer {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.flex-footer > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 0px) and (max-width: 575px) {
|
||||
.hidden-xxs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.hidden-xs-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hidden-xs-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.hidden-xs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hidden-sm-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.hidden-sm-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.hidden-md-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.hidden-md-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-lg-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1599px) {
|
||||
.hidden-lg-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1599px) {
|
||||
.hidden-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.hidden-xlg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
@ -1 +0,0 @@
|
||||
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@spd-minden/sozi-ui/spritemap-dummy-module?")}}]);
|
After Width: | Height: | Size: 688 B |
After Width: | Height: | Size: 617 B |
@ -0,0 +1,117 @@
|
||||
import $ from 'cash-dom'
|
||||
|
||||
// adding smooth scroll for panel achnor
|
||||
import SmoothScroll from 'smooth-scroll'
|
||||
import { throttle, debounce } from 'throttle-debounce'
|
||||
|
||||
$(function () {
|
||||
|
||||
// create scroll
|
||||
const scroll = new SmoothScroll('.sozi-ui__menu-list a[href*="#"]')
|
||||
|
||||
/**
|
||||
* adding toggle for mobile navigation
|
||||
*
|
||||
*/
|
||||
const button = $('#mobile-button')
|
||||
const navigation = $('.sozi-ui__menu-list')
|
||||
const navigationOpenClass = 'sozi-ui__menu-list--open'
|
||||
|
||||
const buttonClass = 'button--open'
|
||||
|
||||
// open sidebar and button
|
||||
const handleOpen = function() {
|
||||
navigation.addClass(navigationOpenClass)
|
||||
button.addClass(buttonClass)
|
||||
}
|
||||
|
||||
// close sidebar and button
|
||||
const handleClose = function() {
|
||||
navigation.removeClass(navigationOpenClass)
|
||||
button.removeClass(buttonClass)
|
||||
}
|
||||
|
||||
button.on('click', (event) => {
|
||||
event.preventDefault()
|
||||
|
||||
if (navigation.hasClass(navigationOpenClass)) {
|
||||
handleClose()
|
||||
} else {
|
||||
handleOpen()
|
||||
}
|
||||
})
|
||||
|
||||
// if scrolling stop close sidebar
|
||||
document.addEventListener('scrollStop', () => {
|
||||
handleClose()
|
||||
}, false);
|
||||
|
||||
/**
|
||||
* adding scrolling and change navigation
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
// get elements
|
||||
const elements = $('.sozi-ui__menu-list a[href*="#"]')
|
||||
const offset = 25
|
||||
|
||||
// add current to navigation
|
||||
const handleCurrent = function(hash) {
|
||||
$(".sozi-ui__menu-list a[href$='" + hash + "']").first().addClass('sozi-ui__menu-item--current')
|
||||
}
|
||||
|
||||
//
|
||||
const handleScroll = function() {
|
||||
|
||||
// if found
|
||||
let hasFound = false
|
||||
|
||||
// get result
|
||||
let result = undefined
|
||||
|
||||
if (window.pageYOffset > offset) {
|
||||
$('body').addClass('has-scrolled')
|
||||
} else {
|
||||
$('body').removeClass('has-scrolled')
|
||||
}
|
||||
|
||||
elements.each((index, element) => {
|
||||
|
||||
// getting target
|
||||
const target = $(element.hash).first()
|
||||
|
||||
if (!target[0]) {
|
||||
return
|
||||
}
|
||||
|
||||
const offsetTop = target[0].getBoundingClientRect().top + window.pageYOffset
|
||||
|
||||
let next = undefined
|
||||
|
||||
// check for next element
|
||||
if (elements[index + 1]) {
|
||||
next = $(elements[index + 1].hash)
|
||||
}
|
||||
|
||||
// check if element is visible
|
||||
if (offsetTop - (window.innerHeight / 2) <= (window.pageYOffset + offset)) {
|
||||
result = target
|
||||
}
|
||||
})
|
||||
|
||||
if (result) {
|
||||
elements.removeClass('sozi-ui__menu-item--current')
|
||||
handleCurrent(result[0].id)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', throttle(300, handleScroll), false)
|
||||
|
||||
// if hash is in url, if not get first element
|
||||
if (window.location.hash.substr(1)) {
|
||||
handleCurrent(window.location.hash.substr(1))
|
||||
} else {
|
||||
handleCurrent($('.sozi-ui__menu-list a[href*="#"]').first()[0].hash)
|
||||
}
|
||||
})
|
@ -0,0 +1,22 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
.sozi-ui__icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
font-size: 1.4rem;
|
||||
|
||||
fill: var(--text);
|
||||
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@spd-minden/sozi-ui/spritemap-dummy-module?")}}]);
|
||||
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([[654],{874:()=>{}}]);
|
After Width: | Height: | Size: 435 B |
Loading…
Reference in new issue