bobjoll 1.634.3

package/scss/partials/_notification-v1-1.scss

@@ -0,0 +1,297 @@
+@if $notification-v1-1 {
+    .notifications {
+        @include position(fixed, 0 null null 0);
+        
+        width: 100%;
+        height: 100%;
+        
+        pointer-events: none;
+
+        z-index: 1000;
+
+        %notification-position {
+            @include position(absolute, null null null null);
+        }
+
+        &__content {
+            padding-right: ($base-button-height - $base-spacing) + $extra-small-spacing;
+        }
+
+        @include element('top-left') {
+            @extend %notification-position;
+
+            top: 0;
+            left: 0;
+        }
+
+        @include element('top-right') {
+            @extend %notification-position;
+
+            top: 0;
+            right: 20px;
+        }
+
+        @include element('top-center') {
+            @extend %notification-position;
+
+            @include transform(translateX(-50%));
+
+            top: 0;
+            left: 50%;
+        }
+
+         @include element('bottom-left') {
+            @extend %notification-position;
+
+            bottom: 0;
+            left: 0;
+        }
+
+        @include element('bottom-right') {
+            @extend %notification-position;
+
+            bottom: 0;
+            right: 20px;
+        }
+
+        @include element('bottom-center') {
+            @extend %notification-position;
+
+            @include transform(translateX(-50%));
+
+            bottom: 0;
+            left: 50%;
+        }
+
+        @include element('center') {
+            @extend %notification-position;
+
+            @include transform(translate(-50%, -50%));
+
+            top: 50%;
+            left: 50%;
+        }
+    }    
+
+    .notification {
+        position: relative;
+
+        opacity: 0;
+
+        width: 90vw;
+        max-width: 680px;
+        min-height: $base-element-height;
+
+        margin: $base-spacing;
+        padding: $base-spacing;
+
+        border-radius: $base-border-radius;
+
+        background-color: color('notification', 'background');
+
+        box-shadow: $base-box-shadow;
+
+        pointer-events: all;
+
+        @include element('message') {
+            @include flex(1);
+
+            padding: $small-spacing $base-element-height $small-spacing $base-spacing;
+
+            font-size: $small-font-size;
+
+            font-weight: $semi-font-weight;
+        }
+
+        @include element('state') {
+            @extend .col--stretch;
+
+            overflow: hidden;        
+
+            position: relative;
+
+            top: $extra-small-spacing;
+            left: $extra-small-spacing;
+
+            width: $small-element-height;
+            height: $small-element-height;
+
+            border-radius: $base-border-radius;
+
+            background-color: rgba(#fff, .2);
+
+            .icon {
+                @include position(absolute, 50% null null 50%);
+                @include transform(translate(-50%, -50%))
+            }
+        }
+
+        @include element('close') {
+            &:not(.nostyle) {
+                @include position(absolute, 0 0 null null);
+                margin: $extra-small-spacing;
+                // @include transform(translate(50%, -50%));
+            }
+        }
+
+        @include element('triangle') {
+            @include position(absolute, null null null null);
+
+            &::before {
+                @include triangle($base-triangle-size, color('light', 'background'), down);
+
+                display: block;
+
+                content: '';
+            }
+        }
+
+        @include modifier('no-shadow') {
+            box-shadow: none;
+        }
+
+        @include modifier('static') {
+            width: 100%;
+            max-width: inherit;
+
+            margin: 0 0 $base-spacing;
+        }
+
+        @include modifier('absolute') {
+            @include position(absolute, null null null null);
+
+            margin: 0;
+
+            z-index: 99;
+        }        
+
+        @include modifier('alert') {
+            padding: 0;
+
+            .notification__content {
+                @extend %row-flexbox;
+                @extend .row--vertical-center;
+            }
+
+            .notification__close {
+                margin: ($base-element-height - $small-element-height) / 2;
+            }
+        }
+
+        @include modifier('error') {
+            background-color: color('red', 'state');
+
+            color: color('red', 'state-text');
+
+            a {
+                color: color('red', 'state-text', 0.75);
+                font-weight: bold;
+
+                &:hover {
+                    color: color('red', 'state-text');
+                }
+            }
+
+            .notification__state {
+                @if $icon-v2-0 {
+                    .icon:not(.nostyle) {
+                        @extend .icon--exclamation;
+                    }
+                }
+            }
+
+            .icon {
+                color: color('red', 'state-text');
+            }
+        }
+
+        @include modifier('warning') {
+            background-color: $yellow-shade-5;
+
+            color: color('yellow', 'state-text');
+
+            a {
+                color: color('yellow', 'state-text', 0.75);
+                font-weight: bold;
+
+                &:hover {
+                    color: color('yellow', 'state-text');
+                }
+            }
+
+            .notification__state {
+                @if $icon-v2-0 {
+                    .icon:not(.nostyle) {
+                        @extend .icon--exclamation;
+                    }
+                }
+            }
+
+            .icon {
+                color: color('yellow', 'state-text');
+            }
+        }
+
+        @include modifier('success') {
+            background-color: $green-shade-5;
+
+            color: color('green', 'state-text');
+
+            a {
+                color: color('green', 'state-text', 0.75);
+                font-weight: bold;
+
+                &:hover {
+                    color: color('green', 'state-text');
+                }
+            }
+
+            .notification__state {
+                @if $icon-v2-0 {
+                    .icon:not(.nostyle) {
+                        @extend .icon--check;
+                    }
+                }
+            }
+
+            .icon {
+                color: color('green', 'state-text');
+            }
+        }
+
+        @include modifier('neutral') {
+            background-color: color('blue', 'state');
+
+            color: color('blue', 'state-text');
+
+            a {
+                color: color('blue', 'state-text', 0.75);
+                font-weight: bold;
+
+                &:hover {
+                    color: color('blue', 'state-text');
+                }
+            }
+
+            .icon {
+                color: color('blue', 'state-text');
+            }
+        }
+
+        @include modifier('hide-disable') {
+            .notification__disable {
+                display: none;
+            }
+        }
+
+        @include modifier('hide-close') {
+            .notification__close {
+                display: none;
+            }
+        }
+
+        &--show {
+            opacity: 1;
+        }
+    }
+}

package/scss/partials/_progress-bar-v1.0.scss

@@ -0,0 +1,25 @@
+.progress-bar {
+    &__title {
+        font-size: $extra-small-font-size;
+        line-height: $extra-small-element-height;
+        color: color('hoki', 'gray');
+        margin-bottom: $extra-small-spacing;
+
+        &-complete {
+            color: color('jungle', 'green');
+        }
+    }
+
+    &__wrapper {
+        background: color('mystic', 'gray');
+        border-radius: 3px;
+        margin-bottom: $large-spacing;
+    }
+
+    &__value {
+        background: color('freepik', 'blue');
+        border-radius: 3px;
+        height: 5px;
+        width: 0;
+    }
+}

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

@@ -0,0 +1,75 @@
+@mixin range-track {
+    border-radius: 3px;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+@mixin range-thumb {
+    width: 22px;
+    height: 22px;
+    background: #ffffff;
+    border: 1px solid color('gaysir', 'gray');
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+@mixin range-thumb-focus {
+    transition: .3s box-shadow ease;
+    box-shadow: inset 0 0 0 6px color('gaysir', 'gray');
+}
+
+.range {
+    -webkit-appearance: none;
+    width: 100%;
+    background-color: color('mystic', 'gray');
+    height: 2px;    
+
+    &::-webkit-slider-runnable-track {
+        @include range-track;
+    }
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include range-thumb;
+    }
+
+    &::-moz-range-thumb {
+        @include range-thumb;
+    }
+
+    &:focus::-webkit-slider-thumb {
+        @include range-thumb-focus;
+    }
+
+    &:focus::-moz-range-thumb {
+        @include range-thumb-focus;
+    }
+
+    &--title {
+        font-size: $small-font-size;
+        line-height: 21px;
+        min-height: 21px;
+        color: color('bayoux', 'gray');
+        text-align: center;
+        margin: 0;
+    }
+
+    &--marks {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        color: color('gaysir', 'gray');
+        font-size: 10px;
+
+        .mark {            
+            &::after {
+                content: '|';
+            }
+
+            &.active {
+                color: color('bali', 'gray');
+            }
+        }
+    }
+}

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

@@ -0,0 +1,128 @@
+$minmax: 'min', 'max';
+
+@mixin triangle-tooltip($position) {
+    .tooltip__content::before {
+        @include triangle($base-spacing, color('campu', 'blue'), $position);
+    }
+}
+
+@mixin style-tooltip {
+    &:not(.tooltip--permanent).tooltip__container:hover {
+        display: block !important;
+        opacity: 1;
+        visibility: initial;
+    }
+
+    .notification__close {
+        box-shadow: none !important;
+        color: $gray-oxford;
+        background: $gray-aqua;
+
+        .icon {
+            color: color('icon-inverted', 'general');
+        }
+
+        &:hover {
+            background: $gray-aqua;
+        }
+    }
+
+    .button--tooltip {
+        background-color: #ffffff;
+
+        &:hover {
+            color: color('oxford', 'gray');
+        }
+    }
+
+    &.tooltip__container--blue {
+        &.tooltip__container--right {
+            @include triangle-tooltip(left);
+        }
+
+        &.tooltip__container--left {
+            @include triangle-tooltip(right);
+        }
+
+        &.tooltip__container--top {
+            @include triangle-tooltip(down);
+        }
+
+        &.tooltip__container--bottom {
+            @include triangle-tooltip(up);
+        }
+
+        .tooltip__content {
+            max-width: 300px;
+            padding: $large-spacing $large-spacing $base-spacing;
+            border-radius: $base-border-radius;
+            font-size: $small-font-size;
+            text-align: left;
+            background-color: color('campu', 'blue');
+            color: color('text-inverted', 'general');
+
+            .notification__close {
+                color: #ffffff;
+                background: color('campu', 'blue');
+
+                &:hover {
+                    background: color('freepik', 'blue');
+                }
+            }
+
+            .button--link {
+                color: #ffffff;
+
+                &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                }
+            }
+        }
+    }
+}
+
+@mixin show-tooltip {
+    display: block;
+    opacity: 0;
+    animation: tooltipFixed__active 250ms 1100ms cubic-bezier(.25, .1, .25, 1) forwards;
+}
+
+@keyframes tooltipFixed__active {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@if $tooltipFixed-v1-0 {
+    .tooltipFixed > .tooltip__container:not(.tooltipFixed__active) {
+        display: none;
+    }
+
+    .tooltipFixed__active {
+        @include style-tooltip;
+
+        &.tooltipFixed__breakpoint {
+            @each $media in $sizes {
+                &-#{$media} {
+                    @each $from in $minmax {
+                        &--#{$from} {
+                            @include breakpoint($media, $from) {
+                                @include show-tooltip;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &:not(.tooltipFixed__breakpoint) {
+            @include breakpoint('sm', 'min') {
+                @include show-tooltip;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,201 @@
+@if $typography-v1-0 {
+	.copyright {
+		margin: 0;
+
+		font-size: $small-font-size;
+	}
+
+	.type {
+		display: inline-block;
+
+		margin: 0 0 $small-spacing;
+		padding: ($small-spacing / 10) 0;
+
+		border-bottom: $base-border;
+
+		font-size: $small-font-size;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+
+	.date {
+		margin: 0;
+
+		color: rgba(color('text', 'general'), .5);		
+	}
+
+	.author {		
+		font-size: $small-font-size;
+	}
+
+	.read-more {
+		position: relative;
+
+		padding: 0 ($small-spacing / 2) 0 0;
+
+		color: color('link', 'general');
+		font-size: $small-font-size;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+
+	hr {
+		width: 3em;
+		height: $base-border-width;
+
+		margin: 0 0 $base-spacing;
+
+		border: none;
+
+		background-color: color('border', 'general');
+	}
+
+	#{$all-headings} {		
+		margin: $base-spacing 0;
+		padding: 0;
+
+		color: color('heading', 'general');
+		font-family: $title-font-family;
+		line-height: $title-line-height;
+
+		&.first {
+			margin-top: 0;
+		}
+	}
+
+	#{$big-headings} {		
+		line-height: $extra-small-line-height;
+	}
+
+	#{$all-headings} {
+		&.category {
+			padding-bottom: $extra-small-spacing;
+
+			border-bottom: $base-border;
+			border-color: color('text', 'general', .15);
+
+			text-align: center;
+		}
+	}
+
+	.heading-inverted {
+		color: color('heading-inverted', 'general');
+	}
+
+	h1 { @include font-size($h1-font-size); }
+	h2 { @include font-size($h2-font-size); }
+	h3 { @include font-size($h3-font-size); }
+	h4 { @include font-size($h4-font-size); }
+	h5 { @include font-size($h5-font-size); }
+	h6 { @include font-size($h6-font-size); }
+
+	%link-inverted {
+		color: color('link-inverted', 'general', 1);
+
+		&:hover {
+			color: color('link-inverted', 'general', 1);
+
+			svg {
+				opacity: .8;
+			}
+		}
+
+		&.active {
+			color: color('link-inverted', 'general', 1);
+			font-weight: bold;
+
+			svg {
+				opacity: 1;
+			}
+		}
+
+		svg {
+			opacity: .4;
+		}
+		
+		&--hover-underline {
+			&:hover,
+			&.active {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	%link-hover {
+		&:hover {
+			color: color('link', 'general', 1, 4);
+
+			.icon {
+				color: color('link', 'general', 1, 4);
+			}
+		}
+
+		&.active {
+			color: color('link', 'general', 1, 4);
+			font-weight: $semi-font-weight;
+
+			.icon {
+				color: color('link', 'general', 1, 4);
+			}
+		}
+	}
+
+	.link {
+		@extend %link-hover;
+
+		color: color('link', 'general');
+
+		cursor: pointer;
+		font-weight: $semi-font-weight;
+		text-decoration: none;
+		
+		.icon {
+			color: color('link', 'general');
+		}
+		
+		&--text {
+			@extend %link-hover;
+
+			color: color('text', 'general', 1, 4);
+
+			.icon {
+				color: color('text', 'general', 1, 4);
+			}
+		}
+
+		&--inverted {
+			@extend %link-inverted;
+		}
+	}
+
+	.link-inverted {
+		@extend %link-inverted;
+	}
+
+	.text, p {
+		margin: 0 0 $base-spacing;
+	}
+
+	.text--inverted {
+		color: color('text-inverted', 'general');
+	}
+
+	blockquote {
+		margin: 0;
+		padding-left: $base-spacing;
+		border-left: 4px solid color('border', 'general');
+	}
+
+	figcaption {
+		color: color('text', 'general', 1, -20);
+		font-size: $small-font-size;
+	}
+
+	svg {
+		pointer-events: none;
+	}
+
+	a {
+		@extend .link;
+	}
+} // End if