basic styling for form-select

LimeSurvey · Mar 23, 2023 · c549d7a · c549d7a
1 parent 3eec6fa
commit c549d7a
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 7 deletions.
diff --git a/assets/survey_themes/ls6_surveytheme/forms/forms.scss b/assets/survey_themes/ls6_surveytheme/forms/forms.scss
@@ -2,6 +2,7 @@ $input-padding-y    : 10px;
 $input-padding-x    : 12px;
 $input-line-height  : 16px;
 $input-border-width : 2px;
+$dropdown-font-size: $font-size-sm;
 // input field
 .form-control {
     padding      : $input-padding-y $input-padding-x;
@@ -27,3 +28,11 @@ textarea {
     resize: both;
     max-width: 100%;
 }
+
+// select
+.form-select {
+    font-weight  : $font-weight-normal;
+    font-size    : $dropdown-font-size;
+    line-height  : $line-height-16;
+    border-width : $input-border-width;
+}
diff --git a/assets/survey_themes/ls6_surveytheme/forms/forms_colors.scss b/assets/survey_themes/ls6_surveytheme/forms/forms_colors.scss
@@ -1,8 +1,9 @@
-$input-color              : $g-900;
-$input-border-color       : $g-700;
-$input-box-shadow         : 4px 4px 0 $elevation-shadow;
-$input-focus-border-color : $g-900;
-$input-group-addon-color  : $white;
+$input-color                 : $g-900;
+$input-border-color          : $g-700;
+$input-border-color-disabled : $g-600;
+$input-box-shadow            : 4px 4px 0 $elevation-shadow;
+$input-focus-border-color    : $g-900;
+$input-group-addon-color     : $white;
 // input field
 .form-control {
     color        : $input-color;
@@ -103,4 +104,33 @@ textarea,
     }
 }
 
+// select
+.form-select {
+    border-color : $input-border-color;
+
+    &:focus {
+        box-shadow : 4px 4px 0px $elevation-shadow;
+        border-color: $input-border-color;
+    }
+
+    &:disabled {
+        border-color     : $input-border-color-disabled;
+        background-color : $g-400;
+        color            : $g-600;
+    }
+
+    &.ls-important-field {
+        border     : 2px solid $input-focus-border-color !important;
+        box-shadow : 8px 8px 0px $g-200;
+
+        &:focus {
+            box-shadow : 8px 8px 0px $elevation-shadow;
+        }
+
+        &:disabled, &[readonly] {
+            border           : 2px solid $input-border-color-disabled !important;
+            background-color : $g-400;
+        }
+    }
+}
 
diff --git a/themes/survey/ls6_surveytheme/css/theme.css b/themes/survey/ls6_surveytheme/css/theme.css
@@ -847,6 +847,13 @@ textarea {
   max-width: 100%;
 }
 
+.form-select {
+  font-weight: 400;
+  font-size: 0.9975rem;
+  line-height: 16px;
+  border-width: 2px;
+}
+
 .table > tbody > tr > th {
   vertical-align: middle;
 }

diff --git a/themes/survey/ls6_surveytheme/css/variations/green.css b/themes/survey/ls6_surveytheme/css/variations/green.css
diff --git a/themes/survey/ls6_surveytheme/css/variations/red.css b/themes/survey/ls6_surveytheme/css/variations/red.css