alchemy 1.0.0

data/app/assets/javascripts/alchemy/flash_messages.js

@@ -0,0 +1,12 @@
+var CUI = CUI ? CUI : {};
+
+CUI.closeFlashMessage = function() {
+  $('.flash_hud .control').click(function(){
+    $(this).closest($('.flash_hud')).slideUp(100).fadeOut(100);
+  });
+};
+
+$(document).ready(function() {
+  CUI.closeFlashMessage();
+});
+

data/app/assets/javascripts/alchemy/forms.js

@@ -0,0 +1,25 @@
+var CUI = CUI ? CUI : {};
+
+
+CUI.toggleInput = function() {
+  var inputValue = "";
+
+  $('.control_group.checkbox.inline .control input[type="checkbox"]').click(function(){
+    var checkbox = $(this);
+    var input = $('.control_group.checkbox.inline .input > input');
+    var isDisabled = checkbox.prop('checked');
+
+    input.attr('disabled', isDisabled);
+
+    if(isDisabled) {
+      inputValue = input.val();
+      input.val('');
+    } else {
+      input.val(inputValue);
+    }
+  });
+};
+
+$(document).ready(function() {
+  CUI.toggleInput();
+});

data/app/assets/javascripts/alchemy/i18n.js

@@ -0,0 +1,36 @@
+/**
+ Copyright 2012 Red Hat, Inc.
+
+ This software is licensed to you under the GNU General Public
+ License as published by the Free Software Foundation; either version
+ 2 of the License (GPLv2) or (at your option) any later version.
+ There is NO WARRANTY for this software, express or implied,
+ including the implied warranties of MERCHANTABILITY,
+ NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ have received a copy of GPLv2 along with this software; if not, see
+ http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+*/
+var CUI = CUI || {};
+
+CUI.i18n = (function(){
+    var strings = {},
+
+        localize = function(data){
+            var key;
+
+            for (key in data) {
+                if( data.hasOwnProperty(key) ){
+                    strings[key] = data[key];
+                }
+            }
+        },
+        get_string = function(string) {
+            return strings[string];
+        };
+
+    return {
+        localize    : localize,
+        get_string  : get_string
+    }
+
+})();

data/app/assets/javascripts/alchemy/login.js

@@ -0,0 +1,130 @@
+/**
+ Copyright 2011 Red Hat, Inc.
+
+ This software is licensed to you under the GNU General Public
+ License as published by the Free Software Foundation; either version
+ 2 of the License (GPLv2) or (at your option) any later version.
+ There is NO WARRANTY for this software, express or implied,
+ including the implied warranties of MERCHANTABILITY,
+ NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ have received a copy of GPLv2 along with this software; if not, see
+ http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+*/
+var CUI = CUI ? CUI : {};
+CUI.Login = {};
+
+$(document).ready(function() {
+
+    CUI.Login.Events.register();
+
+    $('#password_link').click(function(e){
+        e.preventDefault();
+        $('.card#password_reset').animate({ 'left' : '0px' }, 'slow').css('z-index', 1);
+    });
+    $('#username_link').click(function(e){
+        e.preventDefault();
+        $('.card#username_recovery').animate({ 'left' : '0px' }, 'slow').css('z-index', 1);
+    });
+    $('#password_reset_return_link').click(function(e){
+        e.preventDefault();
+        $('.card#password_reset').animate({ 'left' : '-360px' }, 'slow', function(){
+            $(this).css('z-index', -1);
+        });
+    });
+    $('#username_recovery_return_link').click(function(e){
+        e.preventDefault();
+        $('.card#username_recovery').animate({ 'left' : '-360px' }, 'slow', function(){
+            $(this).css('z-index', -1);
+        });
+    });
+    $('#login_btn').click(function(){
+      CUI.Login.Actions.toggleSpinner();
+    });
+    $(document).bind("ajax:complete",
+          function(evt, data, status, xhr){
+            if(status == "success") {
+              $('form .spinner').fadeOut('fast');
+            }
+          }
+    );
+    $('#username').focus();
+});
+
+CUI.Login.Actions = (function($){
+    var show_password = function(input_field, input_reveal_field, show){
+            var password;
+
+            if( show ){
+                password = input_field.val();
+                input_field.hide();
+                input_reveal_field.val(password).show();
+            } else {
+                password = input_reveal_field.val();
+                input_reveal_field.hide();
+                input_field.val(password).show();
+            }
+        },
+        add_hash_input = function(parent){
+            if (window.location.hash != "") {
+                $('<input>').attr({
+                    type: 'hidden',
+                    id: 'hash_anchor',
+                    name: 'hash_anchor',
+                    value: window.location.hash
+                }).appendTo(parent);
+            }
+        },
+        interstitial_switcher_animation = function(num_orgs, redir_path){
+          if(parseInt(num_orgs, 10) > 1){
+            $('#interstitial').trigger({type:'login'});
+          } else if(redir_path){
+            CUI.Login.Actions.toggleSpinner();
+            window.location.href = redir_path;
+          } else {
+            window.location.reload();
+          }
+        },
+        toggleSpinner = function(){
+          $('#login_form .spinner').fadeToggle('fast');
+        },
+        redirecter = function(url){
+          if ($.browser.msie){
+            window.location = url;
+          } else {
+            window.location.href = url;
+          }
+        };
+
+    return {
+        show_password   : show_password,
+        add_hash_input  : add_hash_input,
+        interstitial_switcher_animation : interstitial_switcher_animation,
+        redirecter : redirecter,
+        toggleSpinner : toggleSpinner
+    };
+
+})(jQuery);
+
+CUI.Login.Events = (function($, actions){
+    var register = function(){
+            $('#reveal').change(function(){
+                actions.show_password($('#password-input'), $('#password-input-reveal'), $(this).is(':checked'));
+            });
+            $('#login_form').live('submit', function(e) {
+                actions.add_hash_input(this);
+            });
+            //if you have an #interstitial container for an interstitial, this will function. otherwise it won't.
+            // this is for alchemy
+            var interstitial = $('#interstitial');
+            if (interstitial.length){
+              $('#interstitial').bind('login', function(event){
+                CUI.Login.Actions.toggleSpinner();
+                interstitial.animate({ 'left' : '0px' }, 'slow').css('z-index', 1);
+              });
+            }
+        };
+    return {
+        register    : register
+    }
+
+})(jQuery, CUI.Login.Actions);

