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

success to apply mixin to default light

kaori-t 5 лет назад
Родитель
Сommit
9db36f9cdb
2 измененных файлов с 17 добавлено и 0 удалено
  1. 11 0
      src/client/styles/scss/_mixins.scss
  2. 6 0
      src/client/styles/scss/theme/default.scss

+ 11 - 0
src/client/styles/scss/_mixins.scss

@@ -223,3 +223,14 @@
   transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
   transition-duration: 300ms;
 }
+
+@mixin three-stranded-button($textColor, $borderColor, $bgHoverColor, $bgColor: white) {
+  color: $textColor;
+  background-color: $bgColor;
+  border-color: $borderColor;
+  &:hover,
+  &:active {
+    background-color: $bgHoverColor;
+    border-color: $borderColor;
+  }
+}

+ 6 - 0
src/client/styles/scss/theme/default.scss

@@ -103,6 +103,12 @@ html[light] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
+
+  .grw-three-stranded-button {
+    .btn.btn-outline-primary {
+      @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+    }
+  }
 }
 
 //== Dark Mode