cleanup

resources/css/app.scss

@@ -54,76 +54,6 @@ p {
     margin-top: 0;
 }
 
-// input,
-// select,
-// textarea {
-//     box-sizing: border-box;
-//     display: block;
-//     width: 100%;
-//     border: 1px solid $border-color;
-//     border-radius: 12px;
-//     padding: map-get($spacer, 2) map-get($spacer, 3);
-//     color: $font-color;
-//     margin-bottom: map-get($spacer, 4);
-
-//     -webkit-appearance: none;
-//     -moz-appearance: none;
-//     appearance: none;
-// }
-
-// textarea {
-//     resize: none;
-// }
-
-select {
-    padding-right: 2.5rem;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 0.75rem center;
-    background-size: 24px 18px;
-}
-
-.input-file-group {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    border: 1px solid transparent;
-    border-radius: 12px;
-
-    input {
-        opacity: 0;
-        width: 0.1px;
-        height: 0.1px;
-        position: absolute;
-        margin-left: -9999px;
-    }
-
-    label.button {
-        margin-right: map-get($spacer, 4);
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        margin: 0;
-        height: 3rem;
-        width: auto;
-    }
-
-    .file-name {
-        display: block;
-        border: 1px solid $border-color;
-        border-top-right-radius: 12px;
-        border-bottom-right-radius: 12px;
-        flex: 1;
-        height: 3rem;
-        background-color: #fff;
-        line-height: 3rem;
-        padding: 0 1rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-
 code {
     display: block;
     font-size: 0.8rem;
@@ -174,19 +104,3 @@ code {
         }
     }
 }
-
-@media screen and (max-width: 768px) {
-    .not-found {
-        flex-direction: column-reverse;
-
-        .content {
-            flex: 0;
-            margin-bottom: map-get($spacer, 5);
-
-            align-items: center;
-            h1 {
-                margin-top: 0;
-            }
-        }
-    }
-}

resources/js/components/SMInput.vue

@@ -37,15 +37,15 @@
             @focus="handleFocus"
             @blur="handleBlur"
             @keydown="handleKeydown"></textarea>
-        <div v-else-if="type == 'file'" class="input-file-group">
+        <div v-else-if="type == 'file'" class="sm-input-file-group">
             <input
                 id="file"
                 type="file"
-                class="file"
+                class="sm-file"
                 :accept="props.accept"
                 @change="handleChange" />
             <label class="sm-button" for="file">Select file</label>
-            <div class="file-name">
+            <div class="sm-file-name">
                 {{ modelValue?.name ? modelValue.name : modelValue }}
             </div>
         </div>
@@ -470,5 +470,46 @@ const handleMediaSelect = async (event) => {
             padding-right: map-get($spacer, 1);
         }
     }
+
+    .sm-input-file-group {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        border: 1px solid transparent;
+        border-radius: 12px;
+
+        input {
+            opacity: 0;
+            width: 0.1px;
+            height: 0.1px;
+            position: absolute;
+            margin-left: -9999px;
+        }
+
+        label.button {
+            margin-right: map-get($spacer, 4);
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin: 0;
+            height: 3rem;
+            width: auto;
+        }
+
+        .sm-file-name {
+            display: block;
+            border: 1px solid $border-color;
+            border-top-right-radius: 12px;
+            border-bottom-right-radius: 12px;
+            flex: 1;
+            height: 3rem;
+            background-color: #fff;
+            line-height: 3rem;
+            padding: 0 1rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
 }
 </style>