data/app/assets/javascripts/alchemy/password.js

@@ -0,0 +1,99 @@
+/**
+ Copyright 2011 Red Hat, Inc.
+
+ This software is licensed to you under the GNU General Public
+ License as published by the Free Software Foundation; either version
+ 2 of the License (GPLv2) or (at your option) any later version.
+ There is NO WARRANTY for this software, express or implied,
+ including the implied warranties of MERCHANTABILITY,
+ NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ have received a copy of GPLv2 along with this software; if not, see
+ http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+*/
+var CUI = CUI ? CUI : {};
+CUI.Password = {};
+
+$(document).ready(function() {
+    var actions = CUI.Password.Actions($('#save_password'));
+    CUI.Password.Events.register(actions);
+});
+
+CUI.Password.Events = (function($){
+    var register = function(actions) {
+            $('#password_field').live('keyup', function(){
+                var password        = $('#password_field').val(),
+                    confirm         = $('#confirm_field').val(),
+                    conflict_tag    = $('#password_conflict');
+
+                actions.verifyPassword(password, confirm, conflict_tag);
+            });
+            $('#confirm_field').live('keyup', function(){
+                var password        = $('#password_field').val(),
+                    confirm         = $('#confirm_field').val(),
+                    conflict_tag    = $('#password_conflict');
+
+                actions.verifyPassword(password, confirm, conflict_tag);
+            });
+            $('#save_password').live('click', function(){
+                var password = $('#password_field').val();
+
+                actions.changePassword(password);
+            });
+        };
+
+    return {
+        register : register
+    }
+
+})(jQuery);
+
+
+CUI.Password.Actions = function(save_button){
+    var resetPassword = false,
+
+        verifyPassword = function(password, confirm, conflict_tag) {
+            if( password !== confirm ){
+                conflict_tag.removeClass('invisible');
+                save_button.addClass("disabled");
+            }
+            else {
+                conflict_tag.addClass('invisible');
+                save_button.removeClass("disabled");
+            }
+        },
+        changePassword = function(password) {
+            var button = save_button,
+                url = button.attr("data-url");
+
+            if( !button.hasClass("disabled") ){
+                button.addClass("disabled");
+
+                $.ajax({
+                    type: "PUT",
+                    url: url,
+                    data: { "user":{"password":password}},
+                    cache: false,
+                    success: function(data, textStatus, xhr) {
+                        button.removeClass("disabled");
+                        if (resetPassword && xhr.status < 400) {
+                            // this is a password reset, so we'll redirect the user to the login page
+                            window.location.replace(KT.routes.root_path());
+                        }
+                    },
+                    error: function(e) {
+                        button.removeClass('disabled');
+                    }
+                });
+            }
+        },
+        resettingPassword = function(resetValue) {
+            resetPassword = resetValue;
+        };
+
+    return {
+        verifyPassword: verifyPassword,
+        changePassword: changePassword,
+        resettingPassword: resettingPassword
+    };
+
+};

