Просмотр исходного кода

add fukidashi to active GlobalItem

Yuki Takei 6 лет назад
Родитель
Сommit
42ebb0a232

+ 25 - 0
src/client/styles/scss/_layout.scss

@@ -1,5 +1,24 @@
 @import 'layout_variable';
 
+%fukidashi-for-active {
+  position: relative;
+
+  // speech balloon
+  &:after {
+    position: absolute;
+    top: 0.5em;
+    right: -1em;
+    display: block;
+    width: 0;
+    content: '';
+    border: 1em solid transparent;
+    border-left-width: 0;
+
+    // @include media-breakpoint-down(xs) {
+    // }
+  }
+}
+
 // FIXME: replace with mt-2 or mt-3
 .grw-mt-10px {
   margin-top: 10px !important;
@@ -46,6 +65,12 @@
       border-right: 1px solid $border;
     }
   }
+
+  .grw-global-item-container.active {
+    button {
+      @extend %fukidashi-for-active;
+    }
+  }
 }
 
 #page-wrapper {

+ 9 - 0
src/client/styles/scss/theme/_apply-colors.scss

@@ -87,6 +87,15 @@ $link-hover-color: $color-link-hover;
   }
 }
 
+.grw-sidebar {
+  .grw-global-item-container.active {
+    button:after {
+      // fukidashi color
+      border-right-color: darken($bgcolor-global, 4%);
+    }
+  }
+}
+
 /*
  * code color of inline-code
  */