CSS naming & variables file

elastic · Mar 21, 2019 · 21ff5a6 · 21ff5a6
1 parent f1f29ab
commit 21ff5a6
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/src/components/loading/_index.scss b/src/components/loading/_index.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 @import 'mixins';
 @import 'loading_kibana';
 @import 'loading_chart';

diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
@@ -1,30 +1,27 @@
-$gradientStartStop: shadeOrTint($euiColorLightestShade, 8%, 12%);
-$gradientMiddle: shadeOrTint($euiColorLightestShade, 2%, 4%);
-
 .euiLoadingContent__loader {
   width: 100%;
 }
 
-.euiLoadingContent__single-line {
+.euiLoadingContent__singleLine {
   height: $euiSize;
   margin-bottom: $euiSizeS;
   border-radius: $euiBorderRadius;
   width: 100%;
-  background-size: 200% 100% !important; // sass-lint:disable-line no-important
   background: linear-gradient(
     to right,
-    $gradientStartStop 8%,
-    $gradientMiddle 18%,
-    $gradientStartStop 33%,
-  );
-  animation: GradientLoad 1.5s $euiAnimSlightResistance infinite;
+    $euiGradientStartStop 8%,
+    $euiGradientMiddle 18%,
+    $euiGradientStartStop 33%,
+    );
+  background-size: 200% 100%;
+  animation: euiLoadingContentGradientLoad 1.5s $euiAnimSlightResistance infinite;
 
   &:last-child:not(:only-child) {
     width: 75%;
   }
 }
 
-@keyframes GradientLoad {
+@keyframes euiLoadingContentGradientLoad {
   0% {
     background-position: 100% 0%;
   }

diff --git a/src/components/loading/_variables.scss b/src/components/loading/_variables.scss
@@ -0,0 +1,2 @@
+$euiGradientStartStop: tintOrShade($euiColorLightShade, 5%, 12%);
+$euiGradientMiddle: tintOrShade($euiColorLightShade, 50%, 24%);
diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx
@@ -15,7 +15,7 @@ export const EuiLoadingContent: FunctionComponent<
 
   for (let i = 0; i < lines; i++) {
     lineElements.push(
-      <div key={i} className="euiLoadingContent__single-line" />
+      <div key={i} className="euiLoadingContent__singleLine" />
     );
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$euiGradientStartStop: tintOrShade($euiColorLightShade, 5%, 12%);
		$euiGradientMiddle: tintOrShade($euiColorLightShade, 50%, 24%);