apply SASS division

Tokyo-Metro-Gov · Jun 6, 2021 · 8a7ed43 · 8a7ed43
1 parent 364b0f4
commit 8a7ed43
Show file tree

Hide file tree

Showing 16 changed files with 642 additions and 580 deletions.
diff --git a/assets/monitoringItemsTableCommon.sass b/assets/monitoringItemsTableCommon.sass
@@ -0,0 +1,15 @@
+/* Error: Undefined variable.
+ *   ,
+ * 9 |   color: $green-1;
+ *   |          ^^^^^^^^
+ *   '
+ *   assets\monitoringItemsTableCommon.scss 9:10  root stylesheet */
+
+body::before
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace
+  white-space: pre
+  display: block
+  padding: 1em
+  margin-bottom: 1em
+  border-bottom: 2px solid black
+  content: "Error: Undefined variable.\a   \2577 \a 9 \2502    color: $green-1;\d\a   \2502           ^^^^^^^^\a   \2575 \a   assets\\monitoringItemsTableCommon.scss 9:10  root stylesheet"
diff --git a/assets/monitoringItemsTableCommon.scss b/assets/monitoringItemsTableCommon.scss
@@ -1,8 +1,8 @@
+@use "sass:math";
+
 $default-bdw: 3px;
 $default-boxdiff: 35px;
 
-// .container > .box > (.group > .box > ...) .pillar > .content
-
 .container {
   width: 100%;
   box-sizing: border-box;
@@ -12,7 +12,7 @@ $default-boxdiff: 35px;
   * {
     box-sizing: border-box;
   }
-  // override default styles
+
   padding-left: 0 !important;
 
   ul {
@@ -92,7 +92,7 @@ $default-boxdiff: 35px;
 
 @function px2vw($px, $vw: 0) {
   @if $vw > 0 {
-    @return ceil($px / $vw * 100000vw) / 1000;
+    @return math.ceil(math.div(math.div($px, $vw) * 100000vw, 1000));
   } @else {
     @return $px * 1px;
   }
@@ -147,17 +147,14 @@ $default-boxdiff: 35px;
   }
 }
 
-// Vuetify Breakpoints: Large (1264)
 @include lessThan(1263) {
   @include override(1263, 3, 14, 35);
 }
 
-// Vuetify Breakpoints: Small (960)
 @include lessThan(959) {
   @include override(960, 3, 14, 35);
 }
 
-// Vuetify Breakpoints: Extra Small (600)
 @include lessThan(600) {
   @include override(600, 3, 14, 35);
 }
diff --git a/assets/variables.sass b/assets/variables.sass
@@ -0,0 +1,127 @@
+// ==================
+// color
+$green-1: #008830
+$green-2: #00b849
+$green-3: #00d154
+$green-4: #00eb5e
+$gray-1: #333
+$gray-2: #4d4d4d
+$gray-3: #707070
+$gray-4: #d9d9d9
+$gray-5: #f8f9fa
+$white: #fff
+$link: #006ca8
+$emergency: #FFE200
+$alert: #AD2121
+// ==================
+// shadow
+$shadow: 0 0 2px rgba(0, 0, 0, 0.15)
+// ==================
+// break-points
+$huge: 1440
+$large: 1170
+$medium: 768
+$small: 600
+$tiny: 320
+// ==================
+// z-index
+$z-index-map: (opened-side-navigation: 101, sp-navigation: 100)
+
+@function z-index-of($key)
+  @return map-get($z-index-map, $key)
+// ================== 
+// media-query @mixin largerThan($width) {
+@mixin largerThan($width)
+  @media screen and (min-width: $width + 1 + px)
+    @content 
+// =================== 
+// button 
+@mixin text-link 
+    color: $link !important 
+    text-decoration: none 
+    &::hover 
+      text-decoration: underline
+
+@mixin lessThan($width) 
+  @media screen and (max-width: $width + px) 
+    @content
+// =================== 
+// 
+@mixin card-container($withDivider: false)
+  background-color: $white
+  box-shadow: $shadow
+  border: 0.5px solid $gray-4 !important
+  border-radius: 4px
+
+  @if ($withDivider) 
+    &::before 
+      content: ''
+      position: absolute
+      left: 50%
+      top: 0
+      width: 1px
+      height: 100%
+      background-color: $gray-4
+
+@mixin visually-hidden() 
+    position: fixed !important 
+    top: 0 !important 
+    left: 0 !important 
+    width: 4px !important 
+    height: 4px !important 
+    opacity: 0 !important 
+    overflow: hidden !important 
+    border: none !important 
+    margin: 0 !important 
+    padding: 0 !important 
+    display: block !important 
+    visibility: visible !important 
+
+// ==================
+// font-family
+$western: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue"
+$japanese: "Hiragino Sans", "Meiryo", "Source Han Sans", "Noto Sans CJK JP", "Yu Gothic"
+$korean: "Apple SD Gothic Neo", "Malgun Gothic", "Source Han Sans K", "Noto Sans CJK KR"
+$chinese-hans: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC"
+$chinese-hant: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", "Noto Sans CJK TC"
+// ==================
+// font-size
+@mixin font-size($size, $important: false) 
+    font-size: div($size, 10) + rem #{if($important, "!important", "")} 
+
+@mixin 	card-h1()
+    color: $gray-2 
+    font-weight: 600 
+
+@mixin 	card-h2() 
+    color: $gray-2 
+    font-weight: 600 
+
+@mixin 	card-h3() 
+    color: $gray-2 
+    font-weight: 600 
+
+@mixin 	body-text() 
+    color: $gray-1 
+    line-height: 160% 
+    font-weight: normal 
+
+@mixin button-text($size: 'md', $font-size: 14) 
+    @if ($size == 'sm') 
+        padding: 4px 8px 
+    @else 
+        padding: 24px 36px 
+
+    @include font-size($font-size) 
+
+    display: inline-block border-radius 4px 
+    background-color 
+        $white: border 1px solid 
+        $green-1: color 
+        $green-1: cursor 
+        &::pointer 
+            &::hover 
+                background-color: $green-1 
+                color: $white 
+            > i 
+                color: $white !important 
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // ==================
 // color
 $green-1: #008830;
@@ -62,7 +64,7 @@ $chinese-hant: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", "Noto
 // ==================
 // font-size
 @mixin font-size($size, $important: false) {
-  font-size: ($size / 10) + rem #{if($important, "!important", "")};
+  font-size: div($size, 10) + rem #{if($important, "!important", "")};
 }
 
 @mixin card-h1 {

diff --git a/components/_shared/StaticCard.vue b/components/_shared/StaticCard.vue
@@ -60,7 +60,7 @@ export default Vue.extend()
     margin-left: 2em;
 
     @include lessThan($medium) {
-      margin-left: 32 / 768 * 100vw;
+      margin-left: 4.16666667vw;
     }
   }
 

diff --git a/components/index/CardsMonitoring/ConfirmedCasesDetails/Table.vue b/components/index/CardsMonitoring/ConfirmedCasesDetails/Table.vue
@@ -135,180 +135,6 @@ export default Vue.extend({
   },
 })
 </script>
