diff --git a/assets/monitoringItemsTableCommon.sass b/assets/monitoringItemsTableCommon.sass
new file mode 100644
index 0000000000000..95beff262a8a1
--- /dev/null
+++ 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
deleted file mode 100644
index 8ebb6fbf9479e..0000000000000
--- a/assets/monitoringItemsTableCommon.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-$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;
- }
-
- &: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);
- }
- }
-
- 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);
-}
diff --git a/assets/variables.sass b/assets/variables.sass
new file mode 100644
index 0000000000000..04bd31a8aea35
--- /dev/null
+++ 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
deleted file mode 100644
index 1ebefec7ef9a2..0000000000000
--- a/assets/variables.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-// ==================
-// 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) {
- @media screen and (min-width: $width + 1 + px) {
- @content;
- }
-}
-
-@mixin lessThan($width) {
- @media screen and (max-width: $width + px) {
- @content;
- }
-}
-
-// ==================
-// 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: ($size / 10) + rem #{if($important, "!important", "")};
-}
-
-@mixin card-h1 {
- @include font-size(24);
-
- color: $gray-2;
- font-weight: 600;
-}
-
-@mixin card-h2 {
- @include font-size(19);
-
- color: $gray-2;
- font-weight: 600;
-}
-
-@mixin card-h3 {
- @include font-size(16);
-
- color: $gray-2;
- font-weight: 600;
-}
-
-@mixin body-text {
- @include font-size(16);
-
- color: $gray-1;
- line-height: 160%;
- font-weight: normal;
-}
-
-// ===================
-// button
-@mixin text-link {
- @include font-size(14);
-
- color: $link !important;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-}
-
-@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;
- }
- }
-}
-
-// ===================
-// card
-@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;
- }
- }
-}
-
-// ===================
-// Visually Hidden (for screen reader)
-// https://github.com/ampproject/amphtml/blob/2e9a940e78df8de38a6c06a0772aeaa4839a24d1/css/ampshared.css#L164-L204
-
-@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;
-}
-
-// ===================
-// Vuetify
-
-// Expansion Panels
-// https://vuetifyjs.com/en/components/expansion-panels/
-$expansion-panel-content-padding: 0;
-$expansion-panel-header-padding: 10px 0;
-$expansion-panel-header-min-height: 26px;
-$expansion-panel-active-header-min-height: 26px;
-$expansion-panel-header-font-size: .875rem;
diff --git a/components/_shared/StaticCard.vue b/components/_shared/StaticCard.vue
index dd270d6296ed7..9f09760b73da3 100644
--- 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
index f43c821997ed5..b4d9c75cd171b 100644
--- a/components/index/CardsMonitoring/ConfirmedCasesDetails/Table.vue
+++ b/components/index/CardsMonitoring/ConfirmedCasesDetails/Table.vue
@@ -135,37 +135,32 @@ export default Vue.extend({
},
})
-
diff --git a/components/index/CardsMonitoring/MonitoringItemsOverview/Table/MedicalSystem.vue b/components/index/CardsMonitoring/MonitoringItemsOverview/Table/MedicalSystem.vue
index 958c2bdd23131..d95eafd4793ac 100644
--- a/components/index/CardsMonitoring/MonitoringItemsOverview/Table/MedicalSystem.vue
+++ b/components/index/CardsMonitoring/MonitoringItemsOverview/Table/MedicalSystem.vue
@@ -117,6 +117,6 @@ export default Vue.extend({
})
-
diff --git a/components/index/CardsTab.vue b/components/index/CardsTab.vue
index d2aeb13dbd009..eb0d42d3120fe 100644
--- a/components/index/CardsTab.vue
+++ b/components/index/CardsTab.vue
@@ -51,6 +51,8 @@ export default Vue.extend({