Skip to content

Instantly share code, notes, and snippets.

@FirstVertex

FirstVertex/Select2 with Primary selected item - 4_styles.css

Last active August 29, 2015 14:26
Show Gist options
  • Save FirstVertex/3ac54c58b5aa56fc6a9b to your computer and use it in GitHub Desktop.
Save FirstVertex/3ac54c58b5aa56fc6a9b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. FirstVertex revised this gist Aug 4, 2015. 1 changed file with 6 additions and 21 deletions.
    27 changes: 6 additions & 21 deletions Select2 with Primary selected item - 4_styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,13 @@
    body {
    font-family: sans-serif;
    }
    #Troops {
    width: 100%;
    }
    label {
    font-weight: bold;
    }
    /* http://www.cssportal.com/css-gradient-generator/ */
    .select2-container-multi .select2-choices .select2-search-choice.select2-primary {
    background-color: green;
    border-color: green;

    background-image: -ms-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: -moz-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: -o-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5CBD73), color-stop(50, #79EF70), color-stop(51, #24E23D), color-stop(100, #1F9C49));

    background-image: -webkit-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -ms-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -moz-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -o-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5CBD73), color-stop(50, #79EF70), color-stop(51, #24E23D), color-stop(100, #1F9C49));
    background-image: -webkit-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    }
    /* visibility is handled by JavaScript */
    #TroopsPrimaryDisplay, #TroopsPrimaryDisplayNone {
  2. FirstVertex revised this gist Aug 4, 2015. 1 changed file with 0 additions and 5 deletions.
    5 changes: 0 additions & 5 deletions Select2 with Primary selected item - 4_styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -32,8 +32,3 @@ background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51
    font-style: italic;
    color: #888;
    }

    /* if using Bootstrap this will happen automatically, i'm just setting it to full width here */
    .select2-container {
    display: block;
    }
  3. FirstVertex revised this gist Aug 4, 2015. 1 changed file with 16 additions and 10 deletions.
    26 changes: 16 additions & 10 deletions Select2 with Primary selected item - 4_styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,13 +7,22 @@ body {
    label {
    font-weight: bold;
    }
    /* for simplicity's sake in the demo, don't worry about gradients and stuff */
    .select2-search-choice {
    background-image: none !important;
    }
    .select2-search-choice.select2-primary {
    background-color: green !important;
    color: white !important;
    /* http://www.cssportal.com/css-gradient-generator/ */
    .select2-container-multi .select2-choices .select2-search-choice.select2-primary {
    background-color: green;
    border-color: green;

    background-image: -ms-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: -moz-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: -o-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5CBD73), color-stop(50, #79EF70), color-stop(51, #24E23D), color-stop(100, #1F9C49));

    background-image: -webkit-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);

    background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    }
    /* visibility is handled by JavaScript */
    #TroopsPrimaryDisplay, #TroopsPrimaryDisplayNone {
    @@ -24,9 +33,6 @@ label {
    color: #888;
    }

    /* just to make the demo look good. probably don't want to copy these styles :) */


    /* if using Bootstrap this will happen automatically, i'm just setting it to full width here */
    .select2-container {
    display: block;
  4. FirstVertex created this gist Aug 4, 2015.
    33 changes: 33 additions & 0 deletions Select2 with Primary selected item - 4_styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    body {
    font-family: sans-serif;
    }
    #Troops {
    width: 100%;
    }
    label {
    font-weight: bold;
    }
    /* for simplicity's sake in the demo, don't worry about gradients and stuff */
    .select2-search-choice {
    background-image: none !important;
    }
    .select2-search-choice.select2-primary {
    background-color: green !important;
    color: white !important;
    }
    /* visibility is handled by JavaScript */
    #TroopsPrimaryDisplay, #TroopsPrimaryDisplayNone {
    display: none;
    }
    #TroopsPrimaryDisplayNone {
    font-style: italic;
    color: #888;
    }

    /* just to make the demo look good. probably don't want to copy these styles :) */


    /* if using Bootstrap this will happen automatically, i'm just setting it to full width here */
    .select2-container {
    display: block;
    }