bobjoll 0.0.4

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

package/scss/partials/animations/_fade.scss

@@ -0,0 +1,23 @@
+.animation--fade-in {
+	animation: fade-in $base-duration $base-timing forwards;
+}
+
+.animation--fade-out {
+	animation: fade-out $base-duration $base-timing forwards;
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	} 100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+	} 100% {
+		opacity: 0;
+	}
+}

package/scss/partials/animations/_rotate.scss

@@ -0,0 +1,11 @@
+.animation--rotate {
+	animation: rotate 600ms linear infinite;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    } 100% {
+        transform: rotate(360deg);
+    }
+}

package/scss/partials/animations/_scale.scss

@@ -0,0 +1,23 @@
+.animation--scale-in {
+	animation: scale-in $base-duration $base-timing forwards;
+}
+
+.animation--scale-out {
+	animation: scale-out $base-duration $base-timing forwards;
+}
+
+@keyframes scale-in {
+	0% {
+		transform: scale(0);
+	} 100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes scale-out {
+	0% {
+		transform: scale(1);
+	} 100% {
+		transfrom: scale(0);
+	}
+}

package/scss/partials/animations/_slide.scss

@@ -0,0 +1,31 @@
+@keyframes slide-top-in {
+	0% {
+		top: -100%;
+	} 100% {
+		top: 0%;
+	}
+}
+
+@keyframes slide-top-out {
+	0% {
+		top: 0%;
+	} 100% {
+		top: -100%;
+	}
+}
+
+@keyframes slide-bottom-in {
+	0% {
+		bottom: -100%;
+	} 100% {
+		bottom: 0%;
+	}
+}
+
+@keyframes slide-bottom-out {
+	0% {
+		bottom: 0%;
+	} 100% {
+		bottom: -100%;
+	}
+}