earthnut 0.1.7-alpha.0 → 0.2.0

package/package.json

@@ -9,7 +9,7 @@
   },
   "type": "module",
   "name": "earthnut",
-  "version": "0.1.7-alpha.0",
+  "version": "0.2.0",
   "description": "earthnut 的 react ui",
   "overrides": {
     "css-loader": "6.11.0"
@@ -19,25 +19,15 @@
     "a-js-tools": "^1.0.12",
     "a-type-of-js": "^1.0.7",
     "styled-components": "^6.1.19",
-    "xcn": "^0.1.2"
+    "xcn": "^0.1.3"
   },
   "files": [
-    "705",
-    "BackgroundRipple",
     "components",
     "customHooks",
-    "Layout",
-    "LazyBackgroundRipple",
-    "styles",
-    "useAnimationFrame",
-    "useInputIsComposing",
-    "useLazyRipples",
-    "useRipples",
-    "useTimeId",
-    "dog.d.ts",
     "index.cjs",
+    "index.mjs",
     "index.d.ts",
-    "index.mjs"
+    "styles"
   ],
   "exports": {
     ".": {
@@ -45,46 +35,6 @@
       "require": "./index.cjs",
       "import": "./index.mjs"
     },
-    "./BackgroundRipple": {
-      "types": "./components/ripples/index.d.ts",
-      "require": "./BackgroundRipple/index.cjs",
-      "import": "./BackgroundRipple/index.mjs"
-    },
-    "./LazyBackgroundRipple": {
-      "types": "./components/ripples/index.d.ts",
-      "require": "./LazyBackgroundRipple/index.cjs",
-      "import": "./LazyBackgroundRipple/index.mjs"
-    },
-    "./useTimeId": {
-      "types": "./customHooks/useTimeId.d.ts",
-      "require": "./useTimeId/index.cjs",
-      "import": "./useTimeId/index.mjs"
-    },
-    "./useAnimationFrame": {
-      "types": "./customHooks/useAnimationFrame.d.ts",
-      "require": "./useAnimationFrame/index.cjs",
-      "import": "./useAnimationFrame/index.mjs"
-    },
-    "./useRipples": {
-      "types": "./customHooks/useRipples/index.d.ts",
-      "require": "./useRipples/index.cjs",
-      "import": "./useRipples/index.mjs"
-    },
-    "./useLazyRipples": {
-      "types": "./customHooks/useRipples/index.d.ts",
-      "require": "./useLazyRipples/index.cjs",
-      "import": "./useLazyRipples/index.mjs"
-    },
-    "./useInputIsComposing": {
-      "types": "./customHooks/useInputIsComposing.d.ts",
-      "require": "./useInputIsComposing/index.cjs",
-      "import": "./useInputIsComposing/index.mjs"
-    },
-    "./layout": {
-      "types": "./components/layout/index.d.ts",
-      "require": "./Layout/index.cjs",
-      "import": "./Layout/index.mjs"
-    },
     "./scss": "./styles/common.scss",
     "./css": "./styles/common.css"
   },

package/styles/common.css

