tsett

public/assets/css/category.css

@@ -0,0 +1,103 @@
+.ui-slider {
+    height: 6px;
+    margin: 16px 16px 0;
+    border-radius: 3px;
+    background: #e9ecef;
+}
+
+.ui-slider .noUi-background {
+    background: linear-gradient(90deg, #e9ecef 0%, #dee2e6 100%);
+    border-radius: 3px;
+}
+
+.ui-slider .noUi-handle {
+    width: 22px;
+    height: 22px;
+    top: -8px;
+    right: -11px;
+    background: #fff;
+    border: 3px solid var(--dark-green);
+    border-radius: 50%;
+    box-shadow:
+        0 4px 12px #3233293b,
+        0 2px 4px rgba(0, 0, 0, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+}
+
+.ui-slider .noUi-handle.noUi-active {
+    transform: scale(1.1) !important;
+    border-width: 4px;
+    border-color: var(--dark-green);
+    box-shadow: 0 0 0 4px #3233293b;
+}
+
+.ui-slider .noUi-handle:before,
+.ui-slider .noUi-handle:after {
+    display: none;
+}
+
+.ui-slider.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.ui-slider.disabled .noUi-handle {
+    cursor: not-allowed;
+}
+
+input:disabled {
+    background-color: #e9ecef;
+    cursor: not-allowed;
+}
+
+.noUi-connect {
+    background: #fff;
+}
+
+.filters .form-control:focus {
+    box-shadow: none;
+    border-color: var(---dark-green);
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 2rem;
+    cursor: pointer;
+}
+
+.form-check-input:checked {
+    background-color: var(--dark-green);
+    border-color: var(--dark-green);
+}
+
+.form-check-input:focus,
+.login-form .form-control:focus {
+    border-color: var(--dark-green);
+    outline: 0;
+    box-shadow: none;
+}
+
+
+@media (max-width: 767.98px) {
+    .filters.mobile-open {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.678);
+        z-index: 1050;
+        overflow-y: auto;
+        padding: 1rem;
+    }
+
+    body.filters-open {
+        overflow: hidden;
+    }
+}