-
 <style lang="scss" module>
-$default-bdw: 3px;
-$default-boxdiff: 35px;
-
-// .container > .box > (.group > .box > ...) .pillar > .content
-
-.container {
-  width: 100%;
-  box-sizing: border-box;
-  color: $green-1;
-  line-height: 1.35;
-
-  * {
-    box-sizing: border-box;
-  }
-  // override default styles
-  padding-left: 0 !important;
-
-  ul {
-    padding-left: 0;
-  }
-}
-
-.group {
-  flex: 0 0 auto;
-  padding-left: $default-bdw !important;
-  border-top: $default-bdw solid $green-1;
-  border-left: $default-bdw solid $green-1;
-}
-
-.content {
-  padding: 5px 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  border: $default-bdw solid $green-1;
-
-  > span {
-    display: block;
-
-    @include font-size(14);
-
-    &:first-child {
-      text-align: left;
-      margin-top: 1px;
-      flex-shrink: 2;
-    }
-
-    &:last-child {
-      margin-left: 10px;
-      text-align: right;
-      // white-space: nowrap;
-      flex-shrink: 1;
-    }
-
-    &:not(:last-child) {
-      overflow-wrap: break-word;
-    }
-  }
-
-  strong {
-    @include font-size(16);
-  }
-
-  span.unit {
-    @include font-size(14);
-  }
-}
-
-.box {
-  display: block;
-  margin-top: $default-bdw;
-
-  &.parent {
-    border-top: $default-bdw solid $green-1;
-    border-left: $default-bdw solid $green-1;
-    position: relative;
-    padding-left: $default-boxdiff - $default-bdw * 2;
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: -1px;
-      bottom: 0;
-      width: $default-boxdiff - $default-bdw - 2;
-      border-bottom: $default-bdw solid $green-1;
-    }
-
-    > .content {
-      margin-left: -($default-boxdiff - $default-bdw * 2);
-      width: calc(100% + #{($default-boxdiff - $default-bdw * 2)});
-      border-top: none;
-      border-left: none;
-      border-bottom: none;
-    }
-  }
-}
-
-@function px2vw($px, $vw: 0) {
-  @if $vw > 0 {
-    @return ceil($px / $vw * 100000vw) / 1000;
-  } @else {
-    @return $px * 1px;
-  }
-}
-
-@mixin override($vw, $bdw, $fz, $boxdiff) {
-  .group {
-    padding-left: px2vw($bdw, $vw) !important;
-    border-top: px2vw($bdw, $vw) solid $green-1;
-    border-left: px2vw($bdw, $vw) solid $green-1;
-  }
-
-  .content {
-    padding: px2vw(5, $vw) px2vw(10, $vw);
-    border: px2vw($bdw, $vw) solid $green-1;
-
-    > span {
-      @include font-size($fz);
-
-      &:first-child {
-        margin-top: px2vw(1, $vw);
-      }
-
-      &:last-child {
-        margin-left: 10px;
-      }
-    }
-
-    strong {
-      @include font-size($fz + 2);
-    }
-
-    span.unit {
-      @include font-size($fz);
-    }
-  }
-
-  .box {
-    margin-top: px2vw($bdw, $vw);
-
-    &.parent {
-      border-top: px2vw($bdw, $vw) solid $green-1;
-      border-left: px2vw($bdw, $vw) solid $green-1;
-      padding-left: px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2;
-
-      &::after {
-        width: px2vw($boxdiff - $bdw, $vw);
-        border-bottom: px2vw($bdw, $vw) solid $green-1;
-      }
-
-      > .content {
-        margin-left: -(px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2);
-        width: calc(100% + #{(px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2)});
-      }
-    }
-  }
-}
-
-// Vuetify Breakpoints: Large (1264)
-@include lessThan(1263) {
-  @include override(1263, 3, 14, 35);
-}
-
-// Vuetify Breakpoints: Small (960)
-@include lessThan(959) {
-  @include override(960, 3, 14, 35);
-}
-
-// Vuetify Breakpoints: Extra Small (600)
-@include lessThan(600) {
-  @include override(600, 3, 14, 35);
-}
+@import url('@/assets/monitoringItemsTableCommon.scss');
 </style>