@@ -1,163 +1,263 @@
 @charset "UTF-8";
 :root {
-  --primary-white: #ffffff;
-  --primary-black: #1b1b1b;
-  --primary-dust: #6f6f6f;
-  --primary-red: #d30038;
-  --primary-green: #007936;
-  --primary-blue: #0069c2;
-  --primary-yellow: #746a00;
-  --primary-super-yellow: #ffff00;
-  --text-primary: #1b1b1b;
-  --text-secondary: #4e4e4e;
-  --text-invert: var(--primary-white);
-  --text-muted: var(--primary-dust);
-  --text-link: #0069c2;
-  --text-visited: #551a8b;
-  --text-hover: var(--primary-red);
-  --text-visited: #551a8b;
-  --text-active: #858585;
-  --text-inactive: #9e9e9ea6;
-  --background-primary: var(--primary-white);
-  --background-tab-level-1: var(--primary-black);
-  --background-tab-level-2: var(--primary-dust);
-  --background-tab-transparent: #6666;
-  --table-border-color: #000;
-  --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
-  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
-  --box-shadow: 1px 1px 12px #6666;
-  --box-shadow-primary: 1px 1px 12px #6666;
-  --box-shadow-primary-small: 1px 1px 3px #6666;
-  --box-shadow-primary-large: 1px 1px 24px #6666;
+  --en-primary-white: $color-white;
+  --en-primary-black: #1b1b1b;
+  --en-primary-dust: #6f6f6f;
+  --en-primary-red: #d30038;
+  --en-primary-green: #007936;
+  --en-primary-blue: #0069c2;
+  --en-primary-yellow: #746a00;
+  --en-primary-super-yellow: #ffff00;
+  --en-text-primary: #1b1b1b;
+  --en-text-secondary: #4e4e4e;
+  --en-text-invert: var(--en-primary-white);
+  --en-text-muted: var(--en-primary-dust);
+  --en-text-link: #0069c2;
+  --en-text-visited: #551a8b;
+  --en-text-hover: var(--en-primary-red);
+  --en-text-visited: #551a8b;
+  --en-text-active: #858585;
+  --en-text-inactive: #9e9e9ea6;
+  --en-background-primary: var(--en-primary-white);
+  --en-background-tab-level-1: var(--en-primary-black);
+  --en-background-tab-level-2: var(--en-primary-dust);
+  --en-background-tab-transparent: #6666;
+  --en-table-border-color: #000;
+  --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+  --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+  --en-box-shadow: 1px 1px 12px #6666;
+  --en-box-shadow-primary: 1px 1px 12px #6666;
+  --en-box-shadow-primary-small: 1px 1px 3px #6666;
+  --en-box-shadow-primary-large: 1px 1px 24px #6666;
   color-scheme: light;
 }
 
 @media (prefers-color-scheme: light) {
   :root:not(.en-light):not(.en-dark) {
-    --primary-white: #ffffff;
-    --primary-black: #1b1b1b;
-    --primary-dust: #6f6f6f;
-    --primary-red: #d30038;
-    --primary-green: #007936;
-    --primary-blue: #0069c2;
-    --primary-yellow: #746a00;
-    --primary-super-yellow: #ffff00;
-    --text-primary: #1b1b1b;
-    --text-secondary: #4e4e4e;
-    --text-invert: var(--primary-white);
-    --text-muted: var(--primary-dust);
-    --text-link: #0069c2;
-    --text-visited: #551a8b;
-    --text-hover: var(--primary-red);
-    --text-visited: #551a8b;
-    --text-active: #858585;
-    --text-inactive: #9e9e9ea6;
-    --background-primary: var(--primary-white);
-    --background-tab-level-1: var(--primary-black);
-    --background-tab-level-2: var(--primary-dust);
-    --background-tab-transparent: #6666;
-    --table-border-color: #000;
-    --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
-    --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
-    --box-shadow: 1px 1px 12px #6666;
-    --box-shadow-primary: 1px 1px 12px #6666;
-    --box-shadow-primary-small: 1px 1px 3px #6666;
-    --box-shadow-primary-large: 1px 1px 24px #6666;
+    --en-primary-white: $color-white;
+    --en-primary-black: #1b1b1b;
+    --en-primary-dust: #6f6f6f;
+    --en-primary-red: #d30038;
+    --en-primary-green: #007936;
+    --en-primary-blue: #0069c2;
+    --en-primary-yellow: #746a00;
+    --en-primary-super-yellow: #ffff00;
+    --en-text-primary: #1b1b1b;
+    --en-text-secondary: #4e4e4e;
+    --en-text-invert: var(--en-primary-white);
+    --en-text-muted: var(--en-primary-dust);
+    --en-text-link: #0069c2;
+    --en-text-visited: #551a8b;
+    --en-text-hover: var(--en-primary-red);
+    --en-text-visited: #551a8b;
+    --en-text-active: #858585;
+    --en-text-inactive: #9e9e9ea6;
+    --en-background-primary: var(--en-primary-white);
+    --en-background-tab-level-1: var(--en-primary-black);
+    --en-background-tab-level-2: var(--en-primary-dust);
+    --en-background-tab-transparent: #6666;
+    --en-table-border-color: #000;
+    --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+    --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+    --en-box-shadow: 1px 1px 12px #6666;
+    --en-box-shadow-primary: 1px 1px 12px #6666;
+    --en-box-shadow-primary-small: 1px 1px 3px #6666;
+    --en-box-shadow-primary-large: 1px 1px 24px #6666;
     color-scheme: light;
   }
 }
 @media (prefers-color-scheme: dark) {
   :root:not(.en-light):not(.en-dark) {
-    --primary-white: #ffffff;
-    --primary-black: #1b1b1b;
-    --primary-dust: #858585;
-    --primary-red: #ff97a0;
-    --primary-green: #00d061;
-    --primary-blue: #8cb4ff;
-    --primary-yellow: #c7b700;
-    --text-primary: #fff;
-    --text-secondary: #cdcdcd;
-    --text-invert: var(--primary-black);
-    --text-muted: var(--primary-dust);
-    --text-link: #8cb4ff;
-    --text-visited: #ffadff;
-    --text-hover: var(--primary-red);
-    --text-active: #858585;
-    --text-inactive: #cdcdcda6;
-    --background-primary: var(--primary-black);
-    --background-tab-level-1: #666666;
-    --background-tab-level-2: var(--primary-dust);
-    --background-tab-transparent: #6666;
-    --table-border-color: #ff3663;
-    --box-shadow: 1px 1px 12px #6666;
-    --box-shadow-primary: 1px 1px 12px #6666;
-    --box-shadow-primary-small: 1px 1px 3px #6666;
-    --box-shadow-primary-large: 1px 1px 24px #6666;
+    --en-primary-white: #ffffff;
+    --en-primary-black: #1b1b1b;
+    --en-primary-dust: #858585;
+    --en-primary-red: #ff97a0;
+    --en-primary-green: #00d061;
+    --en-primary-blue: #8cb4ff;
+    --en-primary-yellow: #c7b700;
+    --en-text-primary: #fff;
+    --en-text-secondary: #cdcdcd;
+    --en-text-invert: var(--en-primary-black);
+    --en-text-muted: var(--en-primary-dust);
+    --en-text-link: #8cb4ff;
+    --en-text-visited: #ffadff;
+    --en-text-hover: var(--en-primary-red);
+    --en-text-active: #858585;
+    --en-text-inactive: #cdcdcda6;
+    --en-background-primary: var(--en-primary-black);
+    --en-background-tab-level-1: #666666;
+    --en-background-tab-level-2: var(--en-primary-dust);
+    --en-background-tab-transparent: #6666;
+    --en-table-border-color: #ff3663;
+    --en-box-shadow: 1px 1px 12px #6666;
+    --en-box-shadow-primary: 1px 1px 12px #6666;
+    --en-box-shadow-primary-small: 1px 1px 3px #6666;
+    --en-box-shadow-primary-large: 1px 1px 24px #6666;
     color-scheme: dark;
   }
 }
 .en-light {
-  --primary-white: #ffffff;
-  --primary-black: #1b1b1b;
-  --primary-dust: #6f6f6f;
-  --primary-red: #d30038;
-  --primary-green: #007936;
-  --primary-blue: #0069c2;
-  --primary-yellow: #746a00;
-  --primary-super-yellow: #ffff00;
-  --text-primary: #1b1b1b;
-  --text-secondary: #4e4e4e;
-  --text-invert: var(--primary-white);
-  --text-muted: var(--primary-dust);
-  --text-link: #0069c2;
-  --text-visited: #551a8b;
-  --text-hover: var(--primary-red);
-  --text-visited: #551a8b;
-  --text-active: #858585;
-  --text-inactive: #9e9e9ea6;
-  --background-primary: var(--primary-white);
-  --background-tab-level-1: var(--primary-black);
-  --background-tab-level-2: var(--primary-dust);
-  --background-tab-transparent: #6666;
-  --table-border-color: #000;
-  --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
-  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
-  --box-shadow: 1px 1px 12px #6666;
-  --box-shadow-primary: 1px 1px 12px #6666;
-  --box-shadow-primary-small: 1px 1px 3px #6666;
-  --box-shadow-primary-large: 1px 1px 24px #6666;
+  --en-primary-white: $color-white;
+  --en-primary-black: #1b1b1b;
+  --en-primary-dust: #6f6f6f;
+  --en-primary-red: #d30038;
+  --en-primary-green: #007936;
+  --en-primary-blue: #0069c2;
+  --en-primary-yellow: #746a00;
+  --en-primary-super-yellow: #ffff00;
+  --en-text-primary: #1b1b1b;
+  --en-text-secondary: #4e4e4e;
+  --en-text-invert: var(--en-primary-white);
+  --en-text-muted: var(--en-primary-dust);
+  --en-text-link: #0069c2;
+  --en-text-visited: #551a8b;
+  --en-text-hover: var(--en-primary-red);
+  --en-text-visited: #551a8b;
+  --en-text-active: #858585;
+  --en-text-inactive: #9e9e9ea6;
+  --en-background-primary: var(--en-primary-white);
+  --en-background-tab-level-1: var(--en-primary-black);
+  --en-background-tab-level-2: var(--en-primary-dust);
+  --en-background-tab-transparent: #6666;
+  --en-table-border-color: #000;
+  --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+  --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+  --en-box-shadow: 1px 1px 12px #6666;
+  --en-box-shadow-primary: 1px 1px 12px #6666;
+  --en-box-shadow-primary-small: 1px 1px 3px #6666;
+  --en-box-shadow-primary-large: 1px 1px 24px #6666;
   color-scheme: light;
 }
 
 .en-dark {
-  --primary-white: #ffffff;
-  --primary-black: #1b1b1b;
-  --primary-dust: #858585;
-  --primary-red: #ff97a0;
-  --primary-green: #00d061;
-  --primary-blue: #8cb4ff;
-  --primary-yellow: #c7b700;
-  --text-primary: #fff;
-  --text-secondary: #cdcdcd;
-  --text-invert: var(--primary-black);
-  --text-muted: var(--primary-dust);
-  --text-link: #8cb4ff;
-  --text-visited: #ffadff;
-  --text-hover: var(--primary-red);
-  --text-active: #858585;
-  --text-inactive: #cdcdcda6;
-  --background-primary: var(--primary-black);
-  --background-tab-level-1: #666666;
-  --background-tab-level-2: var(--primary-dust);
-  --background-tab-transparent: #6666;
-  --table-border-color: #ff3663;
-  --box-shadow: 1px 1px 12px #6666;
-  --box-shadow-primary: 1px 1px 12px #6666;
-  --box-shadow-primary-small: 1px 1px 3px #6666;
-  --box-shadow-primary-large: 1px 1px 24px #6666;
+  --en-primary-white: #ffffff;
+  --en-primary-black: #1b1b1b;
+  --en-primary-dust: #858585;
+  --en-primary-red: #ff97a0;
+  --en-primary-green: #00d061;
+  --en-primary-blue: #8cb4ff;
+  --en-primary-yellow: #c7b700;
+  --en-text-primary: #fff;
+  --en-text-secondary: #cdcdcd;
+  --en-text-invert: var(--en-primary-black);
+  --en-text-muted: var(--en-primary-dust);
+  --en-text-link: #8cb4ff;
+  --en-text-visited: #ffadff;
+  --en-text-hover: var(--en-primary-red);
+  --en-text-active: #858585;
+  --en-text-inactive: #cdcdcda6;
+  --en-background-primary: var(--en-primary-black);
+  --en-background-tab-level-1: #666666;
+  --en-background-tab-level-2: var(--en-primary-dust);
+  --en-background-tab-transparent: #6666;
+  --en-table-border-color: #ff3663;
+  --en-box-shadow: 1px 1px 12px #6666;
+  --en-box-shadow-primary: 1px 1px 12px #6666;
+  --en-box-shadow-primary-small: 1px 1px 3px #6666;
+  --en-box-shadow-primary-large: 1px 1px 24px #6666;
   color-scheme: dark;
 }
 
