first commit
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates and combines all of the AdminForm color skins.
|
||||
* To minimize file size, we recommended using only one or two skins.
|
||||
* However, we have provided this file as it proves useful for demonstrating
|
||||
* all of skins or for enabling true multi-skin support.
|
||||
*/
|
||||
|
||||
|
||||
// Primary Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-primary; @brand-primary-light; @brand-primary-lighter; @brand-primary-dark; @brand-primary-darker; primary);
|
||||
.admin-form.theme-primary { .skin-form-variant(@brand-primary-dark; @brand-primary-light; @brand-primary); }
|
||||
|
||||
// Info Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-info; @brand-info-light; @brand-info-lighter; @brand-info-dark; @brand-info-darker; info);
|
||||
.admin-form.theme-info { .skin-form-variant(@brand-info-dark; @brand-info-light; @brand-info); }
|
||||
|
||||
// Success Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-success; @brand-success-light; @brand-success-lighter; @brand-success-dark; @brand-success-darker; success);
|
||||
.admin-form.theme-success { .skin-form-variant(@brand-success-dark; @brand-success-light; @brand-success); }
|
||||
|
||||
// Warning Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-warning; @brand-warning-light; @brand-warning-lighter; @brand-warning-dark; @brand-warning-darker; warning);
|
||||
.admin-form.theme-warning { .skin-form-variant(@brand-warning-dark; @brand-warning-light; @brand-warning); }
|
||||
|
||||
// Danger Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-danger; @brand-danger-light; @brand-danger-lighter; @brand-danger-dark; @brand-danger-darker; danger);
|
||||
.admin-form.theme-danger { .skin-form-variant(@brand-danger-dark; @brand-danger-light; @brand-danger); }
|
||||
|
||||
// Alert Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-alert; @brand-alert-light; @brand-alert-lighter; @brand-alert-dark; @brand-alert-darker; alert);
|
||||
.admin-form.theme-alert { .skin-form-variant(@brand-alert-dark; @brand-alert-light; @brand-alert); }
|
||||
|
||||
// System Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-system; @brand-system-light; @brand-system-lighter; @brand-system-dark; @brand-system-darker; system);
|
||||
.admin-form.theme-system { .skin-form-variant(@brand-system-dark; @brand-system-light; @brand-system); }
|
||||
|
||||
// Dark Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-dark; @brand-dark-light; @brand-dark-lighter; @brand-dark-dark; @brand-dark-darker; dark);
|
||||
.admin-form.theme-dark {.skin-form-variant(@brand-dark-dark; @brand-dark-light; @brand-dark);}
|
||||
@@ -0,0 +1,106 @@
|
||||
//////////////////////////
|
||||
// Bootstrap Color Set //
|
||||
/////////////////////////
|
||||
@transparent: transparent;
|
||||
@white: #ffffff;
|
||||
|
||||
@brand-default: #999;
|
||||
|
||||
// Primary
|
||||
@brand-primary: #4a89dc;
|
||||
@brand-primary-light: #5d9cec;
|
||||
@brand-primary-lighter: #83aee7;
|
||||
@brand-primary-dark: #2e76d6;
|
||||
@brand-primary-darker: #2567bd;
|
||||
|
||||
// Success
|
||||
@brand-success: #70ca63;
|
||||
@brand-success-light: #87d37c;
|
||||
@brand-success-lighter: #9edc95;
|
||||
@brand-success-dark: #58c249;
|
||||
@brand-success-darker: #49ae3b;
|
||||
|
||||
// Info
|
||||
@brand-info: #3bafda;
|
||||
@brand-info-light: #4fc1e9;
|
||||
@brand-info-lighter: #74c6e5;
|
||||
@brand-info-dark: #27a0cc;
|
||||
@brand-info-darker: #2189b0;
|
||||
|
||||
// Warning
|
||||
@brand-warning: #f6bb42;
|
||||
@brand-warning-light: #ffce54;
|
||||
@brand-warning-lighter: #f9d283;
|
||||
@brand-warning-dark: #f4af22;
|
||||
@brand-warning-darker: #d9950a;
|
||||
|
||||
// Danger
|
||||
@brand-danger: #e9573f;
|
||||
@brand-danger-light: #fc6e51;
|
||||
@brand-danger-lighter: #f08c7c;
|
||||
@brand-danger-dark: #e63c21;
|
||||
@brand-danger-darker: #cd3117;
|
||||
|
||||
// Alert
|
||||
@brand-alert: #967adc;
|
||||
@brand-alert-light: #ac92ec;
|
||||
@brand-alert-lighter: #c0b0ea;
|
||||
@brand-alert-dark: #815fd5;
|
||||
@brand-alert-darker: #6c44ce;
|
||||
|
||||
// System
|
||||
@brand-system: #37bc9b;
|
||||
@brand-system-light: #48cfad;
|
||||
@brand-system-lighter: #65d2b7;
|
||||
@brand-system-dark: #2fa285;
|
||||
@brand-system-darker: #288770;
|
||||
|
||||
// Light
|
||||
@brand-light: #f3f6f7;
|
||||
@brand-light-light: #fdfefe;
|
||||
@brand-light-lighter: #ffffff;
|
||||
@brand-light-dark: #e9eef0;
|
||||
@brand-light-darker: #dfe6e9;
|
||||
|
||||
// Dark
|
||||
@brand-dark: #3b3f4f;
|
||||
@brand-dark-light: #424759;
|
||||
@brand-dark-lighter: #51566c;
|
||||
@brand-dark-dark: #2c2f3c;
|
||||
@brand-dark-darker: #1e2028;
|
||||
|
||||
// Black
|
||||
@brand-black: #283946;
|
||||
@brand-black-light: #2e4251;
|
||||
@brand-black-lighter: #354a5b;
|
||||
@brand-black-dark: #1c2730;
|
||||
@brand-black-darker: #0f161b;
|
||||
|
||||
|
||||
// Additional Default Colors used to
|
||||
// create Bootstrap themed Gradients
|
||||
@default-alt-color: #f0f0f0;
|
||||
@primary-alt-color: #0088cc;
|
||||
@success-alt-color: #44ab00;
|
||||
@info-alt-color: #14abd8;
|
||||
@warning-alt-color: #f28900;
|
||||
@danger-alt-color: #d3332e;
|
||||
@alert-alt-color: #5d3ab5;
|
||||
|
||||
|
||||
// Used for gradient creation
|
||||
@dark-alt-color: #555555;
|
||||
@dark2-alt-color: #444444;
|
||||
@dark3-alt-color: #333333;
|
||||
@dark4-alt-color: #2c2c2c;
|
||||
@dark5-alt-color: #151416;
|
||||
|
||||
|
||||
////////////////////////////////
|
||||
// Custom Element Colors Set //
|
||||
///////////////////////////////
|
||||
@facebook-color: #6395cf;
|
||||
@twitter-color: #4fbdc8;
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
|
||||
.skin-form-variant(@dark; @light; @brand) {
|
||||
|
||||
// Dividers
|
||||
.section-divider span { color:@brand; }
|
||||
|
||||
// Links
|
||||
.tagline span{ color:@brand; }
|
||||
.theme-link{ color:@brand; }
|
||||
|
||||
// Shared :hover
|
||||
.gui-input:hover,
|
||||
.gui-textarea:hover,
|
||||
.select > select:hover,
|
||||
.select-multiple select:hover,
|
||||
.gui-input:hover ~ .input-footer,
|
||||
.file .gui-file:hover + .gui-input,
|
||||
.gui-textarea:hover ~ .input-footer{ border-color: @light; }
|
||||
|
||||
// Shared :focus
|
||||
.gui-input:focus,
|
||||
.gui-textarea:focus,
|
||||
.select > select:focus,
|
||||
.select-multiple select:focus{
|
||||
border-color: @light;
|
||||
color: #3C3C3C;
|
||||
}
|
||||
|
||||
// Focus
|
||||
.gui-textarea:focus{ height: 120px; }
|
||||
.select > select:focus { z-index:10; z-index:20\9; }
|
||||
.gui-input:focus ~ .field-icon i,
|
||||
.gui-textarea:focus ~ .field-icon i{ color:@brand; }
|
||||
.select-multiple select:focus,
|
||||
.gui-input:focus ~ .input-footer,
|
||||
.gui-textarea:focus ~ .input-footer,
|
||||
.file .gui-file:focus + .gui-input{ border-color: @light; }
|
||||
.select > select:focus + .arrow{ color:@brand; }
|
||||
|
||||
// Rating Stars
|
||||
.rating:hover .rating-star:hover,
|
||||
.rating:hover .rating-star:hover ~ .rating-star,
|
||||
.rating-input:checked ~ .rating-star { color: @brand; }
|
||||
.rating-star,
|
||||
.rating:hover .rating-star { color: #A2A6A8; }
|
||||
|
||||
// Datepicker
|
||||
.ui-datepicker .ui-datepicker-prev,
|
||||
.ui-datepicker .ui-datepicker-next,
|
||||
.ui-datepicker .ui-datepicker-title { color:@brand; }
|
||||
.ui-datepicker-today a,
|
||||
.ui-datepicker-today a:hover,
|
||||
.ui-datepicker .ui-state-highlight { background: lighten(@brand, 20%) !important; }
|
||||
|
||||
.ui-datepicker .ui-state-active { background: @brand!important; }
|
||||
|
||||
// Timepicker sliders
|
||||
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle.ui-state-active { background: #FFF !important; }
|
||||
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle { border-color: @brand;}
|
||||
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:before { background-color: @brand; }
|
||||
|
||||
// Form Wizard
|
||||
.wizard .steps li a,
|
||||
.wizard .actions li a { background-color: @brand; }
|
||||
.wizard .steps li.current a { background-color: @dark; }
|
||||
}
|
||||
|
||||
.skin-element-variant(@base; @light; @lighter; @dark; @darker; @brand) {
|
||||
|
||||
// Panel Contextuals
|
||||
.admin-form .panel-@{brand} > .panel-heading { border-top-color: @light; }
|
||||
.admin-form .panel-@{brand} > .panel-heading:before { background-color: @base; }
|
||||
|
||||
.admin-form .panel-@{brand}.heading-border:before,
|
||||
.admin-form .panel-@{brand} .heading-border:before { background-color: @base; }
|
||||
|
||||
// BG's
|
||||
.admin-form .bg-@{brand} { background-color: @base; }
|
||||
.admin-form .bg-@{brand}.light { background-color: @light; }
|
||||
.admin-form .bg-@{brand}.lighter { background-color: @lighter; }
|
||||
.admin-form .bg-@{brand}.dark { background-color: @dark; }
|
||||
.admin-form .bg-@{brand}.darker { background-color: @darker; }
|
||||
|
||||
// Checkbox/Radios
|
||||
.admin-form .option-@{brand} input:hover + .checkbox,
|
||||
.admin-form .option-@{brand} input:hover + .radio{ border-color: @light; }
|
||||
.admin-form .option-@{brand} input:checked + .checkbox,
|
||||
.admin-form .option-@{brand} input:focus + .checkbox,
|
||||
.admin-form .option-@{brand} input:checked + .radio,
|
||||
.admin-form .option-@{brand} input:focus + .radio{ border-color: @base; }
|
||||
.admin-form .option-@{brand} input:checked + .radio:before,
|
||||
.admin-form .option-@{brand} input:focus + .radio:before{ background: @base; }
|
||||
.admin-form .option-@{brand} input:checked + .checkbox:before,
|
||||
.admin-form .option-@{brand} input:focus + .checkbox:before{ border-color: @base; }
|
||||
|
||||
// Form Switch
|
||||
.admin-form .switch-@{brand} > input:checked + label { background: @base; border-color: @base; }
|
||||
.admin-form .switch-@{brand} > input:checked + label:after { color:@base; }
|
||||
.admin-form .switch-@{brand} > input:checked:focus + label { background: @dark; border-color: @dark; }
|
||||
|
||||
// Buttons
|
||||
.admin-form .btn-@{brand}{background-color: @base;}
|
||||
.admin-form .btn-@{brand}:hover,
|
||||
.admin-form .btn-@{brand}:focus{ background-color: @light; border-color: @light; }
|
||||
.admin-form .btn-@{brand}:active{background-color: @dark;}
|
||||
.admin-form .btn-@{brand},
|
||||
.admin-form .btn-@{brand}:hover,
|
||||
.admin-form .btn-@{brand}:focus,
|
||||
.admin-form .btn-@{brand}:active{ color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.08);}
|
||||
|
||||
// UI Sliders
|
||||
.admin-form .slider-wrapper.slider-@{brand} {
|
||||
.ui-slider .ui-slider-range {
|
||||
background-color: @base;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
border-color: @base;
|
||||
&:before {
|
||||
background-color: @base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-alert" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// Alert Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-alert; @brand-alert-light; @brand-alert-lighter; @brand-alert-dark; @brand-alert-darker; alert);
|
||||
.admin-form.theme-alert { .skin-form-variant(@brand-alert-dark; @brand-alert-light; @brand-alert); }
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-danger" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// Danger Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-danger; @brand-danger-light; @brand-danger-lighter; @brand-danger-dark; @brand-danger-darker; danger);
|
||||
.admin-form.theme-danger { .skin-form-variant(@brand-danger-dark; @brand-danger-light; @brand-danger); }
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-dark" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// Dark Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-dark; @brand-dark-light; @brand-dark-lighter; @brand-dark-dark; @brand-dark-darker; dark);
|
||||
.admin-form.theme-dark {.skin-form-variant(@brand-dark-dark; @brand-dark-light; @brand-dark);}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-info" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// Info Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-info; @brand-info-light; @brand-info-lighter; @brand-info-dark; @brand-info-darker; info);
|
||||
.admin-form.theme-info { .skin-form-variant(@brand-info-dark; @brand-info-light; @brand-info); }
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-primary" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// Primary Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-primary; @brand-primary-light; @brand-primary-lighter; @brand-primary-dark; @brand-primary-darker; primary);
|
||||
.admin-form.theme-primary { .skin-form-variant(@brand-primary-dark; @brand-primary-light; @brand-primary); }
|
||||
@@ -0,0 +1,14 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-success" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// Success Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-success; @brand-success-light; @brand-success-lighter; @brand-success-dark; @brand-success-darker; success);
|
||||
.admin-form.theme-success { .skin-form-variant(@brand-success-dark; @brand-success-light; @brand-success); }
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-system" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
|
||||
// System Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-system; @brand-system-light; @brand-system-lighter; @brand-system-dark; @brand-system-darker; system);
|
||||
.admin-form.theme-system { .skin-form-variant(@brand-system-dark; @brand-system-light; @brand-system); }
|
||||
@@ -0,0 +1,12 @@
|
||||
@import "colors.less";
|
||||
@import "mixins/admin-skins.less";
|
||||
|
||||
/* This file creates the AdminForm "theme-warning" skin.
|
||||
* The success color is applied to every form element and widget
|
||||
* via the styles generated by the admin-skins.less mixin
|
||||
*/
|
||||
|
||||
// Warning Skin
|
||||
// --------------------------------------------------
|
||||
.skin-element-variant(@brand-warning; @brand-warning-light; @brand-warning-lighter; @brand-warning-dark; @brand-warning-darker; warning);
|
||||
.admin-form.theme-warning { .skin-form-variant(@brand-warning-dark; @brand-warning-light; @brand-warning); }
|
||||
Reference in New Issue
Block a user