Develop

react/assets/forus-platform/scss/_common/blocks/block-banner-editor.scss

@@ -49,7 +49,7 @@
             gap: 10px;
             padding: 30px 30px;
             z-index: 1;
-            border-radius: 4px;
+            border-radius: var(--border-radius);
 
             .banner-editor-title {
                 font: 500 15px/20px var(--base-font);
@@ -109,7 +109,7 @@
             .banner-editor-control-color {
                 padding: 0 5px;
                 border: 1px solid var(--border-color);
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 display: flex;
                 flex-direction: row;
                 align-items: center;
@@ -122,7 +122,7 @@
                 .banner-editor-control-color-preview {
                     width: 16px;
                     height: 16px;
-                    border-radius: 4px;
+                    border-radius: var(--border-radius);
                     box-shadow: 1px 1px 5px 0 rgba(25, 39, 52, 0.11);
                 }
 

react/assets/forus-platform/scss/_common/blocks/block-danger_zone.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     border: 1px solid var(--color-danger);
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     background: #fff;
     align-items: center;
     margin-bottom: 20px;

react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss

@@ -122,7 +122,7 @@
             flex-basis: 33.333%;
             margin-right: 20px;
             background: #ffffff;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             box-shadow: 0 2px 8px rgba(#000, 0.1);
             cursor: default;
 

react/assets/forus-platform/scss/_common/blocks/block-mail_preview.scss

@@ -77,7 +77,7 @@ $mailFont: Verdana, Arial, sans-serif;
         padding: 5px 75px;
         font: 600 14px/40px $mailFont;
         color: #fff;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         text-decoration: none;
         background-color: #315efd;
         cursor: pointer;

react/assets/forus-platform/scss/_common/blocks/block-markdownable.scss

@@ -114,7 +114,7 @@
 
         .note-editing-area {
             border: 1px solid var(--border-color);
-            border-radius: 3px;
+            border-radius: var(--border-radius);
             background-color: #ffffff;
 
             .note-placeholder {

react/assets/forus-platform/scss/_common/blocks/block-pincode.scss

@@ -30,7 +30,7 @@
         width: 40px;
         border: 1px solid var(--border-color);
         background: #fff;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         margin-right: 6px;
         padding: 9px 0;
         font: 600 18px/38px 'Open Sans', arial, sans-serif;
@@ -84,7 +84,7 @@
                 background: #b7bfc6;
                 width: 7px;
                 height: 2px;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
             }
         }
     }

react/assets/forus-platform/scss/_common/blocks/block-pre-checks-blocks-editor.scss

@@ -164,7 +164,7 @@
                                         width: 100%;
                                         height: 100%;
                                         object-fit: cover;
-                                        border-radius: 4px;
+                                        border-radius: var(--border-radius);
                                         border: 1px solid var(--border-color);
                                     }
                                 }

react/assets/forus-platform/scss/_common/blocks/block-product.scss