+/* 盒模型 规则 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 移除默认的 margin 外边距 */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* 设置根元素 html 默认样式 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* 设置默认的 body 元素的样式 */
+body {
+  font-family: var(--en-font-body);
+  font-size: var(--en-base-font-size);
+  line-height: var(--en-font-content-line-height);
+  text-rendering: optimizeSpeed;
+}
+
+/*  链接元素没有 class 类时的展示 */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* 设置图片样式 */
+img,
+picture {
+  display: block;
+  max-width: 100%;
+}
+
+/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */
+em {
+  font-variation-settings: "slnt" -10;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 自动填充的密码的背景色设置动画已取消背景色  */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition-delay: 99999s;
+  transition: color 99999s ease-out, background-color 99999s ease-out;
+  -webkit-transition-delay: 99999s;
+  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
+  -webkit-text-fill-color: var(--text-primary);
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+.en-relative {
+  position: relative;
+}
+
 .en-center {
   position: absolute;
   left: 50%;
@@ -165,6 +265,10 @@
   transform: translate(-50%, -50%);
 }
 
+.en-dust {
+  color: var(--primary-dust);
+}
+
 /** 文本显示一行，超出点点点 */
 .en-text-in-one-line {
   white-space: nowrap;
@@ -240,6 +344,17 @@
   font-size: 0.6rem;
 }
 
+.en-user-select-text {
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.en-cursor-pointer {
+  cursor: pointer;
+}
+
 @keyframes loading {
   100%, 0% {
     background-size: 10% 10%, 10% 10%, 10% 10%, 10% 10%;

package/styles/common.scss

@@ -1,94 +1,9 @@
-@mixin light {
-  // 基色
-  --primary-white: #ffffff;
-  --primary-black: #1b1b1b;
-  --primary-dust: #6f6f6f;
-  --primary-red: #d30038;
-  --primary-green: #007936;
-  --primary-blue: #0069c2;
-  --primary-yellow: #746a00;
-  --primary-super-yellow: #ffff00;
-  // 文本色
-  --text-primary: #1b1b1b;
-  --text-secondary: #4e4e4e;
-  --text-invert: var(--primary-white); // 文本反转色
-  --text-muted: var(--primary-dust); // 温和文本色
-  // 链接文本色
-  --text-link: #0069c2;
-  --text-visited: #551a8b;
-  --text-hover: var(--primary-red);
-  --text-visited: #551a8b;
-  --text-active: #858585;
-  --text-inactive: #9e9e9ea6; // 无效链接色
-  // 背景色
-  --background-primary: var(--primary-white);
-  --background-tab-level-1: var(--primary-black);
-  --background-tab-level-2: var(--primary-dust);
-  --background-tab-transparent: #6666;
-  --table-border-color: #000;
-  --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
-  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
-  --box-shadow: 1px 1px 12px #6666;
-  --box-shadow-primary: 1px 1px 12px #6666;
-  --box-shadow-primary-small: 1px 1px 3px #6666;
-  --box-shadow-primary-large: 1px 1px 24px #6666;
-  color-scheme: light;
-}
-
-@mixin dark {
-  // 基色
-  --primary-white: #ffffff;
-  --primary-black: #1b1b1b;
-  --primary-dust: #858585;
-  --primary-red: #ff97a0;
-  --primary-green: #00d061;
-  --primary-blue: #8cb4ff;
-  --primary-yellow: #c7b700;
-  // 文本色
-  --text-primary: #fff;
-  --text-secondary: #cdcdcd;
-  --text-invert: var(--primary-black); // 文本反转色
-  --text-muted: var(--primary-dust); // 温和文本色
-  // 普通链接文本色
-  --text-link: #8cb4ff;
-  --text-visited: #ffadff;
-  --text-hover: var(--primary-red);
-  --text-active: #858585;
-  --text-inactive: #cdcdcda6; // 无效链接色
-  //  背景色
-  --background-primary: var(--primary-black);
-  --background-tab-level-1: #666666;
-  --background-tab-level-2: var(--primary-dust);
-  --background-tab-transparent: #6666;
-  --table-border-color: #ff3663;
-  --box-shadow: 1px 1px 12px #6666;
-  --box-shadow-primary: 1px 1px 12px #6666;
-  --box-shadow-primary-small: 1px 1px 3px #6666;
-  --box-shadow-primary-large: 1px 1px 24px #6666;
-  color-scheme: dark;
-}
-
-:root {
-  @include light();
-}
-
-@media (prefers-color-scheme: light) {
-  :root:not(.en-light):not(.en-dark) {
-    @include light();
-  }
-}
-@media (prefers-color-scheme: dark) {
-  :root:not(.en-light):not(.en-dark) {
-    @include dark();
-  }
-}
+@use "./root";
+@use "./reset.scss";
+@use "./respond" as rp;
 
-.en-light {
-  @include light();
-}
-
-.en-dark {
-  @include dark();
+.en-relative {
+  position: relative;
 }
 
 .en-center {
@@ -98,6 +13,10 @@
   transform: translate(-50%, -50%);
 }
 
+.en-dust {
+  color: var(--primary-dust);
+}
+
 /** 文本显示一行，超出点点点 */
 .en-text-in-one-line {
   white-space: nowrap;
@@ -178,6 +97,19 @@
 .en-text-small {
   font-size: 0.6rem;
 }
+
+// 用户可操作
+.en-user-select-text {
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.en-cursor-pointer {
+  cursor: pointer;
+}
+
 @keyframes loading {
   //  45 - 25 * Math.sin((Math.PI * 5) / 12)
   //  位置公式 35 - 25 * Math.cos((Math.PI * 5) / 12)
@@ -312,22 +244,10 @@
   @for $i from 18 through 33 {
     #{calc($i / 50 * 100%)} {
       background-position:
-        #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) *
-          1%}
-          #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) *
-          1%},
-        #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) *
-          1%}
-          #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) *
-          1%},
-        #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) *
-          1%}
-          #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) *
-          1%},
-        #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) *
-          1%}
-          #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) *
-          1%};
+        #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) * 1%},
+        #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) * 1%},
+        #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) * 1%},
+        #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) * 1%};
     }
   }