| @@ -0,0 +1,9 @@ | ||
| var transparentDemo = true; | ||
| var fixedTop = false; | ||
|
|
||
| $(window).scroll(function(e) { | ||
| oVal = ($(window).scrollTop() / 170); | ||
| $(".blur").css("opacity", oVal); | ||
|
|
||
| }); | ||
|
|
| @@ -0,0 +1,124 @@ | ||
| /*! | ||
| ========================================================= | ||
| * Get Shit Done Kit - v1.4.1.0 | ||
| ========================================================= | ||
| * Product Page: http://www.creative-tim.com/product/get-shit-done-kit | ||
| * Copyright 2017 Creative Tim (http://www.creative-tim.com) | ||
| * Licensed under MIT (https://github.com/timcreative/get-shit-done/blob/master/LICENSE.md) | ||
| ========================================================= | ||
| * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
| */ | ||
|
|
||
| searchVisible = 0; | ||
| transparent = true; | ||
|
|
||
| $(document).ready(function(){ | ||
| /* Activate the switches with icons */ | ||
| $('.switch')['bootstrapSwitch'](); | ||
|
|
||
| /* Activate regular switches */ | ||
| $("[data-toggle='switch']").wrap('<div class="switch" />').parent().bootstrapSwitch(); | ||
|
|
||
| $('[data-toggle="search"]').click(function(){ | ||
| if(searchVisible == 0){ | ||
| searchVisible = 1; | ||
| $(this).parent().addClass('active'); | ||
| $('.navbar-search-form').fadeIn(function(){ | ||
| $('.navbar-search-form input').focus(); | ||
| }); | ||
| } else { | ||
| searchVisible = 0; | ||
| $(this).parent().removeClass('active'); | ||
| $(this).blur(); | ||
| $('.navbar-search-form').fadeOut(function(){ | ||
| $('.navbar-search-form input').blur(); | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| $('[data-toggle="gsdk-collapse"]').hover( | ||
| function(){ | ||
| console.log('on hover'); | ||
| var thisdiv = $(this).attr("data-target"); | ||
|
|
||
| if(!$(this).hasClass('state-open')){ | ||
| $(this).addClass('state-hover'); | ||
| $(thisdiv).css({ | ||
| 'height':'30px' | ||
| }); | ||
| } | ||
|
|
||
| }, | ||
| function(){ | ||
| var thisdiv = $(this).attr("data-target"); | ||
| $(this).removeClass('state-hover'); | ||
|
|
||
| if(!$(this).hasClass('state-open')){ | ||
| $(thisdiv).css({ | ||
| 'height':'0px' | ||
| }); | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| $('[data-toggle="gsdk-collapse"]').click( | ||
| function(event){ | ||
| event.preventDefault(); | ||
|
|
||
| var thisdiv = $(this).attr("data-target"); | ||
| var height = $(thisdiv).children('.panel-body').height(); | ||
|
|
||
| if($(this).hasClass('state-open')){ | ||
| $(thisdiv).css({ | ||
| 'height':'0px', | ||
| }); | ||
| $(this).removeClass('state-open'); | ||
| } else { | ||
| $(thisdiv).css({ | ||
| 'height':height, | ||
| }); | ||
| $(this).addClass('state-open'); | ||
| } | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
| $(function () { | ||
| $('[data-toggle="gsdk-collapse"]').each(function () { | ||
| var thisdiv = $(this).attr("data-target"); | ||
| $(thisdiv).addClass("gsdk-collapse"); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| $(document).scroll(function() { | ||
| if( $(this).scrollTop() > 260 ) { | ||
| if(transparent) { | ||
| transparent = false; | ||
| $('nav[role="navigation"]').removeClass('navbar-transparent'); | ||
| } | ||
| } else { | ||
| if( !transparent ) { | ||
| transparent = true; | ||
| $('nav[role="navigation"]').addClass('navbar-transparent'); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
| @@ -0,0 +1,249 @@ | ||
| /* ============================================================ | ||
| * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru | ||
| * http://www.larentis.eu/switch/ | ||
| * ============================================================ | ||
| * Licensed under the Apache License, Version 2.0 | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * ============================================================ */ | ||
|
|
||
| !function ($) { | ||
| "use strict"; | ||
|
|
||
| $.fn['bootstrapSwitch'] = function (method) { | ||
| var methods = { | ||
| init: function () { | ||
| return this.each(function () { | ||
| var $element = $(this) | ||
| , $div | ||
| , $switchLeft | ||
| , $switchRight | ||
| , $label | ||
| , myClasses = "" | ||
| , classes = $element.attr('class') | ||
| , color | ||
| , moving | ||
| , onLabel = "ON" | ||
| , offLabel = "OFF" | ||
| , icon = false; | ||
|
|
||
| $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) { | ||
| if (classes.indexOf(el) >= 0) | ||
| myClasses = el; | ||
| }); | ||
|
|
||
| $element.addClass('has-switch'); | ||
|
|
||
| if ($element.data('on') !== undefined) | ||
| color = "switch-" + $element.data('on'); | ||
|
|
||
| if ($element.data('on-label') !== undefined) | ||
| onLabel = $element.data('on-label'); | ||
|
|
||
| if ($element.data('off-label') !== undefined) | ||
| offLabel = $element.data('off-label'); | ||
|
|
||
| if ($element.data('icon') !== undefined) | ||
| icon = $element.data('icon'); | ||
|
|
||
| $switchLeft = $('<span>') | ||
| .addClass("switch-left") | ||
| .addClass(myClasses) | ||
| .addClass(color) | ||
| .html(onLabel); | ||
|
|
||
| color = ''; | ||
| if ($element.data('off') !== undefined) | ||
| color = "switch-" + $element.data('off'); | ||
|
|
||
| $switchRight = $('<span>') | ||
| .addClass("switch-right") | ||
| .addClass(myClasses) | ||
| .addClass(color) | ||
| .html(offLabel); | ||
|
|
||
| $label = $('<label>') | ||
| .html(" ") | ||
| .addClass(myClasses) | ||
| .attr('for', $element.find('input').attr('id')); | ||
|
|
||
| if (icon) { | ||
| $label.html('<i class="' + icon + '"></i>'); | ||
| } | ||
|
|
||
| $div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false); | ||
|
|
||
| if ($element.data('animated') !== false) | ||
| $div.addClass('switch-animate').data('animated', true); | ||
|
|
||
| $div | ||
| .append($switchLeft) | ||
| .append($label) | ||
| .append($switchRight); | ||
|
|
||
| $element.find('>div').addClass( | ||
| $element.find('input').is(':checked') ? 'switch-on' : 'switch-off' | ||
| ); | ||
|
|
||
| if ($element.find('input').is(':disabled')) | ||
| $(this).addClass('deactivate'); | ||
|
|
||
| var changeStatus = function ($this) { | ||
| $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click'); | ||
| }; | ||
|
|
||
| $element.on('keydown', function (e) { | ||
| if (e.keyCode === 32) { | ||
| e.stopImmediatePropagation(); | ||
| e.preventDefault(); | ||
| changeStatus($(e.target).find('span:first')); | ||
| } | ||
| }); | ||
|
|
||
| $switchLeft.on('click', function (e) { | ||
| changeStatus($(this)); | ||
| }); | ||
|
|
||
| $switchRight.on('click', function (e) { | ||
| changeStatus($(this)); | ||
| }); | ||
|
|
||
| $element.find('input').on('change', function (e) { | ||
| var $this = $(this) | ||
| , $element = $this.parent() | ||
| , thisState = $this.is(':checked') | ||
| , state = $element.is('.switch-off'); | ||
|
|
||
| e.preventDefault(); | ||
|
|
||
| $element.css('left', ''); | ||
|
|
||
| if (state === thisState) { | ||
|
|
||
| if (thisState) | ||
| $element.removeClass('switch-off').addClass('switch-on'); | ||
| else $element.removeClass('switch-on').addClass('switch-off'); | ||
|
|
||
| if ($element.data('animated') !== false) | ||
| $element.addClass("switch-animate"); | ||
|
|
||
| $element.parent().trigger('switch-change', {'el': $this, 'value': thisState}) | ||
| } | ||
| }); | ||
|
|
||
| $element.find('label').on('mousedown touchstart', function (e) { | ||
| var $this = $(this); | ||
| moving = false; | ||
|
|
||
| e.preventDefault(); | ||
| e.stopImmediatePropagation(); | ||
|
|
||
| $this.closest('div').removeClass('switch-animate'); | ||
|
|
||
| if ($this.closest('.has-switch').is('.deactivate')) | ||
| $this.unbind('click'); | ||
| else { | ||
| $this.on('mousemove touchmove', function (e) { | ||
| var $element = $(this).closest('.switch') | ||
| , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left | ||
| , percent = (relativeX / $element.width()) * 100 | ||
| , left = 25 | ||
| , right = 75; | ||
|
|
||
| moving = true; | ||
|
|
||
| if (percent < left) | ||
| percent = left; | ||
| else if (percent > right) | ||
| percent = right; | ||
|
|
||
| $element.find('>div').css('left', (percent - right) + "%") | ||
| }); | ||
|
|
||
| $this.on('click touchend', function (e) { | ||
| var $this = $(this) | ||
| , $target = $(e.target) | ||
| , $myCheckBox = $target.siblings('input'); | ||
|
|
||
| e.stopImmediatePropagation(); | ||
| e.preventDefault(); | ||
|
|
||
| $this.unbind('mouseleave'); | ||
|
|
||
| if (moving) | ||
| $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)); | ||
| else $myCheckBox.prop("checked", !$myCheckBox.is(":checked")); | ||
|
|
||
| moving = false; | ||
| $myCheckBox.trigger('change'); | ||
| }); | ||
|
|
||
| $this.on('mouseleave', function (e) { | ||
| var $this = $(this) | ||
| , $myCheckBox = $this.siblings('input'); | ||
|
|
||
| e.preventDefault(); | ||
| e.stopImmediatePropagation(); | ||
|
|
||
| $this.unbind('mouseleave'); | ||
| $this.trigger('mouseup'); | ||
|
|
||
| $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change'); | ||
| }); | ||
|
|
||
| $this.on('mouseup', function (e) { | ||
| e.stopImmediatePropagation(); | ||
| e.preventDefault(); | ||
|
|
||
| $(this).unbind('mousemove'); | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| ); | ||
| }, | ||
| toggleActivation: function () { | ||
| $(this).toggleClass('deactivate'); | ||
| }, | ||
| isActive: function () { | ||
| return !$(this).hasClass('deactivate'); | ||
| }, | ||
| setActive: function (active) { | ||
| if (active) | ||
| $(this).removeClass('deactivate'); | ||
| else $(this).addClass('deactivate'); | ||
| }, | ||
| toggleState: function (skipOnChange) { | ||
| var $input = $(this).find('input:checkbox'); | ||
| $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange); | ||
| }, | ||
| setState: function (value, skipOnChange) { | ||
| $(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange); | ||
| }, | ||
| status: function () { | ||
| return $(this).find('input:checkbox').is(':checked'); | ||
| }, | ||
| destroy: function () { | ||
| var $div = $(this).find('div') | ||
| , $checkbox; | ||
|
|
||
| $div.find(':not(input:checkbox)').remove(); | ||
|
|
||
| $checkbox = $div.children(); | ||
| $checkbox.unwrap().unwrap(); | ||
|
|
||
| $checkbox.unbind('change'); | ||
|
|
||
| return $checkbox; | ||
| } | ||
| }; | ||
|
|
||
| if (methods[method]) | ||
| return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | ||
| else if (typeof method === 'object' || !method) | ||
| return methods.init.apply(this, arguments); | ||
| else | ||
| $.error('Method ' + method + ' does not exist!'); | ||
| }; | ||
| }(jQuery); | ||
|
|
||
|
|
| @@ -0,0 +1,109 @@ | ||
| !function ($) { | ||
|
|
||
| /* CHECKBOX PUBLIC CLASS DEFINITION | ||
| * ============================== */ | ||
|
|
||
| var Checkbox = function (element, options) { | ||
| this.init(element, options); | ||
| } | ||
|
|
||
| Checkbox.prototype = { | ||
|
|
||
| constructor: Checkbox | ||
|
|
||
| , init: function (element, options) { | ||
| var $el = this.$element = $(element) | ||
|
|
||
| this.options = $.extend({}, $.fn.checkbox.defaults, options); | ||
| $el.before(this.options.template); | ||
| this.setState(); | ||
| } | ||
|
|
||
| , setState: function () { | ||
| var $el = this.$element | ||
| , $parent = $el.closest('.checkbox'); | ||
|
|
||
| $el.prop('disabled') && $parent.addClass('disabled'); | ||
| $el.prop('checked') && $parent.addClass('checked'); | ||
| } | ||
|
|
||
| , toggle: function () { | ||
| var ch = 'checked' | ||
| , $el = this.$element | ||
| , $parent = $el.closest('.checkbox') | ||
| , checked = $el.prop(ch) | ||
| , e = $.Event('toggle') | ||
|
|
||
| if ($el.prop('disabled') == false) { | ||
| $parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.prop(ch, ch); | ||
| $el.trigger(e).trigger('change'); | ||
| } | ||
| } | ||
|
|
||
| , setCheck: function (option) { | ||
| var d = 'disabled' | ||
| , ch = 'checked' | ||
| , $el = this.$element | ||
| , $parent = $el.closest('.checkbox') | ||
| , checkAction = option == 'check' ? true : false | ||
| , e = $.Event(option) | ||
|
|
||
| $parent[checkAction ? 'addClass' : 'removeClass' ](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch); | ||
| $el.trigger(e).trigger('change'); | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
| /* CHECKBOX PLUGIN DEFINITION | ||
| * ======================== */ | ||
|
|
||
| var old = $.fn.checkbox | ||
|
|
||
| $.fn.checkbox = function (option) { | ||
| return this.each(function () { | ||
| var $this = $(this) | ||
| , data = $this.data('checkbox') | ||
| , options = $.extend({}, $.fn.checkbox.defaults, $this.data(), typeof option == 'object' && option); | ||
| if (!data) $this.data('checkbox', (data = new Checkbox(this, options))); | ||
| if (option == 'toggle') data.toggle() | ||
| if (option == 'check' || option == 'uncheck') data.setCheck(option) | ||
| else if (option) data.setState(); | ||
| }); | ||
| } | ||
|
|
||
| $.fn.checkbox.defaults = { | ||
| template: '<span class="icons"><span class="first-icon fa fa-square-o"></span><span class="second-icon fa fa-check-square-o"></span></span>' | ||
| } | ||
|
|
||
|
|
||
| /* CHECKBOX NO CONFLICT | ||
| * ================== */ | ||
|
|
||
| $.fn.checkbox.noConflict = function () { | ||
| $.fn.checkbox = old; | ||
| return this; | ||
| } | ||
|
|
||
|
|
||
| /* CHECKBOX DATA-API | ||
| * =============== */ | ||
|
|
||
| $(document).on('click.checkbox.data-api', '[data-toggle^=checkbox], .checkbox', function (e) { | ||
| var $checkbox = $(e.target); | ||
| if (e.target.tagName != "A") { | ||
| e && e.preventDefault() && e.stopPropagation(); | ||
| if (!$checkbox.hasClass('checkbox')) $checkbox = $checkbox.closest('.checkbox'); | ||
| $checkbox.find(':checkbox').checkbox('toggle'); | ||
| } | ||
| }); | ||
|
|
||
| $(function () { | ||
| $('[data-toggle="checkbox"]').each(function () { | ||
| var $checkbox = $(this); | ||
| $checkbox.checkbox(); | ||
| }); | ||
| }); | ||
|
|
||
| }(window.jQuery); | ||
|
|
| @@ -0,0 +1,140 @@ | ||
| /* ============================================================= | ||
| * flatui-radio v0.0.3 | ||
| * ============================================================ */ | ||
|
|
||
| !function ($) { | ||
|
|
||
| /* RADIO PUBLIC CLASS DEFINITION | ||
| * ============================== */ | ||
|
|
||
| var Radio = function (element, options) { | ||
| this.init(element, options); | ||
| } | ||
|
|
||
| Radio.prototype = { | ||
|
|
||
| constructor: Radio | ||
|
|
||
| , init: function (element, options) { | ||
| var $el = this.$element = $(element) | ||
|
|
||
| this.options = $.extend({}, $.fn.radio.defaults, options); | ||
| $el.before(this.options.template); | ||
| this.setState(); | ||
| } | ||
|
|
||
| , setState: function () { | ||
| var $el = this.$element | ||
| , $parent = $el.closest('.radio'); | ||
|
|
||
| $el.prop('disabled') && $parent.addClass('disabled'); | ||
| $el.prop('checked') && $parent.addClass('checked'); | ||
| } | ||
|
|
||
| , toggle: function () { | ||
| var d = 'disabled' | ||
| , ch = 'checked' | ||
| , $el = this.$element | ||
| , checked = $el.prop(ch) | ||
| , $parent = $el.closest('.radio') | ||
| , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body') | ||
| , $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]') | ||
| , e = $.Event('toggle') | ||
|
|
||
| if ($el.prop(d) == false) { | ||
| $elemGroup.not($el).each(function () { | ||
| var $el = $(this) | ||
| , $parent = $(this).closest('.radio'); | ||
|
|
||
| if ($el.prop(d) == false) { | ||
| $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change'); | ||
| } | ||
| }); | ||
|
|
||
| if (checked == false) $parent.addClass(ch) && $el.prop(ch, true); | ||
| $el.trigger(e); | ||
|
|
||
| if (checked !== $el.prop(ch)) { | ||
| $el.trigger('change'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| , setCheck: function (option) { | ||
| var ch = 'checked' | ||
| , $el = this.$element | ||
| , $parent = $el.closest('.radio') | ||
| , checkAction = option == 'check' ? true : false | ||
| , checked = $el.prop(ch) | ||
| , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body') | ||
| , $elemGroup = $parentWrap.find(':radio[name="' + $el['attr']('name') + '"]') | ||
| , e = $.Event(option) | ||
|
|
||
| $elemGroup.not($el).each(function () { | ||
| var $el = $(this) | ||
| , $parent = $(this).closest('.radio'); | ||
|
|
||
| $parent.removeClass(ch) && $el.removeAttr(ch); | ||
| }); | ||
|
|
||
| $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch); | ||
| $el.trigger(e); | ||
|
|
||
| if (checked !== $el.prop(ch)) { | ||
| $el.trigger('change'); | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
| /* RADIO PLUGIN DEFINITION | ||
| * ======================== */ | ||
|
|
||
| var old = $.fn.radio | ||
|
|
||
| $.fn.radio = function (option) { | ||
| return this.each(function () { | ||
| var $this = $(this) | ||
| , data = $this.data('radio') | ||
| , options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option == 'object' && option); | ||
| if (!data) $this.data('radio', (data = new Radio(this, options))); | ||
| if (option == 'toggle') data.toggle() | ||
| if (option == 'check' || option == 'uncheck') data.setCheck(option) | ||
| else if (option) data.setState(); | ||
| }); | ||
| } | ||
|
|
||
| $.fn.radio.defaults = { | ||
| template: '<span class="icons"><span class="first-icon fa fa-circle-o"></span><span class="second-icon fa fa-dot-circle-o"></span></span>' | ||
| } | ||
|
|
||
|
|
||
| /* RADIO NO CONFLICT | ||
| * ================== */ | ||
|
|
||
| $.fn.radio.noConflict = function () { | ||
| $.fn.radio = old; | ||
| return this; | ||
| } | ||
|
|
||
|
|
||
| /* RADIO DATA-API | ||
| * =============== */ | ||
|
|
||
| $(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) { | ||
| var $radio = $(e.target); | ||
| e && e.preventDefault() && e.stopPropagation(); | ||
| if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio'); | ||
| $radio.find(':radio').radio('toggle'); | ||
| }); | ||
|
|
||
| $(function () { | ||
| $('[data-toggle="radio"]').each(function () { | ||
| var $radio = $(this); | ||
| $radio.radio(); | ||
| }); | ||
| }); | ||
|
|
||
| }(window.jQuery); | ||
|
|
| @@ -0,0 +1,41 @@ | ||
| /*! | ||
| ========================================================= | ||
| * Get Shit Done Kit - v1.4.1.0 | ||
| ========================================================= | ||
| * Product Page: http://www.creative-tim.com/product/get-shit-done-kit | ||
| * Copyright 2017 Creative Tim (http://www.creative-tim.com) | ||
| * Licensed under MIT (https://github.com/timcreative/get-shit-done/blob/master/LICENSE.md) | ||
| ========================================================= | ||
| * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
| */ | ||
|
|
||
| @import "gsdk/variables"; | ||
| @import "gsdk/mixins"; | ||
| @import "gsdk/typography"; | ||
|
|
||
| // Core CSS | ||
| @import "gsdk/misc"; | ||
| @import "gsdk/buttons"; | ||
| @import "gsdk/inputs"; | ||
| @import "gsdk/sliders"; | ||
| @import "gsdk/alerts"; | ||
| @import "gsdk/labels-and-progress-bars"; | ||
| @import "gsdk/tooltips"; | ||
| @import "gsdk/checkbox-radio-switch"; | ||
| @import "gsdk/navbars"; | ||
|
|
||
|
|
||
| // Fancy Stuff | ||
|
|
||
| @import "gsdk/dropdown"; | ||
| @import "gsdk/tabs-navs-pagination"; | ||
| @import "gsdk/collapse"; | ||
| @import "gsdk/carousel"; | ||
| @import "gsdk/modal"; | ||
| @import "gsdk/responsive"; | ||
|
|
| @@ -0,0 +1,37 @@ | ||
| .alert{ | ||
| border: 0; | ||
| border-radius: 0; | ||
| color: #FFFFFF; | ||
| padding: 10px 15px; | ||
| font-size: 14px; | ||
|
|
||
| .container &{ | ||
| border-radius: 4px; | ||
|
|
||
| } | ||
| .navbar &{ | ||
| border-radius: 0; | ||
| left: 0; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 85px; | ||
| width: 100%; | ||
| z-index: 3; | ||
| } | ||
| .navbar:not(.navbar-transparent) &{ | ||
| top: 70px; | ||
| } | ||
| } | ||
| .alert-info{ | ||
| background-color: $azure-navbar; | ||
| } | ||
| .alert-success { | ||
| background-color: $green-navbar; | ||
| } | ||
| .alert-warning { | ||
| background-color: $orange-navbar; | ||
| } | ||
| .alert-danger { | ||
| background-color: $red-navbar; | ||
| } | ||
|
|
| @@ -0,0 +1,94 @@ | ||
| .btn{ | ||
| border-width: $border-thick; | ||
| background-color: $transparent-bg; | ||
| font-weight: $font-weight-normal; | ||
|
|
||
| @include opacity(.8); | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
|
|
||
| @include btn-styles($default-color, $default-states-color); | ||
|
|
||
| &:hover, | ||
| &:focus{ | ||
| @include opacity(1); | ||
| outline: 0 !important; | ||
| } | ||
| &:active, | ||
| &.active, | ||
| .open > &.dropdown-toggle { | ||
| @include box-shadow(none); | ||
| outline: 0 !important; | ||
| } | ||
| } | ||
|
|
||
| // Apply the mixin to the buttons | ||
| //.btn-default { @include btn-styles($default-color, $default-states-color); } | ||
| .btn-primary { @include btn-styles($primary-color, $primary-states-color); } | ||
| .btn-success { @include btn-styles($success-color, $success-states-color); } | ||
| .btn-info { @include btn-styles($info-color, $info-states-color); } | ||
| .btn-warning { @include btn-styles($warning-color, $warning-states-color); } | ||
| .btn-danger { @include btn-styles($danger-color, $danger-states-color); } | ||
| .btn-neutral { | ||
| @include btn-styles($white-color, $white-color); | ||
|
|
||
| &:active, | ||
| &.active, | ||
| .open > &.dropdown-toggle{ | ||
| background-color: $white-color; | ||
| color: $default-color; | ||
| } | ||
|
|
||
| &.btn-fill, | ||
| &.btn-fill:hover, | ||
| &.btn-fill:focus{ | ||
| color: $default-color; | ||
| } | ||
|
|
||
| &.btn-simple:active, | ||
| &.btn-simple.active{ | ||
| background-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| .btn{ | ||
| &:disabled, | ||
| &[disabled], | ||
| &.disabled{ | ||
| @include opacity(.5); | ||
| } | ||
| } | ||
| .btn-round{ | ||
| border-width: $border-thin; | ||
| border-radius: $btn-round-radius !important; | ||
| padding: $padding-round-vertical $padding-round-horizontal; | ||
| } | ||
| .btn-simple{ | ||
| border: $none; | ||
| font-size: $font-size-medium; | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
| } | ||
| .btn-lg{ | ||
| @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); | ||
| font-weight: $font-weight-normal; | ||
| } | ||
| .btn-sm{ | ||
| @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); | ||
| } | ||
| .btn-xs { | ||
| @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small); | ||
| } | ||
| .btn-wd { | ||
| min-width: 140px; | ||
| } | ||
| .btn-group.select{ | ||
| width: 100%; | ||
| } | ||
| .btn-group.select .btn{ | ||
| text-align: left; | ||
| } | ||
| .btn-group.select .caret{ | ||
| position: absolute; | ||
| top: 50%; | ||
| margin-top: -1px; | ||
| right: 8px; | ||
| } |
| @@ -0,0 +1,24 @@ | ||
| .carousel-control{ | ||
| // width: 8%; | ||
| &.left, | ||
| &.right{ | ||
| background-image: none; | ||
| } | ||
| .fa{ | ||
| font-size: 35px; | ||
| } | ||
| .fa, | ||
| .icon-prev, | ||
| .icon-next{ | ||
| display: inline-block; | ||
| position: absolute; | ||
| top: 50%; | ||
| z-index: 5; | ||
| margin-top: -17px; | ||
| margin-left: -9px; | ||
| } | ||
| } | ||
| .carousel-inner > .item { | ||
| transition: left 1200ms cubic-bezier(0.455, 0.03, 0.4, 0.955) 0s; | ||
| -webkit-transition: left 1200ms cubic-bezier(0.455, 0.03, 0.4, 0.955) 0s; | ||
| } |
| @@ -0,0 +1,246 @@ | ||
| /* Checkbox and radio */ | ||
| .checkbox, | ||
| .radio { | ||
| margin-bottom: 12px; | ||
| padding-left: 32px; | ||
| position: relative; | ||
| -webkit-transition: color 0.25s linear; | ||
| transition: color 0.25s linear; | ||
| font-size: 14px; | ||
| font-weight: normal; | ||
| line-height: 1.5; | ||
| color: #333333; | ||
| } | ||
| .checkbox input, | ||
| .radio input { | ||
| outline: none !important; | ||
| display: none; | ||
| } | ||
| .checkbox .icons, | ||
| .radio .icons { | ||
| color: $medium-gray; | ||
| display: block; | ||
| height: 20px; | ||
| left: 0; | ||
| position: absolute; | ||
| top: 0; | ||
| width: 20px; | ||
| text-align: center; | ||
| line-height: 21px; | ||
| font-size: 20px; | ||
| cursor: pointer; | ||
| -webkit-transition: color 0.2s linear; | ||
| transition: color 0.2s linear; | ||
| } | ||
|
|
||
|
|
||
| .checkbox .icons .first-icon, | ||
| .radio .icons .first-icon, | ||
| .checkbox .icons .second-icon, | ||
| .radio .icons .second-icon { | ||
| display: inline-table; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| background-color: transparent; | ||
| margin: 0; | ||
| @include opacity(1); | ||
| } | ||
| .checkbox .icons .second-icon, | ||
| .radio .icons .second-icon { | ||
| @include opacity(0); | ||
| } | ||
| .checkbox:hover, | ||
| .radio:hover { | ||
| -webkit-transition: color 0.2s linear; | ||
| transition: color 0.2s linear; | ||
| } | ||
| .checkbox:hover .first-icon, | ||
| .radio:hover .first-icon { | ||
| @include opacity(0); | ||
| } | ||
| .checkbox:hover .second-icon, | ||
| .radio:hover .second-icon { | ||
| @include opacity (1); | ||
| } | ||
| .checkbox.checked, | ||
| .radio.checked { | ||
| color: $info-color; | ||
| } | ||
| .checkbox.checked .first-icon, | ||
| .radio.checked .first-icon { | ||
| opacity: 0; | ||
| filter: alpha(opacity=0); | ||
| } | ||
| .checkbox.checked .second-icon, | ||
| .radio.checked .second-icon { | ||
| opacity: 1; | ||
| filter: alpha(opacity=100); | ||
| color: $info-color; | ||
| -webkit-transition: color 0.2s linear; | ||
| transition: color 0.2s linear; | ||
| } | ||
| .checkbox.disabled, | ||
| .radio.disabled { | ||
| cursor: default; | ||
| color: $medium-gray !important; | ||
| } | ||
| .checkbox.disabled .icons, | ||
| .radio.disabled .icons { | ||
| color: $medium-gray !important; | ||
| } | ||
| .checkbox.disabled .first-icon, | ||
| .radio.disabled .first-icon { | ||
| opacity: 1; | ||
| filter: alpha(opacity=100); | ||
| } | ||
| .checkbox.disabled .second-icon, | ||
| .radio.disabled .second-icon { | ||
| opacity: 0; | ||
| filter: alpha(opacity=0); | ||
| } | ||
| .checkbox.disabled.checked .icons, | ||
| .radio.disabled.checked .icons { | ||
| color: $medium-gray; | ||
| } | ||
| .checkbox.disabled.checked .first-icon, | ||
| .radio.disabled.checked .first-icon { | ||
| opacity: 0; | ||
| filter: alpha(opacity=0); | ||
| } | ||
| .checkbox.disabled.checked .second-icon, | ||
| .radio.disabled.checked .second-icon { | ||
| opacity: 1; | ||
| filter: alpha(opacity=100); | ||
| color: #D9D9D9; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* ============================================================ | ||
| * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru | ||
| * http://www.larentis.eu/switch/ | ||
| * ============================================================ | ||
| * Licensed under the Apache License, Version 2.0 | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * ============================================================ */ | ||
| .has-switch { | ||
| border-radius: 30px; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| line-height: 1.72222; | ||
| overflow: hidden; | ||
| position: relative; | ||
| text-align: left; | ||
| width: 60px; | ||
|
|
||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| -o-user-select: none; | ||
| user-select: none; | ||
|
|
||
| /* this code is for fixing safari bug with hidden overflow for border-radius */ | ||
| -webkit-mask: url('../img/mask.png') 0 0 no-repeat; | ||
| -webkit-mask-size: 60px 24px; | ||
| mask: url('../img/mask.png') 0 0 no-repeat; | ||
| } | ||
| .has-switch.deactivate { | ||
| opacity: 0.5; | ||
| filter: alpha(opacity=50); | ||
| cursor: default !important; | ||
| } | ||
| .has-switch.deactivate label, | ||
| .has-switch.deactivate span { | ||
| cursor: default !important; | ||
| } | ||
| .has-switch > div { | ||
| position: relative; | ||
| top: 0; | ||
| width: 100px; | ||
| } | ||
| .has-switch > div.switch-animate { | ||
| -webkit-transition: left 0.25s ease-out; | ||
| transition: left 0.25s ease-out; | ||
| } | ||
| .has-switch > div.switch-off { | ||
| left: -35px; | ||
| } | ||
|
|
||
| .has-switch > div.switch-on { | ||
| left: 0; | ||
| } | ||
| .has-switch > div label { | ||
| background-color: #FFFFFF; | ||
| @include icon-gradient (rgba(255,255,255,1), rgba(241,241,242,1)); | ||
|
|
||
| box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25); | ||
| cursor: pointer; | ||
| } | ||
| .has-switch input[type=checkbox] { | ||
| display: none; | ||
| } | ||
| .has-switch span { | ||
| /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; */ | ||
| cursor: pointer; | ||
| float: left; | ||
| font-size: 11px; | ||
| font-weight: 400; | ||
| height: 24px; | ||
| line-height: 15px; | ||
| margin: 0; | ||
| padding-bottom: 6px; | ||
| padding-top: 5px; | ||
| position: relative; | ||
| text-align: center; | ||
| text-indent: -10px; | ||
| width: 50%; | ||
| z-index: 1; | ||
| -webkit-transition: 0.25s ease-out; | ||
| transition: 0.25s ease-out; | ||
| } | ||
| .has-switch span.switch-left { | ||
| background-color: $info-color; | ||
| border-left: 1px solid rgba(0, 0, 0, 0); | ||
| border-radius: 30px 0 0 30px; | ||
| color: #FFFFFF; | ||
| } | ||
| .has-switch .switch-off span.switch-left{ | ||
| background-color: $medium-gray; | ||
| } | ||
| .has-switch span.switch-right { | ||
| border-radius: 0 30px 30px 0; | ||
| background-color: $info-color; | ||
| color: #ffffff; | ||
| text-indent: 1px; | ||
| } | ||
| .has-switch .switch-off span.switch-right{ | ||
| background-color: $medium-gray; | ||
| } | ||
|
|
||
| .has-switch label { | ||
| border-radius: 12px; | ||
| float: left; | ||
| height: 22px; | ||
| margin: 1px -13px; | ||
| padding: 0; | ||
| position: relative; | ||
| transition: all 0.25s ease-out 0s; | ||
| vertical-align: middle; | ||
| width: 22px; | ||
| z-index: 100; | ||
| -webkit-transition: 0.25s ease-out; | ||
| transition: 0.25s ease-out; | ||
| } | ||
| .has-switch .switch-on .fa-check:before{ | ||
| margin-left: 10px; | ||
| } | ||
| .has-switch:hover .switch-on label{ | ||
| margin: 1px -17px; | ||
| width: 26px; | ||
| } | ||
| .has-switch:hover .switch-off label{ | ||
| margin: 1px -13px; | ||
| width: 26px; | ||
| } | ||
|
|
| @@ -0,0 +1,34 @@ | ||
| .panel-group{ | ||
| .panel { | ||
| border: 0; | ||
| border-bottom: 1px solid $medium-gray; | ||
| box-shadow: none; | ||
| } | ||
| .panel-default > .panel-heading { | ||
| background-color: $white-color; | ||
| border-color: $white-color; | ||
| } | ||
| .panel{ | ||
| border-radius: 0; | ||
| } | ||
| .panel-title{ | ||
| font-size: $font-size-h5; | ||
| } | ||
| .panel-title a:hover, .panel-title a:focus{ | ||
| text-decoration: none; | ||
| } | ||
| .gsdk-collapse{ | ||
| display: block; | ||
| height: 0px; | ||
| visibility: visible; | ||
| overflow: hidden; | ||
| transition: all 400ms; | ||
| } | ||
| .panel-title a:hover, | ||
| .panel-title a:focus{ | ||
| color: $default-states-color; | ||
| } | ||
| .panel-default > .panel-heading + .panel-collapse.gsdk-collapse > .panel-body { | ||
| box-shadow: inset 0 7px 10px -7px rgba(0,0,0,0.14); | ||
| } | ||
| } |
| @@ -0,0 +1,51 @@ | ||
| .dropdown-menu{ | ||
| margin: 0; | ||
| padding: 0; | ||
| border-radius: $border-radius-extreme; | ||
| z-index: 9000; | ||
| @include box-shadow($dropdown-shadow); | ||
|
|
||
| > li > a { | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
| color: #333333; | ||
| } | ||
| > li > a:focus{ | ||
| outline: 0 !important; | ||
| } | ||
|
|
||
| > li:first-child > a{ | ||
| border-top-left-radius: $border-radius-extreme; | ||
| border-top-right-radius: $border-radius-extreme; | ||
| } | ||
|
|
||
| > li:last-child > a{ | ||
| border-bottom-left-radius: $border-radius-extreme; | ||
| border-bottom-right-radius: $border-radius-extreme; | ||
| } | ||
|
|
||
| > li > a:hover, | ||
| > li > a:focus { | ||
| background-color: $smoke-bg; | ||
| color: #333333; | ||
| opacity: 1; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| > .active > a{ | ||
| &, | ||
| &:focus, | ||
| &:hover{ | ||
| background-color: $info-bg; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| //fix bug for the select items in btn-group | ||
| .btn-group.select{ | ||
| overflow: hidden; | ||
| } | ||
| .btn-group.select.open{ | ||
| overflow: visible; | ||
| } | ||
|
|
| @@ -0,0 +1,149 @@ | ||
| .form-control::-moz-placeholder{ | ||
| @include placeholder($medium-gray,1); | ||
| } | ||
| .form-control:-moz-placeholder{ | ||
| @include placeholder($medium-gray,1); | ||
| } | ||
| .form-control::-webkit-input-placeholder{ | ||
| @include placeholder($medium-gray,1); | ||
| } | ||
| .form-control:-ms-input-placeholder{ | ||
| @include placeholder($medium-gray,1); | ||
| } | ||
|
|
||
|
|
||
| .form-control { | ||
| background-color: $white-bg; | ||
| border: 1px solid $medium-gray; | ||
| border-radius: $border-radius-base; | ||
| color: #444444; | ||
|
|
||
| @include input-size($padding-base-vertical, $padding-base-horizontal, $height-base); | ||
| @include box-shadow(none); | ||
|
|
||
| &:focus{ | ||
| background-color: $white-bg; | ||
| border: 1px solid $dark-gray; | ||
| @include box-shadow(none); | ||
| outline: 0 !important; | ||
| } | ||
|
|
||
| .has-success &, | ||
| .has-error &, | ||
| .has-success &:focus, | ||
| .has-error &:focus{ | ||
| border-color: $light-gray; | ||
| @include box-shadow(none); | ||
| } | ||
|
|
||
| .has-success &{ | ||
| color: $success-color; | ||
| &:focus{ | ||
| border-color: $success-color; | ||
| } | ||
| } | ||
|
|
||
| .has-error &{ | ||
| color: $danger-color; | ||
| &:focus{ | ||
| border-color: $danger-color; | ||
| } | ||
| } | ||
|
|
||
| & + .form-control-feedback{ | ||
| border-radius: $border-radius-large; | ||
| font-size: $font-size-base; | ||
| padding: 0 12px 0 0; | ||
| position: absolute; | ||
| right: 25px; | ||
| top: 13px; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .open > &{ | ||
| border-radius: $border-radius-base $border-radius-base 0 0; | ||
| border-bottom-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| .input-lg{ | ||
| height: 55px; | ||
| padding: $padding-large-vertical $padding-large-horizontal; | ||
| } | ||
|
|
||
| .has-error{ | ||
| .form-control-feedback{ | ||
| color: $danger-color; | ||
| } | ||
| } | ||
| .has-success{ | ||
| .form-control-feedback{ | ||
| color: $success-color | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .input-group-addon { | ||
| background-color: $white-color; | ||
| border: 1px solid $light-gray; | ||
| border-radius: $border-radius-base; | ||
|
|
||
| -webkit-transition: all 300ms linear; | ||
| -moz-transition: all 300ms linear; | ||
| -o-transition: all 300ms linear; | ||
| -ms-transition: all 300ms linear; | ||
| transition: all 300ms linear; | ||
|
|
||
| .has-success &, | ||
| .has-error &{ | ||
| background-color: $white-color; | ||
| border: 1px solid $light-gray; | ||
| } | ||
| .has-error .form-control:focus + &{ | ||
| border-color: $danger-color; | ||
| color: $danger-color; | ||
| } | ||
| .has-success .form-control:focus + &{ | ||
| border-color: $success-color; | ||
| color: $success-color; | ||
| } | ||
| .form-control:focus + &, | ||
| .form-control:focus ~ &{ | ||
| background-color: $white-color; | ||
| border-color: $dark-gray; | ||
| } | ||
| } | ||
|
|
||
| .input-group .form-control:first-child, | ||
| .input-group-addon:first-child, | ||
| .input-group-btn:first-child > .dropdown-toggle, | ||
| .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { | ||
| border-right: 0 none; | ||
| } | ||
| .input-group .form-control:last-child, | ||
| .input-group-addon:last-child, | ||
| .input-group-btn:last-child > .dropdown-toggle, | ||
| .input-group-btn:first-child > .btn:not(:first-child) { | ||
| border-left: 0 none; | ||
| } | ||
| .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { | ||
| background-color: $light-gray; | ||
| color: $default-color; | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| .input-group-btn .btn{ | ||
| border-width: $border-thin; | ||
| padding: $padding-round-vertical $padding-base-horizontal; | ||
| } | ||
| .input-group-btn .btn-default:not(.btn-fill){ | ||
| border-color: $medium-gray; | ||
| } | ||
|
|
||
| .input-group-btn:last-child > .btn{ | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .input-group-focus .input-group-addon{ | ||
| border-color: $dark-gray; | ||
| } |
| @@ -0,0 +1,63 @@ | ||
| /* Labels & Progress-bar */ | ||
| .label{ | ||
| padding: 0.2em 0.6em 0.2em; | ||
| border: 1px solid #999999; | ||
| border-radius: 3px; | ||
| color: #999999; | ||
| background-color: #FFFFFF; | ||
| font-weight: 500; | ||
| font-size: 11px; | ||
| text-transform: uppercase; | ||
| display: inline-block; | ||
| margin-bottom: 3px; | ||
| } | ||
| .label-primary{ | ||
| border-color: $primary-color; | ||
| color: $primary-color; | ||
| } | ||
| .label-info{ | ||
| border-color: $info-color; | ||
| color: $info-color; | ||
| } | ||
| .label-success{ | ||
| border-color: $success-color; | ||
| color: $success-color; | ||
| } | ||
| .label-warning{ | ||
| border-color: $warning-color; | ||
| color: $warning-color; | ||
| } | ||
| .label-danger{ | ||
| border-color: $danger-color; | ||
| color: $danger-color; | ||
| } | ||
| .label.label-fill{ | ||
| color: #FFFFFF; | ||
| } | ||
| .label-primary.label-fill, .progress-bar, .progress-bar-primary{ | ||
| background-color: $primary-color; | ||
| } | ||
| .label-info.label-fill, .progress-bar-info{ | ||
| background-color: $info-color; | ||
| } | ||
| .label-success.label-fill, .progress-bar-success{ | ||
| background-color: $success-color; | ||
| } | ||
| .label-warning.label-fill, .progress-bar-warning{ | ||
| background-color: $warning-color; | ||
| } | ||
| .label-danger.label-fill, .progress-bar-danger{ | ||
| background-color: $danger-color; | ||
| } | ||
| .label-default.label-fill{ | ||
| background-color: #999999; | ||
| } | ||
| .progress { | ||
| background-color: #E5E5E5; | ||
| border-radius: 3px; | ||
| box-shadow: none; | ||
| height: 4px; | ||
| } | ||
| .progress-thin{ | ||
| height: 2px; | ||
| } |
| @@ -0,0 +1,106 @@ | ||
| /* General overwrite */ | ||
| body{ | ||
| font-family: "Helvetica Neue","Open Sans",Arial,sans-serif; | ||
| } | ||
| .main{ | ||
| background-color: #FFFFFF; | ||
| position: relative; | ||
| } | ||
| a{ | ||
| color: $info-color; | ||
|
|
||
| &:hover, &:focus{ | ||
| color: $info-states-color; | ||
| text-decoration: none; | ||
| } | ||
| } | ||
|
|
||
| a:focus, a:active, | ||
| button::-moz-focus-inner, | ||
| input[type="reset"]::-moz-focus-inner, | ||
| input[type="button"]::-moz-focus-inner, | ||
| input[type="submit"]::-moz-focus-inner, | ||
| select::-moz-focus-inner, | ||
| input[type="file"] > input[type="button"]::-moz-focus-inner { | ||
| outline : 0; | ||
| } | ||
| .ui-slider-handle:focus, | ||
| .navbar-toggle { | ||
| outline : 0 !important; | ||
| } | ||
|
|
||
| /* Animations */ | ||
| .form-control, | ||
| .input-group-addon, | ||
| .tagsinput, | ||
| .navbar, | ||
| .navbar .alert{ | ||
| @include transition($general-transition-time, linear); | ||
| } | ||
|
|
||
| .fa{ | ||
| width: 18px; | ||
| text-align: center; | ||
| } | ||
| .margin-top{ | ||
| margin-top: 50px; | ||
| } | ||
|
|
||
|
|
||
| /* CT colors */ | ||
| .ct-blue, | ||
| .ct-blue.checkbox.checked .second-icon, | ||
| .ct-blue.checkbox.checked, | ||
| .ct-blue.radio.checked .second-icon, | ||
| .ct-blue.radio.checked{ | ||
| color: $primary-color; | ||
| } | ||
| .ct-azzure, | ||
| .ct-azzure.checkbox.checked .second-icon, | ||
| .ct-azzure.radio.checked .second-icon, | ||
| .ct-azzure.checkbox.checked, | ||
| .ct-azzure.radio.checked{ | ||
| color: $info-color; | ||
| } | ||
| .ct-green, | ||
| .ct-green.checkbox.checked .second-icon, | ||
| .ct-green.radio.checked .second-icon, | ||
| .ct-green.checkbox.checked, | ||
| .ct-green.radio.checked{ | ||
| color: $success-color; | ||
| } | ||
| .ct-orange, | ||
| .ct-orange.checkbox.checked .second-icon, | ||
| .ct-orange.radio.checked .second-icon, | ||
| .ct-orange.checkbox.checked, | ||
| .ct-orange.radio.checked{ | ||
| color: $warning-color; | ||
| } | ||
| .ct-red, | ||
| .ct-red.checkbox.checked .second-icon, | ||
| .ct-red.radio.checked .second-icon, | ||
| .ct-red.checkbox.checked, | ||
| .ct-red.radio.checked{ | ||
| color: $danger-color; | ||
| } | ||
| input.ct-blue + span.switch-left, | ||
| input.ct-blue + span + label + span.switch-right{ | ||
| background-color: $primary-color; | ||
| } | ||
| input.ct-azzure + span.switch-left, | ||
| input.ct-azure + span + label + span.switch-right{ | ||
| background-color: $info-color; | ||
| } | ||
| input.ct-green + span.switch-left, | ||
| input.ct-green + span + label + span.switch-right{ | ||
| background-color: $success-color; | ||
| } | ||
| input.ct-orange + span.switch-left, | ||
| input.ct-orange + span + label + span.switch-right{ | ||
| background-color: $warning-color; | ||
| } | ||
| input.ct-red + span.switch-left, | ||
| input.ct-red + span + label + span.switch-right{ | ||
| background-color: $danger-color; | ||
| } | ||
|
|
| @@ -0,0 +1,13 @@ | ||
| //Utilities | ||
|
|
||
| @import "mixins/transparency"; | ||
| @import "mixins/vendor-prefixes"; | ||
|
|
||
| //Components | ||
|
|
||
| @import "mixins/buttons"; | ||
| @import "mixins/inputs"; | ||
| @import "mixins/labels"; | ||
| @import "mixins/tabs"; | ||
| @import "mixins/navbars"; | ||
|
|
| @@ -0,0 +1,53 @@ | ||
| .modal-header { | ||
| border: 0 none; | ||
| } | ||
| .modal-content { | ||
| border: 0 none; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 15px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .modal-dialog { | ||
| padding-top: 60px; | ||
| } | ||
| .modal-footer { | ||
| border-top: 0 none; | ||
| padding: 5px 10px; | ||
| text-align: right; | ||
| .btn{ | ||
| font-size: 16px; | ||
| } | ||
| .btn-default.btn-simple{ | ||
| font-weight: 400; | ||
| } | ||
| .divider { | ||
| background-color: #DDDDDD; | ||
| display: inline-block; | ||
| float: inherit; | ||
| height: 26px; | ||
| margin: 8px -3px; | ||
| position: absolute; | ||
| width: 1px; | ||
| } | ||
|
|
||
|
|
||
| } | ||
| .modal-footer .modal-footer | ||
| .modal.fade .modal-dialog { | ||
| transform: none; | ||
| -webkit-transform: none; | ||
| -moz-transform: none; | ||
| } | ||
| .modal.in { | ||
| // opacity: 0.25; | ||
| .modal-dialog { | ||
| transform: none; | ||
| -webkit-transform: none; | ||
| -moz-transform: none; | ||
| } | ||
| } | ||
|
|
||
| .modal-footer | ||
| .modal.fade .modal-dialog { | ||
| transform: none; | ||
| } | ||
|
|
| @@ -0,0 +1,274 @@ | ||
| .nav { | ||
| > li{ | ||
| > a:hover, | ||
| > a:focus{ | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| } | ||
| .navbar{ | ||
| border: $none; | ||
| font-size: $font-size-navbar; | ||
| transition: all 0.4s; | ||
| -webkit-transition: all 0.4s; | ||
|
|
||
| .navbar-brand { | ||
| font-weight: $font-weight-bold; | ||
| margin: $navbar-margin-brand; | ||
| padding: $navbar-padding-brand; | ||
| font-size: $font-size-large-navbar; | ||
| } | ||
| .navbar-nav{ | ||
| > li > a { | ||
| padding: $navbar-padding-a; | ||
| margin: $navbar-margin-a; | ||
| } | ||
| > li > a.btn{ | ||
| margin: $navbar-margin-a-btn; | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
| } | ||
| > li > a.btn-round{ | ||
| margin: $navbar-margin-a-btn-round; | ||
| } | ||
| > li > a [class^="fa"]{ | ||
| font-size: $font-size-large + 1; | ||
| position: relative; | ||
| top: 1px; | ||
| } | ||
| } | ||
| .btn{ | ||
| margin: $navbar-margin-btn; | ||
| font-size: $font-size-base; | ||
| } | ||
| .btn-simple{ | ||
| font-size: $font-size-medium; | ||
| } | ||
| .caret{ | ||
| // @include center-item(); | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .navbar-nav > li > .dropdown-menu{ | ||
| border-radius: $border-radius-extreme; | ||
| margin-top: -5px; | ||
| } | ||
|
|
||
| .navbar-transparent, [class*="navbar-ct"]{ | ||
| .navbar-brand{ | ||
| color: $white-color; | ||
| @include opacity(.9); | ||
|
|
||
| &:focus, | ||
| &:hover{ | ||
| background-color: transparent; | ||
| color: $white-color; | ||
| @include opacity(1); | ||
| } | ||
| } | ||
|
|
||
| .navbar-nav{ | ||
| > li > a:not(.btn), | ||
| > li > a.btn-default{ | ||
| color: $white-color; | ||
| border-color: $white-color; | ||
| @include opacity(0.8); | ||
| } | ||
|
|
||
| > li > a.btn-default:hover, | ||
| > li > a.btn-default:focus{ | ||
| border-color: $white-color; | ||
| @include opacity(1); | ||
| } | ||
|
|
||
| > .active > a:not(.btn), | ||
| > .active > a:hover:not(.btn), | ||
| > .active > a:focus:not(.btn), | ||
| > li > a:hover:not(.btn), | ||
| > li > a:focus:not(.btn){ | ||
| background-color: transparent; | ||
| border-radius: 3px; | ||
| color: $white-color; | ||
| @include opacity(1); | ||
| } | ||
| .nav > li > a.btn:hover{ | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| > .dropdown > a .caret, | ||
| > .dropdown > a:hover .caret, | ||
| > .dropdown > a:focus .caret{ | ||
| border-bottom-color: $white-color; | ||
| border-top-color: $white-color; | ||
| } | ||
|
|
||
| > .open > a, | ||
| > .open > a:hover, | ||
| > .open > a:focus { | ||
| background-color: transparent; | ||
| color: $white-color; | ||
| @include opacity(1); | ||
| } | ||
| } | ||
|
|
||
| .btn-default{ | ||
| color: $white-color; | ||
| border-color: $white-color; | ||
| } | ||
| .btn-default.btn-fill{ | ||
| color: $dark-gray; | ||
| background-color: $white-color; | ||
| @include opacity(.9); | ||
| } | ||
| .btn-default.btn-fill:hover, | ||
| .btn-default.btn-fill:focus, | ||
| .btn-default.btn-fill:active, | ||
| .btn-default.btn-fill.active, | ||
| .open .dropdown-toggle.btn-fill.btn-default{ | ||
| border-color: $white-color; | ||
| @include opacity(1); | ||
| } | ||
|
|
||
| .navbar-toggle .icon-bar{ | ||
| background-color: $white-color !important; | ||
| } | ||
| } | ||
|
|
||
| .navbar-toggle:hover, | ||
| .navbar-toggle:focus { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| /* | ||
| .navbar-transparent{ | ||
| .dropdown-menu .divider{ | ||
| background-color: rgba($white-color,.2); | ||
| } | ||
| } | ||
| */ | ||
|
|
||
| .navbar-inverse{ | ||
| .navbar-toggle:hover, | ||
| .navbar-toggle:focus { | ||
| background-color: transparent; | ||
| } | ||
| .navbar-nav > .open > a{ | ||
| &, | ||
| &:focus, | ||
| &:hover{ | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .nav-open .nav .caret{ | ||
| border-bottom-color: $white-color; | ||
| border-top-color: $white-color; | ||
| } | ||
|
|
||
| .navbar-default { | ||
| background-color: $white-navbar; | ||
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | ||
|
|
||
| .navbar-nav{ | ||
| > .active > a, | ||
| > .active > a:not(.btn):hover, | ||
| > .active > a:not(.btn):focus, | ||
| > li > a:not(.btn):hover, | ||
| > li > a:not(.btn):focus { | ||
| background-color: transparent; | ||
| border-radius: 3px; | ||
| color: $info-color; | ||
| @include opacity(1); | ||
| } | ||
|
|
||
| > .dropdown > a:hover .caret, | ||
| > .dropdown > a:focus .caret { | ||
| border-bottom-color: $info-color; | ||
| border-top-color: $info-color; | ||
|
|
||
| } | ||
|
|
||
| > .open > a, | ||
| > .open > a:hover, | ||
| > .open > a:focus{ | ||
| background-color: transparent; | ||
| color: $info-color; | ||
| } | ||
|
|
||
| .navbar-toggle:hover,.navbar-toggle:focus { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| &:not(.navbar-transparent) .btn-default:hover{ | ||
| color: $info-color; | ||
| border-color: $info-color; | ||
| } | ||
| &:not(.navbar-transparent) .btn-neutral, | ||
| &:not(.navbar-transparent) .btn-neutral:hover, | ||
| &:not(.navbar-transparent) .btn-neutral:active{ | ||
| color: $dark-gray; | ||
| } | ||
|
|
||
| .navbar-toggle:hover, | ||
| .navbar-toggle:focus { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| .navbar-form{ | ||
| @include box-shadow(none); | ||
| .form-control{ | ||
| @include light-form(); | ||
| height: 22px; | ||
| font-size: $font-size-navbar; | ||
| line-height: $line-height-general; | ||
| color: $light-gray; | ||
| } | ||
| .navbar-transparent & .form-control, | ||
| [class*="navbar-ct"] & .form-control{ | ||
| color: $white-color; | ||
| border: $none; | ||
| border-bottom: 1px solid rgba($white-color,.6); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .navbar-ct-blue{ | ||
| @include navbar-color($blue-navbar); | ||
| } | ||
| .navbar-ct-azzure{ | ||
| @include navbar-color($azure-navbar); | ||
| } | ||
| .navbar-ct-green{ | ||
| @include navbar-color($green-navbar); | ||
| } | ||
| .navbar-ct-orange{ | ||
| @include navbar-color($orange-navbar); | ||
| } | ||
| .navbar-ct-red{ | ||
| @include navbar-color($red-navbar); | ||
| } | ||
|
|
||
| .navbar-transparent{ | ||
| padding-top: 15px; | ||
| background-color: transparent; | ||
| border-bottom: 1px solid transparent; | ||
| } | ||
|
|
||
| .navbar-toggle{ | ||
| margin-top: 19px; | ||
| margin-bottom: 19px; | ||
| border: $none; | ||
|
|
||
| .icon-bar { | ||
| background-color: $white-color; | ||
| } | ||
| .navbar-collapse, | ||
| .navbar-form { | ||
| border-color: transparent; | ||
| } | ||
| } |
| @@ -0,0 +1,257 @@ | ||
|
|
||
| @media (min-width: 768px){ | ||
| .navbar-form { | ||
| margin-top: 21px; | ||
| margin-bottom: 21px; | ||
| padding-left: 5px; | ||
| padding-right: 5px; | ||
| } | ||
| .navbar-search-form{ | ||
| display: none; | ||
| } | ||
| .navbar-nav > li > .dropdown-menu, | ||
| .dropdown .dropdown-menu{ | ||
| @include transform-scale(0); | ||
| @include transition($slow-transition-time, $transition-bezier); | ||
| @include opacity(0); | ||
| visibility: hidden; | ||
| display: block; | ||
| } | ||
| .navbar-nav > li.open > .dropdown-menu, | ||
| .dropdown.open .dropdown-menu{ | ||
| @include transform-scale(1); | ||
| @include transform-origin($dropdown-coordinates); | ||
| @include opacity(1); | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .navbar-nav > li > .dropdown-menu:before{ | ||
| border-bottom: 11px solid rgba(0, 0, 0, 0.2); | ||
| border-left: 11px solid rgba(0, 0, 0, 0); | ||
| border-right: 11px solid rgba(0, 0, 0, 0); | ||
| content: ""; | ||
| display: inline-block; | ||
| position: absolute; | ||
| left: 12px; | ||
| top: -11px; | ||
| } | ||
| .navbar-nav > li > .dropdown-menu:after { | ||
| border-bottom: 11px solid #FFFFFF; | ||
| border-left: 11px solid rgba(0, 0, 0, 0); | ||
| border-right: 11px solid rgba(0, 0, 0, 0); | ||
| content: ""; | ||
| display: inline-block; | ||
| position: absolute; | ||
| left: 12px; | ||
| top: -10px; | ||
| } | ||
|
|
||
| .navbar-nav.navbar-right > li > .dropdown-menu:before{ | ||
| left: auto; | ||
| right: 12px; | ||
| } | ||
|
|
||
| .navbar-nav.navbar-right > li > .dropdown-menu:after{ | ||
| left: auto; | ||
| right: 12px; | ||
| } | ||
|
|
||
| .footer:not(.footer-big){ | ||
| nav > ul{ | ||
| li:first-child{ | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .nav-open .navbar-collapse{ | ||
| @include transform-translate-x(0px); | ||
| } | ||
| .nav-open .navbar .container{ | ||
| @include transform-translate-x(-200px); | ||
| } | ||
|
|
||
| .navbar-burger{ | ||
| .container{ | ||
| padding: 0 15px; | ||
| } | ||
| .navbar-header{ | ||
| width: 100%; | ||
| } | ||
| .navbar-toggle{ | ||
| display: block; | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| &.navbar .navbar-collapse.collapse, | ||
| &.navbar .navbar-collapse.collapse.in, | ||
| &.navbar .navbar-collapse.collapsing{ | ||
| display: none !important; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /* Changes for small display */ | ||
|
|
||
| @media (max-width: 767px){ | ||
| .navbar-transparent{ | ||
| padding-top: 0px; | ||
| background-color: rgba(0, 0, 0, 0.45); | ||
| } | ||
|
|
||
| .body-click { | ||
| right: 230px; | ||
| } | ||
|
|
||
| body{ | ||
| position: relative; | ||
|
|
||
| & > .navbar-collapse { | ||
| width: 230px; | ||
| @include transform-translate-x(230px); | ||
| } | ||
| } | ||
|
|
||
| .navbar{ | ||
| .container{ | ||
| width: 100%; | ||
| position: relative; | ||
| @include transform-translate-x(0px); | ||
| @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); | ||
|
|
||
| .nav-open &{ | ||
| @include transform-translate-x(-230px); | ||
| } | ||
| } | ||
|
|
||
| .navbar-collapse.collapse, | ||
| .navbar .navbar-collapse.collapse.in, | ||
| .navbar .navbar-collapse.collapsing{ | ||
| display: none !important; | ||
| } | ||
| } | ||
|
|
||
| .nav-open .navbar-collapse{ | ||
| @include transform-translate-x(0px); | ||
| } | ||
|
|
||
| .navbar-toggle .icon-bar{ | ||
| display: block; | ||
| position: relative; | ||
| background: $white-color; | ||
| width: 24px; | ||
| height: 2px; | ||
| border-radius: 1px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .navbar-default .navbar-toggle .icon-bar{ | ||
| background-color: $default-color; | ||
| } | ||
|
|
||
| .navbar-header .navbar-toggle { | ||
| margin-top: 17px; | ||
| margin-bottom: 17px; | ||
| width: 40px; | ||
| height: 40px; | ||
| } | ||
| .bar1, | ||
| .bar2, | ||
| .bar3 { | ||
| outline: 1px solid transparent; | ||
| } | ||
| .bar1 { | ||
| top: 0px; | ||
| @include bar-animation($topbar-back); | ||
| } | ||
| .bar2 { | ||
| opacity: 1; | ||
| } | ||
| .bar3 { | ||
| bottom: 0px; | ||
| @include bar-animation($bottombar-back); | ||
| } | ||
| .toggled .bar1 { | ||
| top: 6px; | ||
| @include bar-animation($topbar-x); | ||
| } | ||
| .toggled .bar2 { | ||
| opacity: 0; | ||
| } | ||
| .toggled .bar3 { | ||
| bottom: 6px; | ||
| @include bar-animation($bottombar-x); | ||
| } | ||
|
|
||
| @include topbar-x-rotation(); | ||
| @include topbar-back-rotation(); | ||
| @include bottombar-x-rotation(); | ||
| @include bottombar-back-rotation(); | ||
|
|
||
| @-webkit-keyframes fadeIn { | ||
| 0% {opacity: 0;} | ||
| 100% {opacity: 1;} | ||
| } | ||
| @-moz-keyframes fadeIn { | ||
| 0% {opacity: 0;} | ||
| 100% {opacity: 1;} | ||
| } | ||
| @keyframes fadeIn { | ||
| 0% {opacity: 0;} | ||
| 100% {opacity: 1;} | ||
| } | ||
|
|
||
| [class*="navbar-"] .navbar-nav { | ||
| & > li > a, | ||
| > li > a:hover, | ||
| > li > a:focus, | ||
| .active > a, | ||
| .active > a:hover, | ||
| .active > a:focus, | ||
| .open .dropdown-menu > li > a, | ||
| .open .dropdown-menu > li > a:hover, | ||
| .open .dropdown-menu > li > a:focus, | ||
| .navbar-nav .open .dropdown-menu > li > a:active { | ||
| // color: white; | ||
| } | ||
|
|
||
| & > li > a, | ||
| > li > a:hover, | ||
| > li > a:focus, | ||
| .open .dropdown-menu > li > a, | ||
| .open .dropdown-menu > li > a:hover, | ||
| .open .dropdown-menu > li > a:focus{ | ||
| opacity: .7; | ||
| background: transparent; | ||
| } | ||
|
|
||
| &.navbar-nav .open .dropdown-menu > li > a:active { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| & .dropdown > a{ | ||
| &:hover .caret { | ||
| border-bottom-color: #777; | ||
| border-top-color: #777; | ||
| } | ||
| &:active .caret { | ||
| border-bottom-color: white; | ||
| border-top-color: white; | ||
| } | ||
| } | ||
| } | ||
| .dropdown-menu { | ||
| display: none; | ||
| } | ||
| .navbar-fixed-top { | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| .navbar-toggle:hover, | ||
| .navbar-toggle:focus { | ||
| background-color: transparent !important; | ||
| } | ||
| .btn.dropdown-toggle{ | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,218 @@ | ||
|
|
||
| /*! | ||
| * jQuery UI Slider 1.10.4 | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright 2014 jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| * | ||
| * http://api.jqueryui.com/slider/#theming | ||
| */ | ||
| .ui-slider { | ||
| position: relative; | ||
| text-align: left; | ||
| } | ||
| .ui-slider .ui-slider-handle { | ||
| position: absolute; | ||
| z-index: 2; | ||
| width: 1.2em; | ||
| height: 1.2em; | ||
| cursor: default; | ||
| } | ||
| .ui-slider .ui-slider-range { | ||
| position: absolute; | ||
| z-index: 1; | ||
| font-size: .7em; | ||
| display: block; | ||
| border: 0; | ||
| background-position: 0 0; | ||
| } | ||
|
|
||
| /* For IE8 - See #6727 */ | ||
| .ui-slider.ui-state-disabled .ui-slider-handle, | ||
| .ui-slider.ui-state-disabled .ui-slider-range { | ||
| filter: inherit; | ||
| } | ||
|
|
||
| .ui-slider-horizontal { | ||
| height: 4px; | ||
| } | ||
| .ui-slider-horizontal .ui-slider-handle { | ||
| margin-left: -10px; | ||
| top: -7px; | ||
| } | ||
| .ui-slider-horizontal .ui-slider-range { | ||
| top: 0; | ||
| height: 100%; | ||
| } | ||
| .ui-slider-horizontal .ui-slider-range-min { | ||
| left: 0; | ||
| } | ||
| .ui-slider-horizontal .ui-slider-range-max { | ||
| right: 0; | ||
| } | ||
|
|
||
| .ui-slider-vertical { | ||
| width: .8em; | ||
| height: 100px; | ||
| } | ||
| .ui-slider-vertical .ui-slider-handle { | ||
| left: -.3em; | ||
| margin-left: 0; | ||
| margin-bottom: -.6em; | ||
| } | ||
| .ui-slider-vertical .ui-slider-range { | ||
| left: 0; | ||
| width: 100%; | ||
| } | ||
| .ui-slider-vertical .ui-slider-range-min { | ||
| bottom: 0; | ||
| } | ||
| .ui-slider-vertical .ui-slider-range-max { | ||
| top: 0; | ||
| } | ||
|
|
||
| /* Component containers | ||
| ----------------------------------*/ | ||
| .ui-widget { | ||
| font-size: 1.1em/*{fsDefault}*/; | ||
| } | ||
| .ui-widget .ui-widget { | ||
| font-size: 1em; | ||
| } | ||
| .ui-widget input, | ||
| .ui-widget select, | ||
| .ui-widget textarea, | ||
| .ui-widget button { | ||
| font-size: 1em; | ||
| } | ||
| .ui-widget-content { | ||
| background-color: #E5E5E5; | ||
| } | ||
| .ui-widget-content a { | ||
| color: #222222/*{fcContent}*/; | ||
| } | ||
| .ui-widget-header { | ||
| background: #999999; | ||
| color: #222222; | ||
| font-weight: bold; | ||
| } | ||
| .ui-widget-header a { | ||
| color: #222222; | ||
| } | ||
|
|
||
| .slider-primary .ui-widget-header{ | ||
| background-color: #3472F7; | ||
| } | ||
| .slider-info .ui-widget-header{ | ||
| background-color: #2C93FF; | ||
| } | ||
| .slider-success .ui-widget-header{ | ||
| background-color: #05AE0E; | ||
| } | ||
| .slider-warning .ui-widget-header{ | ||
| background-color: #FF9500; | ||
| } | ||
| .slider-danger .ui-widget-header{ | ||
| background-color: #FF3B30; | ||
| } | ||
|
|
||
| /* Interaction states | ||
| ----------------------------------*/ | ||
| .ui-state-default, | ||
| .ui-widget-content .ui-state-default, | ||
| .ui-widget-header .ui-state-default { | ||
| background: rgb(255,255,255); /* Old browsers */ | ||
| background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,242,1) 100%); /* FF3.6+ */ | ||
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(241,241,242,1))); /* Chrome,Safari4+ */ | ||
| background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
| background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* Opera 11.10+ */ | ||
| background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* IE10+ */ | ||
| background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* W3C */ | ||
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f2',GradientType=0 ); /* IE6-9 */ | ||
|
|
||
| border-radius: 50%; | ||
| box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 2px rgba(0, 0, 0, 0.4); | ||
| height:15px; | ||
| width:15px; | ||
| cursor:pointer; | ||
| } | ||
| .ui-state-default a, | ||
| .ui-state-default a:link, | ||
| .ui-state-default a:visited { | ||
| color: #555555/*{fcDefault}*/; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .ui-state-hover a, | ||
| .ui-state-hover a:hover, | ||
| .ui-state-hover a:link, | ||
| .ui-state-hover a:visited, | ||
| .ui-state-focus a, | ||
| .ui-state-focus a:hover, | ||
| .ui-state-focus a:link, | ||
| .ui-state-focus a:visited { | ||
| color: #212121/*{fcHover}*/; | ||
| text-decoration: none; | ||
| } | ||
| .ui-state-active a, | ||
| .ui-state-active a:link, | ||
| .ui-state-active a:visited { | ||
| color: #212121/*{fcActive}*/; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| /* Interaction Cues | ||
| ----------------------------------*/ | ||
| .ui-state-highlight, | ||
| .ui-widget-content .ui-state-highlight, | ||
| .ui-widget-header .ui-state-highlight { | ||
| border: 1px solid #fcefa1; | ||
| background: #fbf9ee; | ||
| color: #363636; | ||
| } | ||
| .ui-state-highlight a, | ||
| .ui-widget-content .ui-state-highlight a, | ||
| .ui-widget-header .ui-state-highlight a { | ||
| color: #363636; | ||
| } | ||
| .ui-state-error, | ||
| .ui-widget-content .ui-state-error, | ||
| .ui-widget-header .ui-state-error { | ||
| border: 1px solid $danger-color/*{borderColorError}*/; | ||
| background-color: $danger-color; | ||
| color: $danger-color/*{fcError}*/; | ||
| } | ||
| .ui-state-error a, | ||
| .ui-widget-content .ui-state-error a, | ||
| .ui-widget-header .ui-state-error a { | ||
| color: $danger-color/*{fcError}*/; | ||
| } | ||
| .ui-state-error-text, | ||
| .ui-widget-content .ui-state-error-text, | ||
| .ui-widget-header .ui-state-error-text { | ||
| color: $danger-color/*{fcError}*/; | ||
| } | ||
| .ui-priority-primary, | ||
| .ui-widget-content .ui-priority-primary, | ||
| .ui-widget-header .ui-priority-primary { | ||
| font-weight: bold; | ||
| } | ||
| .ui-priority-secondary, | ||
| .ui-widget-content .ui-priority-secondary, | ||
| .ui-widget-header .ui-priority-secondary { | ||
| opacity: .7; | ||
| filter:Alpha(Opacity=70); | ||
| font-weight: normal; | ||
| } | ||
| .ui-state-disabled, | ||
| .ui-widget-content .ui-state-disabled, | ||
| .ui-widget-header .ui-state-disabled { | ||
| opacity: .35; | ||
| filter:Alpha(Opacity=35); | ||
| background-image: none; | ||
| } | ||
| .ui-state-disabled .ui-icon { | ||
| filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ | ||
| } |
| @@ -0,0 +1,122 @@ | ||
| /* Navigation menu */ | ||
| .nav-pills { | ||
| > li + li { | ||
| margin-left: 0; | ||
| } | ||
| > li > a { | ||
| border: 1px solid $info-color; | ||
| border-radius: 0; | ||
| color: $info-color; | ||
| margin-left: -1px; | ||
|
|
||
| &:hover, | ||
| &:focus{ | ||
| background-color: #F5F5F5; | ||
| } | ||
| } | ||
| > li.active > a, | ||
| > li.active > a:hover, | ||
| > li.active > a:focus { | ||
| background-color: $info-color; | ||
| color: #FFFFFF !important; | ||
| } | ||
| > li:first-child > a{ | ||
| border-radius: $border-radius-base 0 0 $border-radius-base; | ||
| margin: 0; | ||
| } | ||
| > li:last-child > a{ | ||
| border-radius: 0 $border-radius-base $border-radius-base 0; | ||
| } | ||
| } | ||
|
|
||
| // style for pagination | ||
| .pagination.pagination-no-border > li > a, | ||
| .pagination.pagination-no-border > li > span{ | ||
| border: 0; | ||
| } | ||
| .pagination > li > a, .pagination > li > span, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span{ | ||
| border-radius: 50%; | ||
| margin: 0 2px; | ||
| color: $default-states-color; | ||
| } | ||
| .pagination > li.active > a, .pagination > li.active > span, .pagination > li.active > a:hover, .pagination > li.active > span:hover, .pagination > li.active > a:focus, .pagination > li.active > span:focus { | ||
| background-color: $info-color; | ||
| border: 0; | ||
| color: #FFFFFF; | ||
| padding: 7px 13px; | ||
| } | ||
|
|
||
| .nav-pills.ct-blue > li.active > a, | ||
| .nav-pills.ct-blue > li.active > a:hover, | ||
| .nav-pills.ct-blue > li.active > a:focus, | ||
| .pagination.ct-blue > li.active > a, | ||
| .pagination.ct-blue > li.active > span, | ||
| .pagination.ct-blue > li.active > a:hover, | ||
| .pagination.ct-blue > li.active > span:hover, | ||
| .pagination.ct-blue > li.active > a:focus, | ||
| .pagination.ct-blue > li.active > span:focus{ | ||
| background-color: $primary-color; | ||
| } | ||
|
|
||
| .nav-pills.ct-azzure > li.active > a, | ||
| .nav-pills.ct-azzure > li.active > a:hover, | ||
| .nav-pills.ct-azzure > li.active > a:focus, | ||
| .pagination.ct-azzure > li.active > a, | ||
| .pagination.ct-azzure > li.active > span, | ||
| .pagination.ct-azzure > li.active > a:hover, | ||
| .pagination.ct-azzure > li.active > span:hover, | ||
| .pagination.ct-azzure > li.active > a:focus, | ||
| .pagination.ct-azzure > li.active > span:focus{ | ||
| background-color: $info-color; | ||
| } | ||
|
|
||
| .nav-pills.ct-green > li.active > a, | ||
| .nav-pills.ct-green > li.active > a:hover, | ||
| .nav-pills.ct-green > li.active > a:focus, | ||
| .pagination.ct-green > li.active > a, | ||
| .pagination.ct-green > li.active > span, | ||
| .pagination.ct-green > li.active > a:hover, | ||
| .pagination.ct-green > li.active > span:hover, | ||
| .pagination.ct-green > li.active > a:focus, | ||
| .pagination.ct-green > li.active > span:focus{ | ||
| background-color: $success-color; | ||
| } | ||
|
|
||
| .nav-pills.ct-orange > li.active > a, | ||
| .nav-pills.ct-orange > li.active > a:hover, | ||
| .nav-pills.ct-orange > li.active > a:focus, | ||
| .pagination.ct-orange > li.active > a, | ||
| .pagination.ct-orange > li.active > span, | ||
| .pagination.ct-orange > li.active > a:hover, | ||
| .pagination.ct-orange > li.active > span:hover, | ||
| .pagination.ct-orange > li.active > a:focus, | ||
| .pagination.ct-orange > li.active > span:focus{ | ||
| background-color: $warning-color; | ||
| } | ||
|
|
||
| .nav-pills.ct-red > li.active > a, | ||
| .nav-pills.ct-red > li.active > a:hover, | ||
| .nav-pills.ct-red > li.active > a:focus, | ||
| .pagination.ct-red > li.active > a, | ||
| .pagination.ct-red > li.active > span, | ||
| .pagination.ct-red > li.active > a:hover, | ||
| .pagination.ct-red > li.active > span:hover, | ||
| .pagination.ct-red > li.active > a:focus, | ||
| .pagination.ct-red > li.active > span:focus{ | ||
| background-color: $danger-color; | ||
| } | ||
| .nav-pills.ct-blue > li > a { | ||
| @include pill-style($primary-color); | ||
| } | ||
| .nav-pills.ct-azzure > li > a { | ||
| @include pill-style($info-color); | ||
| } | ||
| .nav-pills.ct-green > li > a { | ||
| @include pill-style($success-color); | ||
| } | ||
| .nav-pills.ct-orange > li > a { | ||
| @include pill-style($warning-color); | ||
| } | ||
| .nav-pills.ct-red > li > a { | ||
| @include pill-style($danger-color); | ||
| } |
| @@ -0,0 +1,107 @@ | ||
| .tooltip { | ||
| font-size: $font-size-base; | ||
| font-weight: $font-weight-bold; | ||
|
|
||
| &.top { | ||
| margin-top: -11px; | ||
| padding: 0; | ||
| } | ||
| &.top .tooltip-inner:after { | ||
| border-top: 11px solid #FAE6A4; | ||
| border-left: 11px solid rgba(0, 0, 0, 0); | ||
| border-right: 11px solid rgba(0, 0, 0, 0); | ||
| bottom: -10px; | ||
| } | ||
| &.top .tooltip-inner:before { | ||
| border-top: 11px solid rgba(0, 0, 0, 0.2); | ||
| border-left: 11px solid rgba(0, 0, 0, 0); | ||
| border-right: 11px solid rgba(0, 0, 0, 0); | ||
| bottom: -11px; | ||
| } | ||
| &.bottom { | ||
| margin-top: 11px; | ||
| padding: 0; | ||
| } | ||
| &.bottom .tooltip-inner:after { | ||
| border-bottom: 11px solid #FAE6A4; | ||
| border-left: 11px solid rgba(0, 0, 0, 0); | ||
| border-right: 11px solid rgba(0, 0, 0, 0); | ||
| top: -10px; | ||
| } | ||
| &.bottom .tooltip-inner:before { | ||
| border-bottom: 11px solid rgba(0, 0, 0, 0.2); | ||
| border-left: 11px solid rgba(0, 0, 0, 0); | ||
| border-right: 11px solid rgba(0, 0, 0, 0); | ||
| top: -11px; | ||
| } | ||
| &.left{ | ||
| margin-left: -11px; | ||
| padding: 0; | ||
| } | ||
| &.left .tooltip-inner:after { | ||
| border-left: 11px solid #FAE6A4; | ||
| border-top: 11px solid rgba(0, 0, 0, 0); | ||
| border-bottom: 11px solid rgba(0, 0, 0, 0); | ||
| right: -10px; | ||
| left: auto; | ||
| margin-left: 0; | ||
| } | ||
| &.left .tooltip-inner:before { | ||
| border-left: 11px solid rgba(0, 0, 0, 0.2); | ||
| border-top: 11px solid rgba(0, 0, 0, 0); | ||
| border-bottom: 11px solid rgba(0, 0, 0, 0); | ||
| right: -11px; | ||
| left: auto; | ||
| margin-left: 0; | ||
| } | ||
| &.right{ | ||
| margin-left: 11px; | ||
| padding: 0; | ||
| } | ||
| &.right .tooltip-inner:after { | ||
| border-right: 11px solid #FAE6A4; | ||
| border-top: 11px solid rgba(0, 0, 0, 0); | ||
| border-bottom: 11px solid rgba(0, 0, 0, 0); | ||
| left: -10px; | ||
| top: 0; | ||
| margin-left: 0; | ||
| } | ||
| &.right .tooltip-inner:before { | ||
| border-right: 11px solid rgba(0, 0, 0, 0.2); | ||
| border-top: 11px solid rgba(0, 0, 0, 0); | ||
| border-bottom: 11px solid rgba(0, 0, 0, 0); | ||
| left: -11px; | ||
| top: 0; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| .tooltip-arrow{ | ||
| display: none; | ||
| opacity: 0; | ||
| } | ||
| .tooltip-inner { | ||
| background-color: #FAE6A4; | ||
| border-radius: 4px; | ||
| box-shadow: 0 1px 13px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(115, 71, 38, 0.23); | ||
| color: #734726; | ||
| max-width: 260px; | ||
| min-width: 86px; | ||
| padding: 6px 10px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| } | ||
| .tooltip-inner:after { | ||
| content: ""; | ||
| display: inline-block; | ||
| left: 100%; | ||
| margin-left: -60%; | ||
| position: absolute; | ||
| } | ||
| .tooltip-inner:before { | ||
| content: ""; | ||
| display: inline-block; | ||
| left: 100%; | ||
| margin-left: -60%; | ||
| position: absolute; | ||
| } |
| @@ -0,0 +1,73 @@ | ||
| /* Font Smoothing */ | ||
|
|
||
| h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, a, .td-name, td{ | ||
| -moz-osx-font-smoothing: grayscale; | ||
| -webkit-font-smoothing: antialiased; | ||
| font-family: "Helvetica Neue","Open Sans",Arial,sans-serif; | ||
| } | ||
|
|
||
| h1, .h1, h2, .h2, h3, .h3, h4, .h4{ | ||
| font-weight: $font-weight-normal; | ||
| margin: $margin-large-vertical 0 $margin-base-vertical; | ||
| } | ||
|
|
||
| h1, .h1 { | ||
| font-size: $font-size-h1; | ||
| } | ||
| h2, .h2{ | ||
| font-size: $font-size-h2; | ||
| } | ||
| h3, .h3{ | ||
| font-size: $font-size-h3; | ||
| margin: 20px 0 10px; | ||
| } | ||
| h4, .h4{ | ||
| font-size: $font-size-h4; | ||
| line-height: 30px; | ||
| } | ||
| h5, .h5 { | ||
| font-size: $font-size-h5; | ||
| margin-bottom: 15px; | ||
| } | ||
| h6, .h6{ | ||
| font-size: $font-size-h6; | ||
| font-weight: $font-weight-bold; | ||
| text-transform: uppercase; | ||
| } | ||
| p{ | ||
| font-size: $font-paragraph; | ||
| line-height: $line-height-general; | ||
| } | ||
|
|
||
| h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { | ||
| color: $dark-gray; | ||
| font-weight: $font-weight-light; | ||
| line-height: $line-height-general; | ||
| } | ||
|
|
||
| h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { | ||
| font-size: 60%; | ||
| } | ||
|
|
||
| h1 .subtitle{ | ||
| display: block; | ||
| font-family: 'Grand Hotel',cursive; | ||
| margin: 0 0 $margin-large-vertical; | ||
| } | ||
|
|
||
| .text-primary, .text-primary:hover{ | ||
| color: $primary-color !important; | ||
| } | ||
| .text-info, .text-info:hover{ | ||
| color: $info-color !important; | ||
| } | ||
| .text-success, .text-success:hover{ | ||
| color: $success-color !important; | ||
| } | ||
| .text-warning, .text-warning:hover{ | ||
| color: $warning-color !important; | ||
| } | ||
| .text-danger, .text-danger:hover{ | ||
| color: $danger-color !important; | ||
| } | ||
|
|
| @@ -0,0 +1,195 @@ | ||
| //== Buttons | ||
| // | ||
| //## For each of Bootstrap's buttons, define text, background and border color. | ||
|
|
||
| $none: 0 !default; | ||
| $border-thin: 1px !default; | ||
| $border-thick: 2px !default; | ||
|
|
||
| $white-color: #FFFFFF !default; | ||
| $white-bg: #FFFFFF !default; | ||
|
|
||
| $smoke-bg: #F5F5F5 !default; | ||
|
|
||
| $black-bg: rgba(30,30,30,.97) !default; | ||
|
|
||
| $black-color: #333333 !default; | ||
| $black-hr: #444444 !default; | ||
|
|
||
| $light-gray: #E3E3E3 !default; | ||
| $medium-gray: #DDDDDD !default; | ||
| $dark-gray: #9A9A9A !default; | ||
|
|
||
| $transparent-bg: transparent !default; | ||
|
|
||
| $default-color: #888888 !default; | ||
| $default-bg: #888888 !default; | ||
| $default-states-color: #777777 !default; | ||
|
|
||
| $primary-color: #3472F7 !default; | ||
| $primary-bg: #3472F7 !default; | ||
| $primary-states-color: #1D62F0 !default; | ||
|
|
||
| $success-color: #05AE0E !default; | ||
| $success-bg: #05AE0E !default; | ||
| $success-states-color: #049F0C !default; | ||
|
|
||
| $info-color: #2CA8FF !default; | ||
| $info-bg: #2CA8FF !default; | ||
| $info-states-color: #109CFF !default; | ||
|
|
||
| $warning-color: #FF9500 !default; | ||
| $warning-bg: #FF9500 !default; | ||
| $warning-states-color: #ED8D00 !default; | ||
|
|
||
|
|
||
| $danger-color: #FF3B30 !default; | ||
| $danger-bg: #FF3B30 !default; | ||
| $danger-states-color: #EE2D20 !default; | ||
|
|
||
|
|
||
|
|
||
| $link-disabled-color: #666666 !default; | ||
|
|
||
|
|
||
| /* light colors */ | ||
| $light-blue: rgba($primary-color, .2); | ||
| $light-azure: rgba($info-color, .2); | ||
| $light-green: rgba($success-color, .2); | ||
| $light-orange: rgba($warning-color, .2); | ||
| $light-red: rgba($danger-color, .2); | ||
|
|
||
|
|
||
| //== Components | ||
| // | ||
|
|
||
| $padding-base-vertical: 8px !default; | ||
| $padding-base-horizontal: 16px !default; | ||
|
|
||
| $padding-round-vertical: 9px !default; | ||
| $padding-round-horizontal: 18px !default; | ||
|
|
||
| $padding-simple-vertical: 10px !default; | ||
| $padding-simple-horizontal: 18px !default; | ||
|
|
||
| $padding-large-vertical: 14px !default; | ||
| $padding-large-horizontal: 30px !default; | ||
|
|
||
| $padding-small-vertical: 5px !default; | ||
| $padding-small-horizontal: 10px !default; | ||
|
|
||
| $padding-xs-vertical: 1px !default; | ||
| $padding-xs-horizontal: 5px !default; | ||
|
|
||
| $padding-label-vertical: 2px !default; | ||
| $padding-label-horizontal: 12px !default; | ||
|
|
||
| $margin-large-vertical: 30px !default; | ||
| $margin-base-vertical: 15px !default; | ||
|
|
||
| $margin-bottom: 0 0 10px 0 !default; | ||
| $border-radius-small: 3px !default; | ||
| $border-radius-base: 4px !default; | ||
| $border-radius-large: 6px !default; | ||
| $border-radius-extreme: 10px !default; | ||
|
|
||
| $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; | ||
| $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; | ||
|
|
||
| $btn-round-radius: 30px !default; | ||
|
|
||
| $height-base: 40px !default; | ||
|
|
||
| $font-size-base: 14px !default; | ||
| $font-size-small: 12px !default; | ||
| $font-size-medium: 16px !default; | ||
| $font-size-large: 18px !default; | ||
| $font-size-large-navbar: 20px !default; | ||
|
|
||
| $font-size-h1: 52px !default; | ||
| $font-size-h2: 36px !default; | ||
| $font-size-h3: 28px !default; | ||
| $font-size-h4: 22px !default; | ||
| $font-size-h5: 18px !default; | ||
| $font-size-h6: 14px !default; | ||
| $font-paragraph: 16px !default; | ||
| $font-size-navbar: 16px !default; | ||
| $font-size-small: 12px !default; | ||
|
|
||
| $font-weight-light: 300 !default; | ||
| $font-weight-normal: 400 !default; | ||
| $font-weight-semi: 500 !default; | ||
| $font-weight-bold: 600 !default; | ||
|
|
||
| $line-height-general: 1.5 !default; | ||
| $line-height: 20px !default; | ||
| $line-height-lg: 54px !default; | ||
|
|
||
|
|
||
| $border-radius-top: 10px 10px 0 0 !default; | ||
| $border-radius-bottom: 0 0 10px 10px !default; | ||
|
|
||
| $dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); | ||
|
|
||
| $general-transition-time: 300ms !default; | ||
|
|
||
| $slow-transition-time: 370ms !default; | ||
| $dropdown-coordinates: 29px -50px !default; | ||
|
|
||
| $fast-transition-time: 150ms !default; | ||
| $select-coordinates: 50% -40px !default; | ||
|
|
||
| $transition-linear: linear !default; | ||
| $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; | ||
| $transition-ease: ease 0s; | ||
|
|
||
| $navbar-padding-a: 10px 15px; | ||
| $navbar-margin-a: 15px 3px; | ||
|
|
||
| $padding-social-a: 10px 5px; | ||
|
|
||
| $navbar-margin-a-btn: 15px 3px; | ||
| $navbar-margin-a-btn-round: 16px 3px; | ||
|
|
||
| $navbar-padding-a-icons: 6px 15px; | ||
| $navbar-margin-a-icons: 6px 3px; | ||
|
|
||
| $navbar-padding-brand: 20px 15px; | ||
| $navbar-margin-brand: 5px 0px; | ||
|
|
||
| $navbar-margin-brand-icons: 12px auto; | ||
|
|
||
| $navbar-margin-btn: 15px 3px; | ||
|
|
||
|
|
||
|
|
||
| $height-icon-sm: 32px; | ||
| $width-icon-sm: 32px; | ||
| $padding-icon-sm: 4px; | ||
| $border-radius-icon-sm: 7px; | ||
|
|
||
| $height-icon-message: 40px; | ||
| $width-icon-message: 40px; | ||
|
|
||
| $height-icon-message-sm: 20px; | ||
| $width-icon-message-sm: 20px; | ||
|
|
||
|
|
||
| $white-navbar: rgba(#FFFFFF, .96); | ||
| $blue-navbar: rgba(#34ACDC, .98); | ||
| $azure-navbar: rgba(#5BCAFF, .98); | ||
| $green-navbar: rgba(#4CD964, .98); | ||
| $orange-navbar: rgba(#FF9500, .98); | ||
| $red-navbar: rgba(#FF4C40, .98); | ||
|
|
||
|
|
||
|
|
||
| $topbar-x: topbar-x !default; | ||
| $topbar-back: topbar-back !default; | ||
| $bottombar-x: bottombar-x !default; | ||
| $bottombar-back: bottombar-back !default; | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
| @@ -0,0 +1,76 @@ | ||
| // Mixin for generating new styles | ||
| @mixin btn-styles($btn-color, $btn-states-color) { | ||
| border-color: $btn-color; | ||
| color: $btn-color; | ||
|
|
||
| &:hover, | ||
| &:focus, | ||
| &:active, | ||
| &.active, | ||
| &:active:focus, | ||
| &:active:hover, | ||
| &.active:focus, | ||
| &.active:hover, | ||
| .open > &.dropdown-toggle, | ||
| .open > &.dropdown-toggle:focus, | ||
| .open > &.dropdown-toggle:hover { | ||
| background-color: $transparent-bg; | ||
| color: $btn-states-color; | ||
| border-color: $btn-states-color; | ||
| } | ||
|
|
||
| &.disabled, | ||
| &:disabled, | ||
| &[disabled], | ||
| fieldset[disabled] & { | ||
| &, | ||
| &:hover, | ||
| &:focus, | ||
| &.focus, | ||
| &:active, | ||
| &.active { | ||
| background-color: $transparent-bg; | ||
| border-color: $btn-color; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| &.btn-fill { | ||
| color: $white-color; | ||
| background-color: $btn-color; | ||
| @include opacity(1); | ||
|
|
||
| &:hover, | ||
| &:focus, | ||
| &:active, | ||
| &.active, | ||
| .open > &.dropdown-toggle{ | ||
| background-color: $btn-states-color; | ||
| color: $white-color; | ||
| } | ||
|
|
||
| .caret{ | ||
| border-top-color: $white-color; | ||
| } | ||
| } | ||
|
|
||
| .caret{ | ||
| border-top-color: $btn-color; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ | ||
| font-size: $font-size; | ||
| border-radius: $border; | ||
| padding: $padding-vertical $padding-horizontal; | ||
|
|
||
| &.btn-round{ | ||
| padding: $padding-vertical + 1 $padding-horizontal; | ||
| } | ||
|
|
||
| &.btn-simple{ | ||
| padding: $padding-vertical + 2 $padding-horizontal; | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,17 @@ | ||
| @mixin input-size($padding-vertical, $padding-horizontal, $height){ | ||
| padding: $padding-vertical $padding-horizontal; | ||
| height: $height; | ||
| } | ||
|
|
||
| @mixin placeholder($color, $opacity){ | ||
| color: $color; | ||
| @include opacity(1); | ||
| } | ||
|
|
||
| @mixin light-form(){ | ||
| border-radius: 0; | ||
| border:0; | ||
| padding: 0; | ||
| background-color: transparent; | ||
|
|
||
| } |
| @@ -0,0 +1,21 @@ | ||
| @mixin label-style(){ | ||
| padding: $padding-label-vertical $padding-label-horizontal; | ||
| border: 1px solid $default-color; | ||
| border-radius: $border-radius-small; | ||
| color: $default-color; | ||
| font-weight: $font-weight-semi; | ||
| font-size: $font-size-small; | ||
| text-transform: uppercase; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| @mixin label-color($color){ | ||
| border-color: $color; | ||
| color: $color; | ||
| } | ||
| @mixin label-color-fill($color){ | ||
| border-color: $color; | ||
| color: $white-color; | ||
| background-color: $color; | ||
| } |
| @@ -0,0 +1,11 @@ | ||
| @mixin navbar-color($color){ | ||
| background-color: $color; | ||
| } | ||
|
|
||
| @mixin center-item(){ | ||
| left: 0; | ||
| right: 0; | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| position: absolute; | ||
| } |
| @@ -0,0 +1,4 @@ | ||
| @mixin pill-style($color){ | ||
| border: 1px solid $color; | ||
| color: $color; | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Opacity | ||
|
|
||
| @mixin opacity($opacity) { | ||
| opacity: $opacity; | ||
| // IE8 filter | ||
| $opacity-ie: ($opacity * 100); | ||
| filter: #{alpha(opacity=$opacity-ie)}; | ||
| } | ||
|
|
||
| @mixin black-filter($opacity){ | ||
| top: 0; | ||
| left: 0; | ||
| height: 100%; | ||
| width: 100%; | ||
| position: absolute; | ||
| background-color: rgba(17,17,17,$opacity); | ||
| display: block; | ||
| content: ""; | ||
| z-index: 1; | ||
| } |
