Style Select2 elements with multiple options

allejo · Sep 16, 2017 · 06ecbd9 · 06ecbd9
1 parent dd5bb69
commit 06ecbd9
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 4 deletions.
diff --git a/Gulpfile.js b/Gulpfile.js
@@ -118,6 +118,7 @@ gulp.task('js:hint', function (cb) {
 var sass = require('gulp-sass');
 var eyeglass = require('eyeglass');
 var combineMq = require('gulp-combine-mq');
+var moduleImporter = require('sass-module-importer');
 
 gulp.task('sass:dev', function (cb) {
     var sourcemaps = require('gulp-sourcemaps');
@@ -126,6 +127,7 @@ gulp.task('sass:dev', function (cb) {
         gulp.src('assets/css/styles.scss'),
         sourcemaps.init(),
         sass(eyeglass({
+            importer: moduleImporter(),
             outputStyle: 'compact'
         })),
         combineMq({
@@ -145,6 +147,7 @@ gulp.task('sass:dist', function (cb) {
     pump([
         gulp.src('assets/css/styles.scss'),
         sass(eyeglass({
+            importer: moduleImporter(),
             outputStyle: 'compressed'
         })),
         combineMq({

diff --git a/assets/css/components/_select2.scss b/assets/css/components/_select2.scss
@@ -13,8 +13,6 @@ span.select2 {
     .select2-selection,
     .select2-selection__rendered {
         @include theme-rule(color, 'body.color');
-
-        line-height: 30px;
     }
 
     .select2-selection__arrow {
@@ -30,6 +28,17 @@ span.select2 {
             @include theme-rule(border-color, 'form.select2.arrow_color_dn');
         }
     }
+
+    .select2-selection__choice {
+        @include theme-rule(background-color, 'form.select2.choice_background');
+        @include theme-rule(color, 'form.select2.choice_color');
+    }
+
+    .select2-selection__choice__remove {
+        @include theme-rule(color, 'form.select2.choice_color');
+
+        margin-right: 4px !important;
+    }
 }
 
 .select2-dropdown {

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -1,8 +1,9 @@
 //
-// Eyeglass modules
+// Eyeglass and Node modules
 //    (things that aren't pure Sass)
 //
 @import 'sassy-data';
+@import 'select2/dist/css/select2.css';
 
 
 //

diff --git a/assets/css/themes/dark.yml b/assets/css/themes/dark.yml
@@ -33,6 +33,8 @@ form:
   select2:
     arrow_color_up: "#ffffff transparent transparent transparent"
     arrow_color_dn: "transparent transparent #ffffff transparent"
+    choice_color: "#ffffff"
+    choice_background: "#1b6a7c"
     selected: "#6a6e76"
     drop_shadow: "0 6px 14px 2px rgba(0, 0, 0, 0.75)"
 

diff --git a/assets/css/themes/light.yml b/assets/css/themes/light.yml
@@ -33,6 +33,8 @@ form:
   select2:
     arrow_color_up: "#888 transparent transparent transparent"
     arrow_color_dn: "transparent transparent #888 transparent"
+    choice_color: "#0366d6"
+    choice_background: "#e1f3ff"
     selected: "#c7c7c7"
     drop_shadow: "0 6px 14px 2px rgba(0, 0, 0, 0.2)"
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "postcss-remove-prefixes": "^1.2.0",
     "postcss-unprefix": "^2.1.1",
     "pump": "^1.0.1",
+    "sass-module-importer": "^1.4.0",
     "select2": "^4.0.3",
     "tinysort": "^2.3.6"
   },

diff --git a/views/layout.html.twig b/views/layout.html.twig
@@ -36,7 +36,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <title>{% spaceless %}{% block title %}{{ app.siteTitle }}{% endblock %}{% endspaceless %}</title>
-        <link rel="stylesheet" href="{{ asset('components/select2/dist/css/select2.css') }}" />
         <link rel="stylesheet" href="{{ asset('includes/ladda/dist/ladda-themeless.min.css') }}" />
         <link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}" />