data/app/assets/stylesheets/alchemy/components/_chosen.scss

@@ -0,0 +1,423 @@
+@import "../partials/colors";
+@import "../partials/vars";
+/* @group Base */
+
+.chzn-container {
+  font-size: 13px;
+
+  position: relative;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+  .chzn-drop {
+    background: #fff;
+    border: 1px solid #aaa;
+    border-top: 0;
+    position: absolute;
+    top: 29px;
+    left: 0;
+    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    -o-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    z-index: 999;
+  }
+}
+
+/* @end */
+
+/* @group Single Chosen */
+
+.chzn-container-single {
+  .chzn-single {
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
+    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+    background-image: -o-linear-gradient(top, #eeeeee 0%, white 50%);
+    background-image: -ms-linear-gradient(top, #eeeeee 0%, white 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
+    background-image: linear-gradient(top, #eeeeee 0%, white 50%);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #aaa;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    height: 19px;
+    line-height: 19px;
+    padding: 0 0 0 8px;
+    color: $text_color;
+    text-decoration: none;
+    span {
+      margin-right: 26px;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      -o-text-overflow: ellipsis;
+      -ms-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+    }
+    abbr {
+      display: block;
+      position: absolute;
+      right: 26px;
+      top: 8px;
+      width: 12px;
+      height: 13px;
+      font-size: 1px;
+      background: url($chosen_sprite_url) right top no-repeat;
+      &:hover {
+        background-position: right -11px;
+    }
+  }
+    div {
+      -webkit-border-radius: 0 4px 4px 0;
+      -moz-border-radius: 0 4px 4px 0;
+      border-radius: 0 4px 4px 0;
+      -moz-background-clip: padding;
+      -webkit-background-clip: padding-box;
+      background-clip: padding-box;
+      background: #ccc;
+      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(0.6, #eeeeee));
+      background-image: -webkit-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);
+      background-image: -moz-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);
+      background-image: -o-linear-gradient(bottom, #cccccc 0%, #eeeeee 60%);
+      background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
+      background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+      border-left: 1px solid #aaa;
+      position: absolute;
+      right: 0;
+      top: 0;
+      display: block;
+      height: 100%;
+      width: 18px;
+      b {
+        margin-top: -4px;
+        background: url($chosen_sprite_url) no-repeat 0 1px;
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .chzn-search {
+    padding: 3px 4px;
+    position: relative;
+    margin: 0;
+    white-space: nowrap;
+    z-index: 1010;
+    input {
+      background: white url($chosen_sprite_url) no-repeat 100% -22px;
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, linear-gradient(top, white 85%, #eeeeee 99%);
+      margin: 1px 0;
+      padding: 4px 20px 4px 5px;
+      outline: 0;
+      border: 1px solid #aaa;
+      font-family: sans-serif;
+      font-size: 1em;
+    }
+  }
+  .chzn-drop {
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+  }
+}
+
+/* @end */
+
+.chzn-container-single-nosearch .chzn-search input {
+  position: absolute;
+  left: -9000px;
+}
+
+/* @group Multi Chosen */
+
+.chzn-container-multi .chzn-choices {
+  background-color: #fff;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+  background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+  background-image: -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+  background-image: linear-gradient(top, white 85%, #eeeeee 99%);
+  border: 1px solid #aaa;
+  margin: 0;
+  padding: 0;
+  cursor: text;
+  overflow: hidden;
+  height: auto !important;
+  height: 1%;
+  position: relative;
+  li {
+    float: left;
+    list-style: none;
+  }
+  .search-field {
+    white-space: nowrap;
+    margin: 0;
+    padding: 0;
+    input {
+      color: #666;
+      background: transparent !important;
+      border: 0 !important;
+      padding: 5px;
+      margin: 1px 0;
+      outline: 0;
+      -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      -o-box-shadow: none;
+      box-shadow: none;
+    }
+    .default {
+      color: #999;
+    }
+  }
+  .search-choice {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    background-color: #e4e4e4;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee));
+    background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
+    background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
+    background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%);
+    background-image: -ms-linear-gradient(top, #e4e4e4 0%, #eeeeee 70%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
+    background-image: linear-gradient(top, #e4e4e4 0%, #eeeeee 70%);
+    color: #333;
+    border: 1px solid #b4b4b4;
+    line-height: 13px;
+    padding: 3px 19px 3px 6px;
+    margin: 3px 0 3px 5px;
+    position: relative;
+    span {
+      cursor: default;
+    }
+  }
+  .search-choice-focus {
+    background: #d4d4d4;
+  }
+  .search-choice .search-choice-close {
+    display: block;
+    position: absolute;
+    right: 3px;
+    top: 4px;
+    width: 12px;
+    height: 13px;
+    font-size: 1px;
+    background: url(chosen-sprite.png) right top no-repeat;
+    &:hover {
+      background-position: right -11px;
+    }
+  }
+  .search-choice-focus .search-choice-close {
+    background-position: right -11px;
+  }
+}
+
+/* @end */
+
+/* @group Results */
+
+.chzn-container .chzn-results {
+  margin: 0 4px 4px 0;
+  max-height: 190px;
+  padding: 0 0 0 4px;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.chzn-container-multi .chzn-results {
+  margin: -1px 0 0;
+  padding: 0;
+}
+
+.chzn-container .chzn-results {
+  li {
+    display: none;
+    line-height: 80%;
+    padding: 7px 7px 8px;
+    margin: 0;
+    list-style: none;
+  }
+  .active-result {
+    cursor: pointer;
+    display: list-item;
+  }
+  .highlighted {
+    background: #3875d7;
+    color: #fff;
+  }
+  li em {
+    background: #feffde;
+    font-style: normal;
+  }
+  .highlighted em {
+    background: transparent;
+  }
+  .no-results {
+    background: #f4f4f4;
+    display: list-item;
+  }
+  .group-result {
+    cursor: default;
+    color: #999;
+    font-weight: bold;
+  }
+  .group-option {
+    padding-left: 20px;
+  }
+}
+
+.chzn-container-multi .chzn-drop .result-selected {
+  display: none;
+}
+
+/* @end */
+
+/* @group Active  */
+
+.chzn-container-active {
+  .chzn-single {
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    border: 1px solid #5897fb;
+  }
+  .chzn-single-with-drop {
+    border: 1px solid #aaa;
+    -webkit-box-shadow: 0 1px 0 #fff inset;
+    -moz-box-shadow: 0 1px 0 #fff inset;
+    -o-box-shadow: 0 1px 0 #fff inset;
+    box-shadow: 0 1px 0 #fff inset;
+    background-color: #eee;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
+    background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+    background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+    background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
+    background-image: -ms-linear-gradient(top, white 0%, #eeeeee 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+    background-image: linear-gradient(top, white 0%, #eeeeee 50%);
+    -webkit-border-bottom-left-radius: 0;
+    -webkit-border-bottom-right-radius: 0;
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-bottomright: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    div {
+      background: transparent;
+      border-left: none;
+      b {
+        background-position: -18px 1px;
+     }
+    }
+  }
+  .chzn-choices {
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    border: 1px solid #5897fb;
+    .search-field input {
+      color: #111 !important;
+    }
+  }
+}
+
+/* @end */
+
+/* @group Disabled Support */
+
+.chzn-disabled {
+  cursor: default;
+  opacity: 0.5 !important;
+  .chzn-single, .chzn-choices .search-choice .search-choice-close {
+    cursor: default;
+  }
+}
+
+/* @group Right to Left */
+
+.chzn-rtl {
+  direction: rtl;
+  text-align: right;
+  .chzn-single {
+    padding-left: 0;
+    padding-right: 8px;
+    span {
+      margin-left: 26px;
+      margin-right: 0;
+    }
+    div {
+      left: 0;
+      right: auto;
+      border-left: none;
+      border-right: 1px solid #aaaaaa;
+      -webkit-border-radius: 4px 0 0 4px;
+      -moz-border-radius: 4px 0 0 4px;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  .chzn-choices {
+    li {
+      float: right;
+    }
+    .search-choice {
+      padding: 3px 6px 3px 19px;
+      margin: 3px 5px 3px 0;
+      .search-choice-close {
+        left: 5px;
+        right: auto;
+        background-position: right top;
+      }
+    }
+  }
+  &.chzn-container-single .chzn-results {
+    margin-left: 4px;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 4px;
+  }
+  .chzn-results .group-option {
+    padding-left: 0;
+    padding-right: 20px;
+  }
+  &.chzn-container-active .chzn-single-with-drop div {
+    border-right: none;
+  }
+  .chzn-search input {
+    background: url($chosen_sprite_url) no-repeat -38px -22px, white;
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, linear-gradient(top, white 85%, #eeeeee 99%);
+    padding: 4px 5px 4px 20px;
+  }
+}
+
+/* @end */