¨4.0.1¨

Modules/Option/Resources/assets/admin/sass/main.scss

@@ -1,37 +1,64 @@
-.new-option {
-    .checkbox {
-        margin: 30px 0 0;
-        display: inline-block;
+.options-group {
+    .option-values {
+        margin-top: 15px;
     }
+}
 
-    .delete-option {
-        margin-top: 25px;
-        padding: 10px 15px;
+.new-option {
+    overflow: hidden;
+    margin-bottom: -15px;
+
+    .checkbox {
+        margin: 26px 0 0;
+        display: inline-block;
     }
 }
 
 .options-group-wrapper {
-    .panel-title a {
+    .panel-title [data-toggle="collapse"] {
+        font-size: 14px;
         position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 9px 15px;
         text-decoration: none;
         overflow: hidden;
+        cursor: pointer;
 
-        > .drag-icon {
+        &:after {
+            top: 11px !important;
+        }
+
+        .drag-handle {
             font-size: 16px;
             color: #737881;
-            cursor: move;
-            vertical-align: top;
-            margin: 4px 10px 0 0;
+            margin-right: 11px;
             white-space: nowrap;
-            display: inline-block;
-            i {
-                float: left;
+            cursor: move;
 
+            i {
                 &:nth-child(2) {
-                    margin-left: 1px;
+                    margin-left: -3px;
                 }
             }
         }
+
+        .delete-option {
+            width: 30px;
+            display: flex;
+            align-items: center;
+            align-self: stretch;
+            justify-content: center;
+            margin-right: 20px;
+            color: #4d4d4d;
+            transition: 150ms ease-in-out;
+            cursor: pointer;
+
+            &:hover {
+                color: #333333;
+            }
+        }
     }
 
     .form-group {
@@ -47,7 +74,7 @@
 
     thead th {
         &:first-child {
-            width: 40px;
+            width: 35px;
         }
 
         &:last-child {
@@ -76,39 +103,8 @@
     }
 }
 
-.add-global-option {
-    .form-group {
-        margin-left: 0 !important;
-        margin-right: 10px !important;
-    }
-
-    > button {
-        margin-bottom: 15px;
-    }
-}
-
-
 @media screen and (max-width: 1199px) {
-    .add-global-option {
-        float: none !important;
-        clear: both;
-    }
-
-    .new-option {
-        .checkbox {
-            margin-top: 4px;
-        }
-
-        .delete-option {
-            margin-top: 0;
-        }
-
-        .p-l-0 {
-            padding-right: 0;
-        }
-    }
-
-    .options-group-wrapper {
+    .options-group {
         .option-values {
             .option-text,
             .option-select {
@@ -120,8 +116,82 @@
 
 @media screen and (max-width: 991px) {
     .new-option {
+        .form-group {
+            label {
+                margin-bottom: 6px;
+                padding-top: 0;
+            }
+        }
+
         .checkbox {
-            padding-top: 7px;
+            padding-top: 8px;
+
+            label {
+                padding-top: 0;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .new-option {
+        > .row {
+            > .col-sm-6 {
+                padding-right: 10px;
+            }
+
+            > .col-sm-3 {
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .options-group {
+        .option-values {
+            margin-top: 20px;
+
+            .option-select {
+                .table {
+                    > tbody {
+                        > tr {
+                            > td {
+                                &:nth-child(2) {
+                                    min-width: 160px;
+                                }
+
+                                &:nth-child(3) {
+                                    min-width: 145px;
+                                }
+
+                                &:nth-child(4) {
+                                    min-width: 110px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .new-option {
+        margin-bottom: -10px;
+
+        > .row {
+            > div {
+                &:nth-child(3) {
+                    .form-group {
+                        margin-bottom: 10px;
+                    }
+                }
+            }
+        }
+
+        .checkbox {
+            margin-top: -3px;
         }
     }
 }