bobjoll 0.0.4

package/scss/partials/button-v4-0/_component.scss

@@ -0,0 +1,304 @@
+@import 'settings';
+
+@if $button-v4-0 {
+    $defaultSize: map-get($defaultSettings, 'defaultSize');
+    $defaultStyle: map-get($defaultSettings, 'defaultStyle');
+    $defaultColor: map-get($defaultSettings, 'defaultColor');
+    $defaultStyles: map-get($buttonStyles, $defaultStyle);
+
+    #{$all-buttons} {
+        @include prefixer(appearance, none, webkit moz ms);
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: none;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    .#{$defaultPrefix} {
+        position: relative;
+        display: inline-block;
+        border: none;
+        border-radius: $buttonBorderRadius;
+        padding: $buttonPadding;
+        text-align: center;
+        font-weight: $defaultFontWeight;
+        text-decoration: none;
+        cursor: pointer;
+
+        @each $name, $value in map-get($defaultSizeMap, 'propertiesButton') {
+            #{$name}: #{$value};
+        }
+
+        @each $name, $map in $defaultColorMap {
+            @if ($name == 'default') {
+                transition: $defaultDuration $defaultTiming;
+                @each $propertyRealName, $propertyKey in $defaultStyles {
+                    @each $name, $value in $map {
+                        @if ($name == $propertyRealName) {
+                            #{$name}: #{$value};
+                        }
+                    }
+                }
+            }
+
+            @if ($name == 'hover') {
+                &:hover {
+                    @each $name, $value in $map {
+                        #{$name}: #{$value};
+                    }
+                }
+            }
+
+            @if ($name == 'active') {
+                &.active {
+                    @each $name, $value in $map {
+                        #{$name}: #{$value};
+                    }
+                }
+            }
+        }
+
+        &::after {
+            display: table;
+            clear: both;
+            content: '';
+        }
+
+        &--auto {
+            @include getComponent(#{$defaultPrefix}--auto);
+        }
+
+        &--state {
+            @include getComponent(#{$defaultPrefix}--state);
+        }
+
+        &--icon {
+            @include getComponent(#{$defaultPrefix}--icon);
+        }
+
+        &--fullwidth {
+            @include getComponent(#{$defaultPrefix}--fullwidth);
+        }
+
+        &.disabled {
+            opacity: 0.4;
+            pointer-events: none;
+        }
+
+        @each $size, $map in $buttonSizes {
+            &--#{$size} {
+                @include getComponent(#{$defaultPrefix}--#{$size});
+            }
+        }
+
+        @each $style, $map in $buttonStyles {
+            &--#{$style} {
+                @include getComponent(#{$defaultPrefix}--#{$style});
+            }
+        }
+
+        span ~ i,
+        i ~ span {
+            margin-left: $small-spacing;
+        }
+
+        span {
+            float: left;
+        }
+
+        i {
+            float: left;
+            color: inherit !important;
+            fill: inherit !important;
+
+            @if $icon-v2-0 {
+                @extend %icon;
+            }
+
+            @each $name, $value in map-get($defaultSizeMap, 'propertiesIcon') {
+                #{$name}: #{$value};
+            }
+
+            &::before {
+                display: block;
+            }
+        }
+    }
+
+    @include setComponent(#{$defaultPrefix}--auto) {
+        height: auto !important;
+        padding-top: $small-spacing;
+        padding-bottom: $small-spacing;
+        line-height: 1 !important;
+
+        span {
+            float: none !important;
+        }
+    }
+
+    @include setComponent(#{$defaultPrefix}--state) {
+        &:not(.active) .state--inactive,
+        &.active .state--active {
+            display: block;
+        }
+
+        .state--active,
+        .state--inactive {
+            display: none;
+        }
+    }
+
+    @include setComponent(#{$defaultPrefix}--icon) {
+        padding: 0 !important;
+
+        i {
+            float: inherit !important;
+            margin: 0 auto;
+        }
+    }
+
+    @include setComponent(#{$defaultPrefix}--fullwidth) {
+        @include prefixer(display, flex, ms spec);
+        @include prefixer(align-items, center, ms spec);
+        @include prefixer(justify-content, center, ms spec);
+        width: 100%;
+    }
+
+    @include setComponent(#{$defaultPrefix}--google) {
+        $defaultButtonSize: map-get($buttonSizes, 'md');
+        $defaultIconProperties: map-get($defaultButtonSize, 'propertiesIcon');
+        $defaultFontSize: map-get($defaultIconProperties, 'font-size');
+
+        i {
+            display: inline-block;
+            width: $defaultFontSize;
+            height: 100%;
+            background: url('~bobjoll/images/icons/google.svg') no-repeat center center;
+            background-size: contain;
+
+            &::before {
+                display: none;
+            }
+        }
+
+        @each $size, $map in $buttonSizes {
+            &.#{defaultPrefix}--#{$size} {
+                $properties: map-get($map, 'propertiesIcon');
+                $font-size: map-get($properties, 'font-size');
+
+                i {
+                    width: $font-size;
+                }
+            }
+        }
+    }
+
+    @each $size, $map in $buttonSizes {
+        @include setComponent(#{$defaultPrefix}--#{$size}) {
+            @each $propertyName, $propertyValue in map-get($map, 'propertiesButton') {
+                #{$propertyName}: #{$propertyValue};
+            }
+
+            i {
+                @each $propertyName, $propertyValue in map-get($map, 'propertiesIcon') {
+                    #{$propertyName}: #{$propertyValue};
+                }
+            }
+        }
+    }
+
+    @each $buttonStyle, $buttonProperties in $buttonStyles {
+        @include setComponent(#{$defaultPrefix}--#{$buttonStyle}) {
+            @each $propertyRealName, $propertyKey in $buttonProperties {
+                // default styles
+                @each $colorName, $colorMap in $defaultColorMap {
+                    @if ('default' == $colorName) {
+                        @each $propertyName, $propertyValue in $colorMap {
+                            @if ($propertyKey==$propertyName) {
+                                #{$propertyRealName}: #{$propertyValue};
+                            }
+                        }
+                    }
+                    @if ('hover' == $colorName) {
+                        &:hover,
+                        &:focus {
+                            @each $propertyName, $propertyValue in $colorMap {
+                                @if ($propertyKey==$propertyName) {
+                                    #{$propertyRealName}: #{$propertyValue};
+                                }
+                            }
+                        }
+                    }
+                    @if ('active' == $colorName) {
+                        &.active {
+                            @each $propertyName, $propertyValue in $colorMap {
+                                @if ($propertyKey==$propertyName) {
+                                    #{$propertyRealName}: #{$propertyValue};
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @each $buttonStyle, $buttonProperties in $buttonStyles {
+        $prefix: #{$defaultPrefix};
+        @if ($buttonStyle != map-get($buttonSettings, 'defaultStyle')) {
+            $prefix: '#{$defaultPrefix}--#{$buttonStyle}.#{$defaultPrefix}';
+        }
+        @each $colorName, $colorProperties in $buttonColors {
+            $ignoreStyles: map-get($colorProperties, 'ignoreStyles');
+            $ignoreStyle: index($ignoreStyles, $buttonStyle);
+            @if (null == $ignoreStyle) {
+                @include setComponent(#{$prefix}--#{$colorName}) {
+                    @each $propertyRealName, $propertyKey in $buttonProperties {
+                        @each $colorState, $colorStateMap in $colorProperties {
+                            @if ($colorState == 'default') {
+                                @each $propertyName, $propertyValue in $colorStateMap {
+                                    @if ($propertyKey == $propertyName) {
+                                        #{$propertyRealName}: #{$propertyValue};
+                                    }
+                                }
+                            }
+                            @if ($colorState == 'hover') {
+                                &:hover,
+                                &:focus {
+                                    @each $propertyName, $propertyValue in $colorStateMap {
+                                        @if ($propertyKey == $propertyName) {
+                                            #{$propertyRealName}: #{$propertyValue};
+                                        }
+                                    }
+                                }
+                            }
+
+                            @if ($colorState == 'active') {
+                                &.active {
+                                    @each $propertyName, $propertyValue in $colorStateMap {
+                                        @if ($propertyKey == $propertyName) {
+                                            #{$propertyRealName}: #{$propertyValue};
+                                        }
+                                    }
+                                }
+                            }
+
+                            @if ($colorState == 'propertiesIcon') {
+                                i {
+                                    @each $propertyName, $propertyValue in $colorStateMap {
+                                        #{$propertyName}: #{$propertyValue};
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                .#{$prefix}--#{$colorName} {
+                    @include getComponent(#{$prefix}--#{$colorName});
+                }
+            }
+        }
+    }
+}

package/scss/partials/form/_checkbox-and-radio-v1-0.scss

@@ -0,0 +1,187 @@
+@if $form-v1-0 {
+	%checked-indicator {
+		@include transition(
+			box-shadow $base-duration $base-timing
+			background-color $base-duration $base-timing
+		);
+
+		box-shadow: inset 0 0 0 $extra-large-input-height color('link', 'general');
+
+		.icon {
+			@include transform(scale(1));
+			@include transition(
+				opacity $base-duration $base-duration $base-timing,
+				transform $base-duration $base-duration $base-timing
+			);
+
+			opacity: 1;
+		}
+	}
+
+	%checked-link {
+		opacity: 1;
+	}
+	
+	%spacing {
+		margin-left: $small-spacing;
+	}
+
+	.checkbox,
+	.radio {
+		@extend %row-flexbox;
+		@extend .row--vertical-center;
+
+		cursor: pointer;
+
+		padding: (($base-element-height - $base-input-ui-height) / 2) 0;
+
+		&.active .checkbox__indicator,
+		&.active .radio__indicator {
+			@extend %checked-indicator;
+		}
+
+		&.active .checkbox__link,
+		&.active .radio__link {
+			@extend %checked-link;
+		}
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			display: none;
+
+			&:checked ~ .checkbox__indicator,
+			&:checked ~ .radio__indicator {
+				@extend %checked-indicator;
+			}
+
+			&:checked ~ .checkbox__link,
+			&:checked ~ .checkbox__link {
+				@extend %checked-link;
+			}
+		}
+
+		@include element('indicator') {
+			display: block;
+
+			width: $base-input-ui-height;
+			height: $base-input-ui-height;
+
+			border-radius: $base-border-radius;
+
+			background-color: color('input', 'background');
+
+			box-shadow: inset 0 0 0 $base-border-width color('border', 'general', 1, 10);
+
+			.icon {
+				@include transform(scale(0));
+				@include transition(
+					opaicty $base-duration $base-timing,
+					transform $base-duration $base-timing
+				);
+
+				opacity: 0;
+
+				width: $base-input-ui-height;
+				height: $base-input-ui-height;
+
+				padding: (($base-input-ui-height - ($base-input-ui-height * .8)) / 2);
+				
+				color: color('input', 'background');
+				fill: color('input', 'background');
+				font-size: $base-input-ui-height * .8;
+				line-height: $base-input-ui-height * .8;
+			}
+		}
+
+		@include element('link') {
+			@include transition(opacity $base-duration $base-timing);
+			@include user-select(none);
+
+			display: inline;
+
+			flex: 1;
+
+			height: $base-input-ui-height;
+
+			line-height: $base-input-ui-height;
+		}
+
+		@include modifier('inverted') {
+			color: color('text-inverted', 'general', 1);
+
+			input[type="checkbox"]:checked + .checkbox__indicator,
+			input[type="radio"]:checked + .radio__indicator {
+				background-color: color('input', 'background');
+
+				// box-shadow: inset 0 0 0 ($base-input-ui-height) color('link', 'general');
+
+				.icon {
+					color: color('link', 'general');
+				}
+			}
+		}
+
+		// Sizes
+		@each $size in $sizes {		
+			$checkbox-width: map-get($input-ui-sizes, $size);
+			$checkbox-height: $checkbox-width;
+			$icon-size: $checkbox-width * .8;
+
+			@include modifier($size) {
+				padding: (($base-element-height - $checkbox-height) / 2) 0;
+
+				.checkbox__indicator,
+				.radio__indicator {
+					width: $checkbox-width;
+					height: $checkbox-height;				
+
+					.icon {
+						width: $checkbox-width;
+						height: $checkbox-height;
+
+						padding: ($checkbox-width - $icon-size) / 2;
+
+						font-size: $icon-size;
+						line-height: $icon-size;
+					}
+				}
+
+				.checkbox__link,
+				.radio__link {
+					height: $checkbox-height;
+
+					line-height: $checkbox-height;
+				}
+			}
+		} // End sizes
+	}
+
+	.checkbox {
+		.checkbox__indicator ~ .checkbox__link,
+		.checkbox__link ~ .checkbox__indicator {
+			@extend %spacing;
+		}
+	}
+
+	.radio {
+		.radio__indicator ~ .radio__link,
+		.radio__link ~ .radio__indicator {
+			@extend %spacing;
+		}
+
+		.radio__indicator {
+			border-radius: 50%;
+		}
+
+		&.active .radio__indicator, 
+		input[type="radio"]:checked ~ .radio__indicator {
+			box-shadow: inset 0 0 0 5px color('link', 'general');
+		}
+
+		@include modifier('inverted') {
+			input[type="radio"]:checked ~ .radio__indicator {
+				box-shadow: inset 0 0 0 5px color('link', 'general');
+			}
+		}
+	}
+}