bobjoll 1.634.3

package/scss/partials/_accordion-v1-0.scss

@@ -0,0 +1,165 @@
+@if $accordion-v1-0 {
+    .accordion {
+        @include clearfix;
+
+        position: relative;
+
+        overflow: hidden;
+
+        margin: 0 0 $base-spacing;
+        padding: 0;
+
+        line-height: $base-line-height;
+
+        &:not(.accordion--ready) {
+            .accordion__mobile-nav {
+                position: absolute;
+
+                visibility: hidden;
+
+                border-bottom: $base-border;
+            }
+
+            .accordion__container > a,
+            .accordion__container > button {
+                visibility: hidden;
+            }
+        }
+
+        &--tabs:not(data-disable-mobile-select) {
+            @include breakpoint('xs', 'min') {
+                .accordion__container {
+                    display: inline;
+
+                    border: none;
+                }
+
+                .accordion__content {
+                    float: left;
+
+                    border-top: $base-border;
+                }
+
+                .accordion__link {
+                    &:not(.nostyle) {
+                        display: inline-block;
+
+                        &.active {
+                            border-bottom: 1px solid color('text', 'general');
+                        }
+                    }
+                }
+            }
+        }
+
+        &__container {
+            margin: 0 0 $small-spacing;
+
+            list-style: none;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &__content {
+            @include position(absolute, 100% null null 0);
+
+            width: 100%;
+
+            padding: $small-spacing $base-spacing;
+            padding-top: 0;
+
+            p:last-child {
+                margin: 0;
+            }
+        }
+
+        &__mobile-nav {
+            padding: 0 $base-spacing;
+        }
+
+        &__select {
+            @include appearance(none);
+
+            height: $base-element-height;
+
+            border: none;
+
+            background: transparent;
+
+            text-align: center;
+
+            &__wrapper {
+                position: relative;
+
+                display: inline-block;
+
+                padding: 0 ($base-triangle-size + $extra-small-spacing) 0 0;
+
+                &::after {
+                    @include triangle($base-triangle-size, color('text', 'general'), down);
+
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+
+                    transform: translateY(-50%);
+
+                    content: '';
+                }
+            }
+        }
+
+        &__link {
+            &:not(.nostyle) {
+                display: block;
+                padding: $small-spacing $small-spacing $small-spacing $base-spacing;
+                text-decoration: none;
+                color: color('accordion', 'general');
+
+                .icon {
+                    color: color('accordion', 'general');
+                }
+
+                .state--active {
+                    display: none;
+                }
+
+                &.active {
+                    color: color('link', 'general');
+
+                    .icon {
+                        color: color('link', 'general');
+                    }
+
+                    .state--active {
+                        display: block;
+                    }
+                    .state--inactive {
+                        display: none;
+                    }
+                }
+            }
+
+            &.active + .accordion__content {
+                position: relative;
+
+                display: block;
+            }
+        }
+
+        &--inverted {
+            color: color('text-inverted', 'general');
+
+            a:not(.button) {
+                color: color('link-inverted', 'general', 0.75);
+
+                &:hover,
+                &.active {
+                    color: color('link-inverted', 'general');
+                }
+            }
+        }
+    }
+} // End if

package/scss/partials/_autocomplete-v1-0.scss

@@ -0,0 +1,55 @@
+@if $accordion-v1-0 {
+    .autocomplete {
+        @include position(absolute, null null null null);
+
+        overflow: auto;
+
+        display: none;
+
+        width: 100%;
+
+        border-bottom-left-radius: $base-border-radius;
+        border-bottom-right-radius: $base-border-radius;
+
+        transform: translateY(-1px);
+
+        background-color: color('input', 'background');
+
+        box-shadow: $base-box-shadow;
+
+        z-index: 100;
+
+        @include breakpoint('md') {
+            height: ($small-element-height * 5) + ($small-element-height / 2);
+        }
+
+        @include element('item') {
+            height: $small-element-height;
+            
+            padding: 0 $base-spacing;
+            
+            color: color('text-secondary', 'general');
+            text-align: left;
+            text-transform: lowercase;
+            line-height: $small-element-height;
+
+            cursor: pointer;
+
+            &:hover {
+                background-color: color('border', 'general', 1, -4);
+            }
+
+            &.selected {
+                background-color: color('border', 'general', 1, -1);
+            }
+            
+            b {
+                color: color('text', 'general');
+            }
+        }
+
+        @include modifier('show') {
+            display: block;
+        }
+    }
+}

package/scss/partials/_general-v1-0.scss

@@ -0,0 +1,51 @@
+@if $general-v1-0 {
+	body {
+		@include prefixer(align-items, flex-start, spec ms);
+		@include prefixer(display, flex, spec ms);
+		@include prefixer(flex-direction, column, spec ms);
+		@include prefixer(flex-wrap, wrap, spec ms);
+
+		overflow: auto;	
+
+		height: auto;
+		min-height: 100vh !important;
+
+		background-color: color('body', 'background');
+
+		color: color('text', 'general');
+		font-family: $base-font-family;
+		font-size: $base-font-size;
+		line-height: $base-line-height;
+
+		-webkit-font-smoothing: antialiased;
+
+		// IE 11
+		@media all and (-ms-high-contrast:none) {
+			display: block;
+		}
+
+		& > * {
+			width: 100%;
+		}
+	}
+
+	main {
+		@include prefixer(flex, 1, spec ms);
+
+		overflow: hidden;
+
+		& > :last-child {
+			margin-bottom: 0;
+		}
+
+		section {
+			margin: 0 0 $large-spacing;
+		}
+	}
+
+	* {
+		box-sizing: border-box;
+		
+		outline: none; 
+	}
+} // End if

package/scss/partials/_grid-v1-0.scss

@@ -0,0 +1,109 @@
+%row-flexbox {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+%col {
+    @if $grid-mode == 'float' {
+        float: left;
+
+        min-height: 1px;
+    }        
+
+    position: relative;
+
+    margin: 0 0 $grid-columns-spacing * 2;
+    padding: 0 $grid-columns-spacing;
+
+    box-sizing: border-box;
+}
+
+.row {
+    @if $grid-mode == 'flexbox' {
+        @extend %row-flexbox;
+
+        @include modifier('space-between') {
+            justify-content: space-between;
+        }
+
+        @include modifier('horizontal-center') {
+            justify-content: center;
+        }
+
+        @include modifier('vertical-center') {
+            align-items: center;
+        }
+
+        @include modifier('left') {
+            justify-content: flex-start;
+        }
+
+        @include modifier('right') {
+            justify-content: flex-end;
+        }
+
+        @include modifier('nowrap') {
+            flex-wrap: nowrap;
+        }
+    }    
+}
+
+.col {                
+    @extend %col;
+
+    flex: 1;
+
+    &--center {
+        align-self: center;
+    }
+
+    &--top {
+        align-self: flex-start;
+    }
+
+    &--bottom {
+        align-self: flex-end;
+    }
+
+    &--stretch {
+        align-self: stretch;
+    }
+}
+
+@if $grid-v1-0 {    
+    .container-fluid {
+        @include clearfix;
+
+        padding: 0 $base-spacing;
+    }
+
+    .container {
+        @include clearfix;
+        
+        max-width: map-get($breakpoints, 'xl');
+
+        margin: 0 auto;
+        padding: 0 $base-spacing;
+
+        @include modifier('sm') {
+            max-width: map-get($breakpoints, 'lg');
+        }
+    }
+
+    .row {
+        @if $grid-mode == 'flexbox' {
+            @include grid($grid-columns);
+        } @else if $grid-mode == 'float' {
+            @include clearfix;
+        }        
+        
+        margin: 0 ($grid-columns-spacing * -1);
+    }
+
+    .col {            
+        @extend %col;
+
+        flex: 1;
+    }
+} // End if

package/scss/partials/_helper-v1-0.scss

@@ -0,0 +1,299 @@
+@if $helper-v1-0 {
+	html {
+		// Colors
+		@include color-classes();		
+
+		// Floating
+		.floatl { float: left; }
+		.floatr { float: right; } 
+		.clear { clear: both; }
+		.clearfix { @include clearfix; }
+
+		// Typography
+		.roman { font-style: normal }
+		.italic { font-style: italic; }
+		.light { font-weight: 300; }
+		.regular { font-weight: 400; }
+		.medium { font-weight: 500; }
+		.semibold { font-weight: 600; }
+		.bold { font-weight: 700; }
+		.ff--base { font-family: $base-font-family; }
+		.ff--title { font-family: $title-font-family; }
+
+		.alignl { text-align: left; }
+		.alignr { text-align: right; }
+		.alignc { text-align: center; }
+
+		.font-xs { font-size: $extra-small-font-size; }
+		.font-sm { font-size: $small-font-size; }
+		.font-md { font-size: $base-font-size; }
+		.font-lg { font-size: $large-font-size; }
+		.font-xl { font-size: $extra-large-font-size; }
+
+		.font-h1 { @include font-size($h1-font-size); }
+		.font-h2 { @include font-size($h2-font-size); }
+		.font-h3 { @include font-size($h3-font-size); }
+		.font-h4 { @include font-size($h4-font-size); }
+		.font-h5 { @include font-size($h5-font-size); }
+		.font-h6 { @include font-size($h6-font-size); }
+
+		.font-lh-xs { line-height: $extra-small-font-size; }
+		.font-lh-sm { line-height: $small-font-size; }
+		.font-lh-md { line-height: $base-font-size; }
+		.font-lh-lg { line-height: $large-font-size; }
+		.font-lh-xl { line-height: $extra-large-font-size; }
+
+		.resetcase { text-transform: initial; }
+		.lowercase { text-transform: lowercase; }
+		.uppercase { text-transform: uppercase; }
+		.capitalize { text-transform: capitalize; }
+
+		.strike { text-decoration: line-through; }
+		.underline { text-decoration: underline; }
+
+		.text-inverted { color: color('text-inverted', 'general'); }
+
+		// Line-height
+		.line-height-xs { line-height: $extra-small-element-height; }
+		.line-height-sm { line-height: $small-element-height; }
+		.line-height-md { line-height: $base-element-height; }
+		.line-height-lg { line-height: $large-element-height; }
+		.line-height-xl { line-height: $extra-large-element-height; }
+		.line-height-reset { line-height: normal; }
+
+		// Display and visibility
+		body.noscript .noscript { display: none !important; }
+		
+		.full-width-fix { margin: 0 ($grid-columns-spacing * -1); }
+		.full-width-fix-i { margin: 0 ($grid-columns-spacing * -1) !important; }
+		.full-width { width: 100% !important; }
+		.full-height { height: 100% !important; }
+		.invisible { visibility: hidden; }
+		.hide { display: none !important; }
+		.inline { display: inline; }
+		.inline-i { display: inline !important; }
+		.block { display: block; }
+		.block-i { display: block !important; }
+		.inline-block { display: inline-block; }
+		.inline-block-i { display: inline-block !important; }
+		.overflow-hidden { overflow: hidden; }
+		.overflow-auto { overflow: auto; }
+		.overflow-scroll { overflow: scroll !important; }
+		.overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+		.overflow-visible { overflow: visible; }
+		.scrollable { 
+			overflow-x: hidden;
+			overflow-y: auto;
+			-webkit-overflow-scrolling: touch;
+
+			@include breakpoint('md') {
+				overflow-y: scroll;
+
+				&>.container,
+				&>.container-fluid {
+					min-height: calc(100% + 10px)
+				}
+			}
+
+			height: 100%;
+
+			@include modifier('absolute') {
+				@include position(absolute, 0 null null 0);
+
+				max-height: 100%;
+			}			
+		}
+		.v-alignc { vertical-align: middle; }
+		.v-alignc-transform { @include transform(translateY(-25%)); }
+		.paragraph-readable { max-width: map-get($breakpoints, 'sm'); }
+		.paragraph-readable--xs { max-width: map-get($breakpoints, 'xs'); }		
+
+		// Sizes
+		.size {
+			@each $size in $sizes {
+				@include modifier($size) {				
+					height: map-get($button-sizes, $size);
+
+					font-size: map-get($font-sizes, $size);
+					line-height: map-get($button-sizes, $size);
+				}
+			}
+		}
+
+		// Margin & Paddings
+		$spacing: (
+			1: $extra-small-spacing,
+			2: $small-spacing,
+			3: $base-spacing,
+			4: $large-spacing,
+			5: $extra-large-spacing
+		);
+
+		.mg-none-i { margin: 0 !important; }
+		.mg-x-none-i { margin-left: 0 !important; margin-right: 0 !important; }
+		.mg-y-none-i { margin-top: 0 !important; margin-bottom: 0 !important; }
+
+		@each $name, $space in $spacing {
+			.mg-lv#{$name} { margin: $space; }
+			.mg-lv#{$name}-i { margin: $space !important; }
+			.mg-top-lv#{$name} { margin-top: $space; }
+			.mg-top-lv#{$name}-i { margin-top: $space !important; }
+			.mg-right-lv#{$name} { margin-right: $space; }
+			.mg-right-lv#{$name}-i { margin-right: $space !important; }
+			.mg-bottom-lv#{$name} { margin-bottom: $space; }
+			.mg-bottom-lv#{$name}-i { margin-bottom: $space !important; }
+			.mg-left-lv#{$name} { margin-left: $space; }
+			.mg-left-lv#{$name}-i { margin-left: $space !important; }
+		}
+
+		.mg-none { margin: 0; }
+		.mg-x-none { margin-left: 0; margin-right: 0; }
+		.mg-y-none { margin-top: 0; margin-bottom: 0; }
+
+		.pd-none-i { padding: 0 !important; }
+		.pd-x-none-i { padding-left: 0 !important; padding-right: 0 !important; }
+		.pd-y-none-i { padding-top: 0 !important; padding-bottom: 0 !important; }
+
+		@each $name, $space in $spacing {
+			.pd-lv#{$name} { padding: $space; }
+			.pd-lv#{$name}-i { padding: $space !important; }
+			.pd-top-lv#{$name} { padding-top: $space; }
+			.pd-top-lv#{$name}-i { padding-top: $space !important; }
+			.pd-right-lv#{$name} { padding-right: $space; }
+			.pd-right-lv#{$name}-i { padding-right: $space !important; }
+			.pd-bottom-lv#{$name} { padding-bottom: $space; }
+			.pd-bottom-lv#{$name}-i { padding-bottom: $space !important; }
+			.pd-left-lv#{$name} { padding-left: $space; }
+			.pd-left-lv#{$name}-i { padding-left: $space !important; }
+		}
+
+		.pd-none { padding: 0; }
+		.pd-x-none { padding-left: 0; padding-right: 0; }
+		.pd-y-none { padding-top: 0; padding-bottom: 0; }		
+
+		.push-left { margin-right: auto; }
+		.push-left-i { margin-right: auto !important; }
+		.push-right { margin-left: auto; }
+		.push-right-i { margin-left: auto !important; }
+		.push-center { 
+			margin-left: auto;
+			margin-right: auto;
+		 }
+		.push-center-i { 
+			margin-left: auto !important;
+			margin-right: auto !important;
+		 }
+		
+		.show-phone,
+		.show-phone-i,
+		.show-mobile,
+		.show-mobile-i,
+		.show-tablet,
+		.show-tablet-i,
+		.hide-desktop {
+			display: none !important;
+		}
+
+		@include breakpoint('sm', 'max') { 
+			.full-width-phone { width: 100%; }
+			.left-on-phone { text-align: left; }
+			.nofloat-phone { float: none; }
+			.show-phone { display: inherit !important; }
+			.show-phone-i { display: inherit !important; }
+		}
+
+		@include breakpoint('md', 'max') {
+			.full-width-mobile { width: 100%; }
+			.show-mobile { display: inherit !important; }
+			.show-mobile-i { display: inherit !important; }
+		}
+
+		@include breakpoint('sm', 'max') {
+			.hide-phone { display: none !important; }
+		}
+
+		@include breakpoint('md', 'max') {
+			.hide-mobile { display: none !important; }
+		}
+
+		@include breakpoint('lg', 'max') {
+			.hide-tablet { display: none !important; }
+			.show-tablet { display: inherit !important; }
+			.show-tablet-i { display: inherit !important; }
+		}
+
+		@include breakpoint('lg', 'min') {
+			.hide-desktop { display: inherit !important; }
+		}
+
+		// Video
+		.video-wrapper {
+			position: relative;
+
+			overflow: hidden;
+
+			&::before {
+				display: block;
+
+				padding-bottom: 56.25%; // (1080 / 1920) * 100 (16:9 Aspect ratio)
+
+				content: '';
+			}
+
+			.video, iframe {
+				@include position(absolute, 0 null null 0); 
+
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		// Aspect ratio (name: width, height)
+		.aspect-ratio {
+			&::before {
+				display: block;
+
+				width: 100%;
+
+				content: '';
+			}
+
+			@each $name, $map in $aspect-ratios {
+				@if (unitless(nth($map, 1)) and unitless(nth($map, 2))) {
+					$width: nth($map, 1);
+					$height: nth($map, 2);
+					$ratio: ($height / $width) * 100;
+
+					@include modifier($name) {
+						&::before {
+							padding: 0 0 $ratio + 0%;
+						}
+					}
+				}
+			}
+		}
+
+		// Other
+		.notransition {
+			@include transition(none !important);
+		}
+
+		.disabled {
+			opacity: .4;
+
+			pointer-events: none !important;
+			
+			* {
+				pointer-events: none !important;
+			}
+		}	
+
+		@for $i from 1 through 10 {
+			$percentage: ($i * 10) / 100;
+
+			.opacity-#{$i} {
+				opacity: $percentage;
+			}
+		}
+	}
+} // End if