add Tailwing & CssPurge

2020-04-26 11:50:06 +02:00
parent fb9a1432c1
commit ca7177f676
11 changed files with 317 additions and 194 deletions
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -1,68 +1,85 @@
 // Button

+//.btn {
+//    font-size: 1.6rem;
+//    border: 1px solid transparent;
+//    padding: 0.5rem 1rem;
+//    border-radius: 0.5rem;
+//    cursor: pointer;
+//    box-shadow: 1px 1px 2px $grey;
+//    text-decoration: none;
+//    transition: background-color 0.2s, color 0.2s;
+//
+//    &:hover {
+//        transition: background-color 0.2s, color 0.2s;
+//        background-color: $mediumDark;
+//        color: $white;
+//    }
+//}
+//
+//.btn-primary {
+//    @extend .btn;
+//    background-color: $medium;
+//    border-color: $medium;
+//    color: $white;
+//
+//    &:visited,
+//    &:focus {
+//        color: $white;
+//    }
+//}
+//
+//.btn-secondary {
+//    @extend .btn;
+//    background-color: $mediumLight;
+//    border-color: $mediumLight;
+//    color: $dark;
+//}
+//
+//.btn-alert {
+//    @extend .btn;
+//    background-color: $error;
+//    border-color: $error;
+//    color: $white;
+//
+//    &:hover {
+//        background-color: $dark;
+//    }
+//}
+//
+//.btn-icon {
+//    @extend .btn;
+//    display: flex;
+//    align-items: center;
+//    height: 4rem;
+//
+//    &:hover svg {
+//        fill: $white;
+//    }
+//
+//    svg {
+//        height: 3rem;
+//        margin-right: 1rem;
+//
+//        &:hover {
+//            fill: $white;
+//        }
+//    }
+//}
+
 .btn {
-    font-size: 1.6rem;
-    border: 1px solid transparent;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    box-shadow: 1px 1px 2px $grey;
-    text-decoration: none;
-    transition: background-color 0.2s, color 0.2s;
+    @apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;

    &:hover {
-        transition: background-color 0.2s, color 0.2s;
-        background-color: $mediumDark;
-        color: $white;
+        @apply text-white bg-orange-600 transition-all duration-300;
    }
 }

 .btn-primary {
    @extend .btn;
-    background-color: $medium;
-    border-color: $medium;
-    color: $white;
-
-    &:visited,
-    &:focus {
-        color: $white;
-    }
-}
-
-.btn-secondary {
-    @extend .btn;
-    background-color: $mediumLight;
-    border-color: $mediumLight;
-    color: $dark;
-}
-
-.btn-alert {
-    @extend .btn;
-    background-color: $error;
-    border-color: $error;
-    color: $white;
+    @apply bg-orange-600;

    &:hover {
-        background-color: $dark;
-    }
-}
-
-.btn-icon {
-    @extend .btn;
-    display: flex;
-    align-items: center;
-    height: 4rem;
-
-    &:hover svg {
-        fill: $white;
-    }
-
-    svg {
-        height: 3rem;
-        margin-right: 1rem;
-
-        &:hover {
-            fill: $white;
-        }
+        @apply bg-orange-800;
    }
 }