select2-foundation 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 4feffd6f67341d3d82a910babe7e6458fbafc4bf
+  data.tar.gz: b66f6b36754d333309c62e68fc97c28b7b5eea28
+SHA512:
+  metadata.gz: aaab57ea2070b62525e2db3a5dee38685d1b6cbc138ce13dab446a33a74d0e829f539640205771fcfd911d9cde772258d86acc7f722bbbaa257127b1e42c996d
+  data.tar.gz: d9cb03af5def307eca7a6ea1044b128cef8ff94fd138a3b505644004390c32e541d7d814c1fe1827cefa5676b8ae9a877d4f4cefa20507d41eaf59c34e95f17a

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 William Wedler
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -0,0 +1,33 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Select2Foundation'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/styleguide/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/lib/assets/stylesheets/select2/_common-select2-foundation.scss

@@ -0,0 +1,245 @@
+// -*- mode: css -*-
+
+@mixin foundation-input-defaults {
+    background-color: $input-background;
+    border: $input-border;
+    border-radius: $select-radius;
+    color: $input-color;
+    font-family: $input-font-family;
+    font-size: $input-font-size;
+}
+
+span.select2-container--foundation {
+    vertical-align: top;
+}
+
+span.select2-container--foundation .selection {
+    margin: 0 0 $form-spacing;
+}
+
+.select2-container--foundation{
+    .select2-selection {
+        @include foundation-input-defaults;
+        background: $select-background;
+        outline: 0;
+    }
+
+    /**
+     * Search field in the Select2 dropdown.
+     */
+    .select2-search--dropdown {
+        .select2-search__field {
+            @include foundation-input-defaults;
+            border-radius: $input-radius;
+        }
+    }
+
+    /**
+     * No outline for all search fields - in the dropdown
+     * and inline in multi Select2s.
+     */
+
+    .select2-search__field {
+        outline: 0;
+
+        &::-webkit-input-placeholder {
+            color: $input-color-placeholder;
+        }
+
+        /* Firefox 18- */
+        &:-moz-placeholder {
+            color: $input-color-placeholder;
+        }
+
+        /**
+         * Firefox 19+
+         *
+         * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
+         */
+        &::-moz-placeholder {
+            color: $input-color-placeholder;
+            opacity: 1;
+        }
+
+        &:-ms-input-placeholder {
+            color: $input-color-placeholder;
+        }
+    }
+
+    .select2-results__option{
+        &[role=group] {
+            padding: 0;
+
+            strong {
+                padding-left: rem-calc(2);                
+            }
+        }
+        /**
+         * Disabled results.
+         *
+         * @see https://select2.github.io/examples.html#disabled-results
+         */
+        &[aria-disabled=true] {
+            color: $dropdown-link-disabled-color;
+            cursor: $input-cursor-disabled;
+        }
+
+        /**
+         * Hover state.
+         */
+        &[aria-selected=true]{
+        }
+
+        /**
+         * Selected state.
+         */
+        &--highlighted[aria-selected] {
+            background-color: $dropdown-link-active-bg;
+            color: $dropdown-link-active-color;
+        }
+
+    }
+
+    &.select2-container--focus {
+        .select2-selection {
+            border: $input-border-focus;
+        }
+    }
+
+    &.select2-container--open {
+        .select2-selection {
+            border: $input-border-focus;
+            // would like to have bottom
+            // with 0 radius but can not 
+            // know if opening above or below
+            border-radius:$select-radius;
+        }
+    }
+
+    
+
+    &.select2-container--open{
+        /**
+         * Make the dropdown arrow point up while the dropdown is visible.
+         */
+        .select2-selection__arrow{
+            b{
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .select2-choice {
+        box-shadow: none;
+        background-image: none;
+
+        div {
+            background-clip: padding-box;
+        }
+        .select2-arrow{
+            border: 0px;
+            border-radius: 0px;
+            background: transparent;
+            background-image: none;
+        }
+    }
+    *:focus{
+        outline:0px;
+    }
+    &.select2-dropdown--above .select2-choice {
+    }
+
+    /* Clear the selection. */
+    .select2-selection__clear {
+        color: $clear-selection-color;
+        cursor: pointer;
+        float: left;
+        font-weight: bold;
+        margin-right: 0px;
+        &:hover {
+            color: $select-triangle-color;
+        }
+    }
+
+
+    /**
+     * Address disabled Select2 styles.
+     *
+     * @see https://select2.github.io/examples.html#disabled
+     * @see http://getbootstrap.com/css/#forms-control-disabled
+     */
+    &.select2-container--disabled {
+
+        .select2-selection {
+            border: $input-border;
+        }
+
+        .select2-selection,
+        .select2-search__field {
+            cursor: $input-cursor-disabled;
+        }
+
+        .select2-selection,
+        .select2-selection--multiple .select2-selection__choice {
+            background-color: $input-background-disabled;
+            color: foreground($input-background-disabled);
+        }
+
+        .select2-selection__clear,
+        .select2-selection--multiple .select2-selection__choice__remove {
+            display: none;
+        }
+    }
+
+
+    /*------------------------------------*\
+            #DROPDOWN
+    \*------------------------------------*/
+    .select2-dropdown {
+        border: $input-border-focus;
+        border-top: $input-border;
+        background: $select-background;
+        border-radius:$select-radius;
+        overflow-x: hidden;
+        margin-top: rem-calc(-1);
+        &--above {
+            margin-top: rem-calc(1);
+            border-radius:$select-radius;
+            border-top: $input-border-focus;
+            border-bottom: $input-border;
+        }
+    }
+    .select2-results > .select2-results__options {
+        /* Limit the dropdown height. */
+        max-height: 200px;
+        overflow-y: auto;
+    }
+}
+
+/**
+ * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9
+ *
+ * Provides `!important` for certain properties of the class applied to the
+ * original `<select>` element to hide it.
+ *
+ * @see https://github.com/select2/select2/pull/3301
+ * @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada
+ */
+.form-control.select2-hidden-accessible {
+    position: absolute !important;
+    width: 1px !important;
+}
+
+
+/**
+ * Display override for inline forms
+ */
+.input-group span.select2-container--foundation {
+    margin: 0;
+    vertical-align: middle;
+
+    .selection .select2-selection {
+        vertical-align: middle;
+        border-radius: 0;
+    }
+}

data/lib/assets/stylesheets/select2/_multiple-select2-foundation.scss

@@ -0,0 +1,73 @@
+// -*- mode: css -*-
+
+/****** Multiple SCSS *******/
+.select2-container--foundation{
+    .select2-selection--multiple{
+
+        .select2-selection__choice__remove:hover{
+            cursor: pointer;
+        }
+
+        ul.select2-selection__rendered,
+        .select2-selection__rendered {
+            display: inherit;
+
+            box-sizing: border-box;
+            list-style: none;
+            margin: 0;
+            padding: 0 5px;
+            width: 100%;
+        }
+        .select2-selection__choice{
+            border-radius: 0;
+            padding: rem-calc(3) rem-calc(5);
+            cursor: default;
+            float: left;
+            margin-right: rem-calc(5);
+            margin-top: rem-calc(2);
+            margin-bottom: rem-calc(2);
+            border: $input-border-focus;
+        }
+        .select2-selection__choice__remove{
+            margin-right: 6px;
+            margin-left: 6px;
+            float: right;
+        }
+
+        .select2-search--inline {
+            .select2-search__field {
+                background: transparent;
+                line-height: $global-lineheight;
+                border: 0;
+                margin-top: 0;
+                min-width: rem-calc(80);
+
+                height: $input-height-base - rem-calc(1);
+                box-shadow: none;
+                margin: 0;
+                margin-right: rem-calc(-32);
+            }
+        }
+
+        .select2-selection__choice__remove {
+            color: $clear-selection-color;
+            cursor: pointer;
+            display: inline-block;
+            font-weight: bold;
+            margin-right: $padding-base-vertical / 2;
+
+            &:hover {
+                color: $select-triangle-color
+            }
+        }
+
+        /* Clear the selection.  */
+        .select2-selection__clear {
+            margin-right: rem-calc(3);
+            margin-top: $padding-base-vertical;
+        }
+    }
+    .select2-container--focus .select2-selection--multiple{
+        
+    }
+}

data/lib/assets/stylesheets/select2/_single-select2-foundation.scss

@@ -0,0 +1,47 @@
+// -*- mode: css -*-
+
+/****** Single SCSS *******/
+.select2-container--foundation{
+
+    .select2-selection--single,
+    .selection .select2-selection--single
+    {
+        height: $input-height-base;
+        line-height: $global-lineheight;
+        padding: ($form-spacing / 2);        
+
+        .select2-selection__rendered{
+            color: $input-color;
+        }
+        .select2-selection__arrow{
+            height: $input-height-base;
+            position: absolute;
+            top: 0;
+            right: 1px;
+            width: 20px;
+            b {
+                border-color: $select-triangle-color transparent transparent transparent;
+                top: 50%;
+                border-style: solid;
+                border-width: 6px 4px 0 4px;
+                height: 0;
+                left: 50%;
+                margin-left: -4px;
+                margin-top: -2px;
+                position: absolute;
+                width: 0;
+            }
+        }
+        .select2-selection__placeholder {
+            color: $input-color-placeholder;
+        }
+        .select2-selection__arrow b {
+
+        }
+        .select2-selection__clear {
+            cursor: pointer;
+            float: right;
+            font-weight: bold;
+        }
+    }
+}

data/lib/assets/stylesheets/select2/select2-foundation.scss

@@ -0,0 +1,5 @@
+// -*- mode: css -*-
+@import "settings_select2";
+@import "common-select2-foundation";
+@import "single-select2-foundation";
+@import "multiple-select2-foundation";

data/lib/generators/select2_foundation/install_generator.rb

@@ -0,0 +1,44 @@
+require 'rails/generators'
+
+module Select2Foundation
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      desc "Install Select2-Foundation within a Rails project"
+      source_root File.join(File.dirname(__FILE__), "templates")
+      class_option :singular, :desc => "When true, create settings that do not import from Zurb scss", :type => :boolean
+
+      def add_assets
+        create_app_scss true
+        insert_into_file File.join(stylesheets_base_dir, "application#{detect_css_format[0]}"), "#{detect_css_format[1]} require select2/select2-foundation\n", :after => "foundation_and_overrides\n"
+        if not options.singular?
+          insert_into_file  File.join(stylesheets_base_dir, "_settings_select2.scss"), "\n@import 'settings';\n@import 'foundation';\n", :after => "// foundation settings"
+        end
+      end
+
+      def detect_css_format
+        %w(.css .css.sass .sass .css.scss .scss).each do |ext|
+          if File.exist?(File.join(stylesheets_base_dir, "application#{ext}"))
+            if ext.include?(".sass") || ext.include?(".scss")
+              return [ext, "//="]
+            else
+              return [ext, " *="]
+            end
+          end
+        end
+      end
+
+      def create_app_scss(call=false)
+        if call
+          template "_settings_select2.scss", File.join(stylesheets_base_dir, "_settings_select2.scss")
+        end
+      end
+
+      private
+
+      def stylesheets_base_dir
+        File.join("app", "assets", "stylesheets")
+      end
+
+    end
+  end
+end

data/lib/generators/select2_foundation/templates/_settings_select2.scss

@@ -0,0 +1,143 @@
+// -*- mode: css -*-
+
+//////////////////////
+// foundation settings
+//<% if options.singular? %>
+
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group functions
+////
+
+$global-font-size: 100% !default;
+
+// scss-lint:disable ZeroUnit
+
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+///
+/// @param {Number} $num - Number to strip unit from.
+///
+/// @returns {Number} The same number, sans unit.
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+/// Converts one or more pixel values into matching rem values.
+///
+/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you are using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
+///
+/// @returns {List} A list of converted values.
+@function rem-calc($values, $base: null) {
+  $rem-values: ();
+  $count: length($values);
+
+  // If no base is defined, defer to the global font size
+  @if $base == null {
+    $base: $global-font-size;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == '%' {
+    $base: ($base / 100%) * 16px;
+  }
+
+  @if $count == 1 {
+    @return -zf-to-rem($values, $base);
+  }
+
+  @for $i from 1 through $count {
+    $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
+  }
+
+  @return $rem-values;
+}
+
+/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
+/// @access private
+///
+/// @param {Number} $value - Pixel value to convert.
+/// @param {Number} $base [null] - Base for pixel conversion.
+///
+/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
+@function -zf-to-rem($value, $base: null) {
+  // Check if the value is a number
+  @if type-of($value) != 'number' {
+    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+    @return $value;
+  }
+
+  // Calculate rem if units for $value is not rem
+  @if unit($value) != 'rem' {
+    $value: strip-unit($value) / strip-unit($base) * 1rem;
+  }
+
+  // Turn 0rem into 0
+  @if $value == 0rem {
+    $value: 0;
+  }
+
+  @return $value;
+}
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$primary-color: #2199e8;
+$secondary-color: #777;
+$success-color: #3adb76;
+$warning-color: #ffae00;
+$alert-color: #ec5840;
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-text-direction: ltr;
+
+$input-color: $black;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: default;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-radius: $global-radius;
+
+$select-background: $white;
+$select-triangle-color: #333;
+$select-radius: $global-radius;
+
+$form-spacing: rem-calc(16);
+
+//<% end %>///////////////////////////
+// select2 defined settings
+
+$padding-base-horizontal: ($form-spacing / 2);
+$padding-base-vertical: ($form-spacing / 2);
+$input-height-base: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+
+// color settings
+$clear-selection-color: $dark-gray;
+$dropdown-link-active-bg: $primary-color;
+$dropdown-link-active-color: foreground($dropdown-link-active-bg);
+$dropdown-link-disabled-color: $dark-gray;
+$input-color-placeholder: $dark-gray;

data/lib/select2-foundation/engine.rb

@@ -0,0 +1,9 @@
+require 'rails'
+
+module Select2Foundation
+  module Rails
+    class Engine < ::Rails::Engine
+      config.assets.paths << File.expand_path("../assets/stylesheets", __FILE__)
+    end
+  end
+end

data/lib/select2-foundation/version.rb

@@ -0,0 +1,3 @@
+module Select2Foundation
+  VERSION = "0.1.0"
+end

data/lib/select2-foundation.rb

@@ -0,0 +1,6 @@
+require "select2-foundation/version"
+module Select2Foundation
+  module Rails
+    require "select2-foundation/engine"
+  end
+end

data/lib/tasks/select2-foundation_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :select2_foundation do
+#   # Task goes here
+# end

data/test/demoing

@@ -0,0 +1 @@
+git subtree push --prefix {rails app} heroku master

data/test/select2_foundation_test.rb

@@ -0,0 +1,7 @@
+require 'test_helper'
+
+class Select2FoundationTest < ActiveSupport::TestCase
+  test "truth" do
+    assert_kind_of Module, Select2Foundation
+  end
+end