Breaking: (Fixes #394) Loading Indicators removed `.loading-icon-line…

…ar`, `.loading-icon-linear-light`, and associated variables and mixin
liferay · Dec 13, 2017 · 7d90837 · 7d90837
1 parent cb7179c
commit 7d90837
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 147 deletions.
diff --git a/src/scss/atlas/variables/_buttons.scss b/src/scss/atlas/variables/_buttons.scss
@@ -53,8 +53,7 @@ $btn-secondary: (
 	active-color: $body-color,
 	active-bg: lighten(saturate(adjust-hue($secondary, -12), 8.51), 49.61),
 	active-box-shadow: none,
-	loading-icon-dotted: '',
-	loading-icon-linear: ''
+	loading-icon-dotted: ''
 ) !default;
 
 $btn-success: (
@@ -85,8 +84,7 @@ $btn-warning: (
 	active-bg: darken($warning, 8%),
 	active-border-color: transparent,
 	active-box-shadow: none,
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ) !default;
 
 $btn-danger: (

diff --git a/src/scss/atlas/variables/_loaders.scss b/src/scss/atlas/variables/_loaders.scss
@@ -1,8 +1,3 @@
-$loading-icon-linear: () !default;
-$loading-icon-linear: map-merge((
-	color: $secondary
-), $loading-icon-linear);
-
 $loading-icon-dotted: () !default;
 $loading-icon-dotted: map-merge((
 	color: $secondary

diff --git a/src/scss/components/_loaders.scss b/src/scss/components/_loaders.scss
@@ -26,24 +26,6 @@
 	@extend %loading-icon-dotted-light !optional;
 }
 
-// Loading Icon Linear
-
-%loading-icon-linear {
-	@include clay-loading-icon-linear-variant($loading-icon-linear);
-}
-
-%loading-icon-linear-light {
-	@include clay-loading-icon-linear-variant($loading-icon-linear-light);
-}
-
-.loading-icon-linear {
-	@extend %loading-icon-linear !optional;
-}
-
-.loading-icon-linear-light {
-	@extend %loading-icon-linear-light !optional;
-}
-
 // Loading Icon Sizes
 
 .loading-icon-sm {

diff --git a/src/scss/mixins/_buttons.scss b/src/scss/mixins/_buttons.scss
@@ -26,7 +26,6 @@
 	$active-box-shadow: map-get($map, active-box-shadow);
 	$active-color: map-get($map, active-color);
 	$loading-icon-dotted: map-get($map, loading-icon-dotted);
-	$loading-icon-linear: map-get($map, loading-icon-linear);
 
 	background-color: $bg;
 	border-color: $border-color;
@@ -75,8 +74,4 @@
 	.loading-icon-dotted {
 		@extend %#{$loading-icon-dotted} !optional;
 	}
-
-	.loading-icon-linear {
-		@extend %#{$loading-icon-linear} !optional;
-	}
 }
diff --git a/src/scss/mixins/_loaders.scss b/src/scss/mixins/_loaders.scss
@@ -111,91 +111,4 @@
 			}
 		}
 	}
-}
-
-@mixin clay-loading-icon-linear-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
-	$mixin-name: 'clay-loading-icon-linear-variant';
-
-	$border-width: setter(map-get($map, border-width), 0.15em);
-	$color: setter(map-get($map, color), $secondary);
-
-	$after-animation: setter(map-get($map, after-animation), 1.9s ease-out infinite both);
-	$after-animation-name: required(
-		map-get($map, after-animation-name),
-		'The property `after-animation-name` in #{$mixin-name} is required!'
-	);
-	$before-animation: setter(map-get($map, before-animation), 1.9s ease-out infinite both);
-	$before-animation-name: required(
-		map-get($map, before-animation-name),
-		'The property `before-animation-name` in #{$mixin-name} is required!'
-	);
-
-	@if ($enabled) {
-		.loading-icon-indicator {
-			display: inline-block;
-			height: 1em;
-			left: 0;
-			position: absolute;
-			top: 0;
-			width: 1em;
-
-			&:after,
-			&:before {
-				border: $border-width solid transparent;
-				border-left-color: $color;
-				border-radius: 50%;
-				content: '';
-				height: 100%;
-				position: absolute;
-				width: 100%;
-			}
-
-			&:after {
-				animation: $after-animation;
-				animation-name: $after-animation-name;
-			}
-
-			&:before {
-				animation: $before-animation;
-				animation-name: $before-animation-name;
-			}
-		}
-
-		@keyframes #{$after-animation-name} {
-			0%, 22% {
-				transform: rotate(0deg);
-			}
-
-			100% {
-				transform: rotate(360deg);
-			}
-		}
-
-		@keyframes #{$before-animation-name} {
-			0% {
-				transform: rotate(0deg);
-			}
-
-			10.99% {
-				border-bottom-color: transparent;
-			}
-
-			11% {
-				border-bottom-color: $color;
-			}
-
-			66% {
-				border-bottom-color: $color;
-			}
-
-			66.6% {
-				border-bottom-color: transparent;
-			}
-
-			66.6%, 100% {
-				transform: rotate(360deg);
-			}
-		}
-	}
 }
diff --git a/src/scss/variables/_buttons.scss b/src/scss/variables/_buttons.scss
@@ -37,44 +37,38 @@ $btn-toolbar-spacer-y: 0.125rem !default; // 2px
 
 $btn-primary: () !default;
 $btn-primary: map-merge((
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ), $btn-primary);
 
 $btn-secondary: () !default;
 $btn-secondary: map-merge((
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ), $btn-secondary);
 
 $btn-success: () !default;
 $btn-success: map-merge((
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ), $btn-success);
 
 $btn-info: () !default;
 $btn-info: map-merge((
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ), $btn-info);
 
 $btn-warning: () !default;
 $btn-warning: map-merge((), $btn-warning);
 
 $btn-danger: () !default;
 $btn-danger: map-merge((
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ), $btn-danger);
 
 $btn-light: () !default;
 $btn-light: map-merge((), $btn-light);
 
 $btn-dark: () !default;
 $btn-dark: map-merge((
-	loading-icon-dotted: 'loading-icon-dotted-light',
-	loading-icon-linear: 'loading-icon-linear-light'
+	loading-icon-dotted: 'loading-icon-dotted-light'
 ), $btn-dark);
 
 $btn-palette: () !default;

diff --git a/src/scss/variables/_loaders.scss b/src/scss/variables/_loaders.scss
@@ -2,22 +2,6 @@ $loading-icon-font-size: 2.5rem !default; // 40px
 
 $loading-icon-font-size-sm: 1.25rem !default; // 20px
 
-// Loading Icon Linear
-
-$loading-icon-linear: () !default;
-$loading-icon-linear: map-merge((
-	after-animation-name: loading-icon-spin,
-	before-animation-name: loading-icon-linear,
-	color: $body-color
-), $loading-icon-linear);
-
-$loading-icon-linear-light: () !default;
-$loading-icon-linear-light: map-merge((
-	after-animation-name: loading-icon-spin-light,
-	before-animation-name: loading-icon-linear-light,
-	color: #FFF
-), $loading-icon-linear-light);
-
 // Loading Icon Dotted
 
 $loading-icon-dotted: () !default;