Materialテーマのアップデートとバリエーションの追加 (#276)

* Material theme (dev) initial release * fix CSP * fix CSP (#268) * fix icon font path * 相対パスの修正 (#269) * fix CSP * fix icon font path * 相対パスの修正 (#270) * fix CSP * fix icon font path * fix font path * Revert "相対パスの修正 (#270)" (#271) This reverts commit 27998a8. * Revert "相対パスの修正 (#269)" (#272) This reverts commit f864de2. * fix relative path * fix override settings * Add variation Update material theme Co-authored-by: YoheiZuho <yuuman002@gmail.com>
YoheiZuho · Apr 6, 2020 · a8a7b8b · a8a7b8b
1 parent 5cf087e
commit a8a7b8b
Show file tree

Hide file tree

Showing 105 changed files with 9,765 additions and 5 deletions.
diff --git a/app/javascript/fonts/MaterialIcons-Regular.woff2 b/app/javascript/fonts/MaterialIcons-Regular.woff2
diff --git a/app/javascript/styles/material-v1-dark.scss b/app/javascript/styles/material-v1-dark.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//@import 'application';
+@import 'material-v1-dark/account';
+@import 'material-v1-dark/basics';
+@import 'material-v1-dark/button';
+//@import 'material-v1-dark/cards';
+@import 'material-v1-dark/columns';
+@import 'material-v1-dark/components';
+@import 'material-v1-dark/config';
+@import 'material-v1-dark/control';
+@import 'material-v1-dark/emoji-picker';
+@import 'material-v1-dark/icons';
+@import 'material-v1-dark/material-icons';
+@import 'material-v1-dark/media';
+@import 'material-v1-dark/mobile';
+@import 'material-v1-dark/modal';
+@import 'material-v1-dark/statuses';
diff --git a/app/javascript/styles/material-v1-dark/_mixins.scss b/app/javascript/styles/material-v1-dark/_mixins.scss
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/material-v1-dark/account.scss b/app/javascript/styles/material-v1-dark/account.scss
@@ -0,0 +1,139 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name,
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay-base {
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            background-size: 44px;
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__extra {
+            margin-top: 0;
+
+            &__links {
+                color: $secondary-text-color;
+                padding: 10px 0;
+
+                a {
+                    color: $secondary-text-color;
+                    padding: 4px 12px;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &__bio {
+            margin: 0;
+
+            .account__header {
+                &__content {
+                    color: $primary-text-color;
+                    padding: 8px;
+                }
+
+                &__fields {
+                    border: 1px solid $border-color;
+                    border-radius: 4px;
+
+                    .verified {
+                        border: none;
+                        background: $verified-background-color;
+
+                        a,
+                        &__mark { color: $primary-text-color }
+                    }
+
+                    dl {
+                        border-bottom: 1px solid $border-color;
+
+                        &:first-child .verified { border-radius: 0 }
+
+                        &:last-child { border-bottom: 0 }
+                    }
+
+                    dt {
+                        color: $primary-text-color;
+                        background: $list-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $card-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $secondary-text-color;
+
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
diff --git a/app/javascript/styles/material-v1-dark/basics.scss b/app/javascript/styles/material-v1-dark/basics.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+    background: $scroll-bar-thumb-color;
+
+    &:hover { background: $scroll-bar-thumb-hover-color }
+    &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+    background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+    scrollbar-color: $scroll-bar-thumb-color transparent;
+}
diff --git a/app/javascript/styles/material-v1-dark/button.scss b/app/javascript/styles/material-v1-dark/button.scss
@@ -0,0 +1,78 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+
+    &.active {
+        color: $icon-button-active-color;
+
+        &:hover { color: $icon-button-active-hover-color }
+    }
+
+    &.disabled { color: $disabled-icon-color }
+
+    &.inverted {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+    box-shadow: none;
+    background-color: transparent;
+    margin: 0 8px;
+    color: $text-button-color;
+
+    &:hover { background: $text-button-hover-color }
+
+    &:focus { background: $text-button-focus-color }
+}
diff --git a/app/javascript/styles/material-v1-dark/cards.scss b/app/javascript/styles/material-v1-dark/cards.scss
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}