Editable media inserts.

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _button.scss

diff --git a/src/wolnelektury/static/2022/styles/layout/_button.scss b/src/wolnelektury/static/2022/styles/layout/_button.scss
index 5892f77..78b33bb 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_button.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_button.scss
@@ -1,17 +1,16 @@
 .l-button {
   &.l-button--media {
 .l-button {
   &.l-button--media {

-    @include font-size(16px);
+    @include font-size(14px);

     border: 2px solid #D5ECED;
     border-radius: 5px;
     border: 2px solid #D5ECED;
     border-radius: 5px;

-    padding: 19px 20px;
+    padding: 10px;

     cursor: pointer;
     transition: all $ease-dynamic 350ms;
     background-color: $color-white;
     outline: 0;
 
     font-weight: bold;
     cursor: pointer;
     transition: all $ease-dynamic 350ms;
     background-color: $color-white;
     outline: 0;
 
     font-weight: bold;

-    font-size: 16px;
-    line-height: 20px;
+    line-height: 17.6px;

     display: flex;
     align-items: center;
     text-align: center;
     display: flex;
     align-items: center;
     text-align: center;


@@ -19,6 +18,12 @@
     color: #007880;
     font-family: $base-font;
 
     color: #007880;
     font-family: $base-font;
 

+    @include rwd($break-flow) {
+        @include font-size(16px);
+        line-height: 20px;
+        padding: 19px 20px;
+    }
+    

     .icon {
       font-size: 21px;
       margin-right: 15px;
     .icon {
       font-size: 21px;
       margin-right: 15px;


@@ -38,4 +43,38 @@
       }
     }
   }
       }
     }
   }

+
+  &.l-button--default {
+    cursor: pointer;
+    color: $color-white;
+    background: #007880;
+    border: 2px solid #007880;
+    border-radius: 5px;
+    letter-spacing: -0.01em;
+    font-weight: $semibold;
+    text-align: center;
+    @include font-size(18px);
+    line-height: 140%;
+    padding: 5px 20px;
+    transition: all $ease-dynamic 350ms;
+
+    @include rwd($break-flow) {
+      @include font-size(25px);
+    }
+
+    &:hover {
+      background: #083F4D;
+      border-color: #083F4D;
+    }
+
+    &.l-button--default--dark {
+      color: #083F4D;
+      background: #92BD39;
+      border-color: #92BD39;
+      &:hover {
+        background: #FFA500;
+        border-color: #FFA500;
+      }
+    }
+  }

 }
 }