@@ -8,7 +8,7 @@
     .block-product-media {
         flex: 0 0 190px;
         border: 1px solid #d4d9dd;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         overflow: hidden;
 
         img {

react/assets/forus-platform/scss/_common/blocks/block-sessions.scss

@@ -122,7 +122,7 @@
                         display: block;
                         width: 3px;
                         height: 3px;
-                        border-radius: 3px;
+                        border-radius: var(--border-radius);
                         position: absolute;
                         left: 0;
                         top: 50%;

react/assets/forus-platform/scss/_common/blocks/block-subsidy-product-overview.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     background: #ffffff;
-    border-radius: 5px;
+    border-radius: var(--border-radius);
     box-shadow: 0 2px 8px rgba(#000, 0.1);
     margin: 0 0 30px;
     overflow: hidden;

react/assets/forus-platform/scss/_common/blocks/block-voucher-records-editor.scss

@@ -1,6 +1,6 @@
 &.block-voucher-records-editor {
     .block-voucher-record-list {
-        border-radius: 5px;
+        border-radius: var(--border-radius);
         border: 1px dashed var(--border-color);
         padding: 15px;
         margin-bottom: 20px;

react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature-text-image-columns.scss

@@ -59,7 +59,7 @@
                 display: block;
                 width: 5px;
                 height: 100%;
-                border-radius: 3px;
+                border-radius: var(--border-radius);
                 background: linear-gradient(0deg, #7db75a 0%, #7db75a 100%), #e6eeaf;
                 position: absolute;
                 top: 0;

react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature.scss

@@ -44,7 +44,7 @@
         .block-feature-label {
             font: 600 11px/14px var(--base-font);
             padding: 2px 4px;
-            border-radius: 4px;
+            border-radius: var(--border-radius);
             border: 1px solid #dadfe5;
             background: #ebeef1;
             color: #151b26;

react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-features.scss

@@ -27,7 +27,7 @@
             .features-label {
                 font: 600 11px/14px var(--base-font);
                 padding: 2px 4px;
-                border-radius: 4px;
+                border-radius: var(--border-radius);
                 border: 1px solid #dadfe5;
                 background: #ebeef1;
                 color: #151b26;

react/assets/forus-platform/scss/_common/components/buttons.scss

@@ -1,7 +1,7 @@
 .button {
     display: inline-flex;
     width: fit-content;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     font: 500 13px/20px var(--base-font);
     padding: 7px 10px;
     box-shadow: var(--box-shadow);

react/assets/forus-platform/scss/_common/components/forms.scss

@@ -1,20 +1,4 @@
 .form {
-    datepicker,
-    .datepicker {
-        border: none;
-        outline: none;
-        position: relative;
-
-        .form-control {
-            position: absolute;
-            left: -1px;
-            top: -1px;
-            right: -1px;
-            bottom: -1px;
-            width: calc(100% + 2px) !important;
-        }
-    }
-
     .form-label {
         display: block;
         cursor: default;
@@ -224,7 +208,7 @@
         color: var(--text-color);
         font: 500 13px/24px var(--base-font);
         transition: background-color 0.4s ease, border 0.4s ease;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         appearance: none;
 
         &[disabled] {
@@ -387,7 +371,7 @@
         height: 36px;
         color: var(--text-color);
         font: 600 16px/24px var(--base-font);
-        border-radius: 3px;
+        border-radius: var(--border-radius);
 
         &.form-value-placeholder-sm {
             padding: 0 0;
@@ -467,132 +451,6 @@
             }
         }
 
-        &.form-group-inline {
-            margin-bottom: 10px;
-            flex-wrap: wrap;
-            position: relative;
-
-            .block-form_tooltip {
-                position: absolute;
-                top: 20px;
-                right: -45px;
-                transform: translate(0, -50%);
-                z-index: 5;
-            }
-
-            & > .form-label {
-                width: 200px;
-                padding-top: 8px;
-                padding-bottom: 8px;
-                margin: 0;
-                text-align: right;
-                padding-right: 10px;
-                float: left;
-                color: black;
-
-                &.form-label-required {
-                    &:before {
-                        content: '*';
-                        padding-right: 2px;
-                        display: inline-block;
-                        margin-left: -8px;
-                        width: 8px;
-                    }
-
-                    &:after {
-                        display: none;
-                    }
-                }
-            }
-
-            & > .form-offset,
-            & > .form-control,
-            & > .react-datepicker-wrapper {
-                width: calc(100% - 200px);
-                float: left;
-
-                .form-toggle {
-                    padding: 8px 0;
-                }
-            }
-
-            & > .form-error {
-                margin-left: 200px;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            & > .form-title {
-                padding: 8px 0;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            &.form-group-inline-xl {
-                & > .form-label {
-                    width: 250px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 250px);
-                }
-
-                & > .form-error {
-                    margin-left: 250px;
-                    width: calc(100% - 250px);
-                }
-            }
-
-            &.form-group-inline-lg {
-                & > .form-label {
-                    width: 145px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 145px);
-                }
-
-                & > .form-error {
-                    margin-left: 145px;
-                    width: calc(100% - 145px);
-                }
-            }
-
-            &.form-group-inline-md {
-                & > .form-label {
-                    width: 125px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 125px);
-                }
-
-                & > .form-error {
-                    margin-left: 125px;
-                    width: calc(100% - 125px);
-                }
-            }
-
-            &.form-group-inline-sm {
-                & > .form-label {
-                    width: 80px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 80px);
-                }
-
-                & > .form-error {
-                    margin-left: 80px;
-                    width: calc(100% - 80px);
-                }
-            }
-        }
-
         &:last-child,
         &.form-group-last {
             margin-bottom: 0 !important;
@@ -601,7 +459,7 @@
 
     .control-frame {
         border: 1px solid #eef1f5;
-        border-radius: 5px;
+        border-radius: var(--border-radius);
         padding: 10px 15px 10px;
         margin: 5px 0 10px;
         font: 400 14px var(--base-font);
@@ -899,6 +757,7 @@
         .select-control {
             width: var(--selector-width);
             position: absolute;
+            z-index: 2;
 
             .select-control-input {
                 .form-control:not([type='radio']):not([type='checkbox']) {
@@ -959,7 +818,7 @@
             margin-right: 5px;
             margin-left: -25px;
             float: left;
-            border-radius: 3px;
+            border-radius: var(--border-radius);
 
             .mdi {
                 color: #262626;
@@ -1125,7 +984,7 @@
                 color: #9ca6af;
                 background: #f6f9fc;
                 border: 1px dashed #d4d9dd;
-                border-radius: 3px;
+                border-radius: var(--border-radius);
                 word-wrap: break-word;
                 white-space: pre-wrap;
             }
@@ -1136,24 +995,4 @@
         font: 600 14px/20px var(--base-font);
         color: #151b26;
     }
-
-    @media screen and (max-width: 600px) {
-        .form-group {
-            &.form-group-inline {
-                .form-label {
-                    width: auto !important;
-                    padding: 3px 0 !important;
-
-                    &.form-label-required {
-                        padding-left: 5px !important;
-                    }
-                }
-
-                .form-offset,
-                .form-control {
-                    width: 100% !important;
-                }
-            }
-        }
-    }
 }