bobjoll 0.0.4

package/scss/modules/variables/_general.scss

@@ -0,0 +1,235 @@
+// Aspect ratio
+$aspect-ratios: (
+	'100': (100, 100),
+	'75': (100, 75),
+	'16-9': (16, 9),
+	'4-3': (4, 3)
+) !default;
+
+// Profile login
+$profile-login-max-width: 560px !default;
+
+// Avatar
+$avatar-width-xs: 36px !default;
+$avatar-height-xs: $avatar-width-xs !default;
+$avatar-width-sm: 44px !default;
+$avatar-height-sm: $avatar-width-sm !default;
+$avatar-width-md: 64px !default;
+$avatar-height-md: $avatar-width-md !default;
+$avatar-width-lg: 128px !default;
+$avatar-height-lg: $avatar-width-lg !default;
+$avatar-width-xl: 164px !default;
+$avatar-height-xl: $avatar-width-xl !default;
+
+// Sizes
+$sizes: 'xs', 'sm', 'md', 'lg', 'xl' !default;
+
+// Base dimensions
+$extra-large-element-height: 64px !default;
+$large-element-height: 54px !default;
+$base-element-height: 44px !default;
+$small-element-height: 34px !default;
+$extra-small-element-height: 24px !default;
+$base-sizes: (
+	'xs': $extra-small-element-height,
+	'sm': $small-element-height,
+	'md': $base-element-height,
+	'lg': $large-element-height,
+	'xl': $extra-large-element-height 
+) !default;
+
+// Grid Settings
+$grid-columns: 12 !default;
+$grid-columns-spacing: 5px !default;
+
+// Shadow
+$base-box-shadow: 0 0 60px color('shadow', 'general', .25) !default;
+$inner-box-shadow: inset $base-box-shadow !default;
+
+// Buttons
+$extra-large-button-height: $extra-large-element-height !default;
+$large-button-height: $large-element-height !default;
+$base-button-height: $base-element-height !default;
+$small-button-height: $small-element-height !default;
+$extra-small-button-height: $extra-small-element-height !default;
+$button-sizes: (
+	'xs': $extra-small-button-height,
+	'sm': $small-button-height,
+	'md': $base-button-height,
+	'lg': $large-button-height,
+	'xl': $extra-large-button-height
+) !default;
+
+// Border
+$base-border-width: 1px !default;
+$base-border-radius: 3px !default;
+$base-border-style: solid !default;
+$base-border: $base-border-width $base-border-style color('border', 'general') !default;
+
+// Typography
+$base-font-family: 'Proxima Nova', 'Verdana', 'Avenir Next' !default;
+$title-font-family: $base-font-family !default;
+
+// Typography Sizes
+$extra-large-font-size: 22px !default;
+$large-font-size: 18px !default;
+$base-font-size: 16px !default;
+$small-font-size: 14px !default;
+$extra-small-font-size: 13px !default;
+
+$h1-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 40px,
+    'max-value': 46px,
+) !default;
+$h2-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 36px,
+    'max-value': 42px,
+) !default;
+$h3-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 32px,
+    'max-value': 38px,
+) !default;
+$h4-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 28px,
+    'max-value': 34px,
+) !default;
+$h5-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 24px,
+    'max-value': 30px,
+) !default;
+$h6-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 20px,
+    'max-value': 26px,
+) !default;   
+
+$font-sizes: (
+	'xs': $extra-small-font-size,
+	'sm': $small-font-size,
+	'md': $base-font-size,
+	'lg': $large-font-size,
+	'xl': $extra-large-font-size
+) !default;
+
+// Typography Weight
+$normal-font-weight: 400 !default;
+$semi-font-weight: 500 !default;
+$bold-font-weight: 600 !default;
+
+$font-weights: (
+	'normal': $normal-font-weight,
+	'semi': $semi-font-weight,
+	'bold': $bold-font-weight,
+) !default;
+
+// Icons
+$extra-large-icon-width: 24px !default;
+$extra-large-icon-height: $extra-large-icon-width !default;
+$large-icon-width: 20px !default;
+$large-icon-height: $large-icon-width !default;
+$base-large-icon-width: 18px !default;
+$base-large-icon-height: $base-large-icon-width !default;
+$base-icon-width: 16px !default;
+$base-icon-height: $base-icon-width !default;
+$small-icon-width: 14px !default;
+$small-icon-height: $small-icon-width !default;
+$extra-small-icon-width: 12px !default;
+$extra-small-icon-height: $extra-small-icon-width !default;
+
+$icon-sizes: (
+	'xs': (
+		'width': $extra-small-icon-width,
+		'height': $extra-small-icon-height
+	),
+	'sm': (
+		'width': $small-icon-width,
+		'height': $small-icon-width
+	),
+	'md': (
+		'width': $base-icon-width,
+		'height': $base-icon-height
+	),
+	'lg': (
+		'width': $large-icon-width,   
+		'height': $large-icon-height
+	),
+	'xl': (
+		'width': $extra-large-icon-width,
+		'height': $extra-large-icon-height
+	)
+) !default;
+
+// Inputs
+$extra-large-input-height: $extra-large-element-height !default;
+$large-input-height: $large-element-height !default;
+$base-input-height: $base-element-height !default;
+$small-input-height: $small-element-height !default;
+$extra-small-input-height: $extra-small-element-height !default;
+$input-sizes: (
+	'xs': $extra-small-input-height,
+	'sm': $small-input-height,
+	'md': $base-input-height,
+	'lg': $large-input-height,
+	'xl': $extra-large-input-height
+) !default;
+
+$extra-large-input-ui-height: 44px !default;
+$large-input-ui-height: 36px !default;
+$base-input-ui-height: 30px !default;
+$small-input-ui-height: 20px !default;
+$extra-small-input-ui-height: 16px !default;
+$input-ui-sizes: (
+	'xs': $extra-small-input-ui-height,
+	'sm': $small-input-ui-height,
+	'md': $base-input-ui-height,
+	'lg': $large-input-ui-height,
+	'xl': $extra-large-input-ui-height
+) !default;
+
+// Line Height
+$base-line-height: 1.6 !default;
+$extra-large-line-height: 2 !default;
+$large-line-height: 1.8 !default;
+$small-line-height: 1.4 !default;
+$extra-small-line-height: 1.2 !default;
+$title-line-height: 1.4 !default;
+$line-height-sizes: (
+	'xs': $extra-small-line-height,
+	'sm': $small-line-height,
+	'md': $base-line-height,
+	'lg': $large-line-height,
+	'xl': $extra-large-line-height
+) !default;
+
+// Spacing
+$extra-large-spacing: 50px !default;
+$large-spacing: 30px !default;
+$base-spacing: 20px !default;
+$small-spacing: 10px !default;
+$extra-small-spacing: 5px !default;
+$spacing-sizes: (
+	'xs': $extra-small-spacing,
+	'sm': $small-spacing,
+	'md': $base-spacing,
+	'lg': $large-spacing,
+	'xl': $extra-large-spacing
+) !default;
+
+// Triangle
+$base-triangle-size: 10px !default;
+
+// Shadow
+$base-box-shadow: 0 0 60px color('shadow', 'general', .25);
+$small-box-shadow: 0 0 30px color('shadow', 'general', .25);
+$inner-box-shadow: inset $base-box-shadow;

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