1201 lines
27 KiB
SCSS
1201 lines
27 KiB
SCSS
//
|
|
// Mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin transform($deg) {
|
|
-moz-transform: rotate($deg);
|
|
-o-transform: rotate($deg);
|
|
-webkit-transform: rotate($deg);
|
|
-ms-transform: rotate($deg);
|
|
transform: rotate($deg);
|
|
}
|
|
|
|
|
|
// Disable user selection
|
|
//
|
|
@mixin user-select-none() {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@include input-size(".input-lg", $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
|
|
@include input-size(".input-sm", $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
|
|
|
|
|
|
// Gradient
|
|
//
|
|
@mixin pixel-gradient($fallback: #888, $start: #000, $end: #fff, $start-percent: 0%, $end-percent: 100%) {
|
|
background: $fallback;
|
|
background-image: -webkit-linear-gradient(top, $start $start-percent, $end $end-percent); // Safari 5.1-6, Chrome 10+
|
|
background-image: linear-gradient(to bottom, $start $start-percent, $end $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
@mixin pixel-gradient-forced($fallback: #888, $start: #000, $end: #fff, $start-percent: 0%, $end-percent: 100%) {
|
|
background: $fallback !important;
|
|
background-image: -webkit-linear-gradient(top, $start $start-percent, $end $end-percent) !important; // Safari 5.1-6, Chrome 10+
|
|
background-image: linear-gradient(to bottom, $start $start-percent, $end $end-percent) !important; // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
|
|
// IE background: none fix
|
|
//
|
|
@mixin ie-no-gradient {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
}
|
|
|
|
|
|
// IE background: none fix
|
|
//
|
|
@mixin ie-background-none() {
|
|
background: url('#{$images-path}/pixel-admin/blank.png')\9;
|
|
}
|
|
|
|
|
|
// --------------------------------------------------
|
|
// User Interface
|
|
// --------------------------------------------------
|
|
|
|
// Navbar icon button
|
|
//
|
|
@mixin nav-icon-btn-state($color) {
|
|
.label {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
// Badge mixin
|
|
//
|
|
@mixin pixel-badge($color) {
|
|
background: $color;
|
|
border: 1px solid $color;
|
|
|
|
// Add hover effects, but only for links
|
|
&[href] {
|
|
&:hover,
|
|
&:focus {
|
|
background-color: darken($color, 10%);
|
|
border-color: darken($color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Label mixin
|
|
//
|
|
@mixin pixel-label($color) {
|
|
background: $color;
|
|
|
|
// Add hover effects, but only for links
|
|
&[href] {
|
|
&:hover,
|
|
&:focus {
|
|
background-color: darken($color, 10%);
|
|
}
|
|
}
|
|
|
|
&.label-tag {
|
|
border: 1px solid $color;
|
|
|
|
&:before{
|
|
border-color: transparent $color transparent transparent;
|
|
}
|
|
|
|
&[href] {
|
|
&:hover,
|
|
&:focus {
|
|
border-color: darken($color, 10%);
|
|
}
|
|
|
|
&:hover:before,
|
|
&:focus:before {
|
|
border-color: transparent darken($color, 10%) transparent transparent;
|
|
}
|
|
}
|
|
|
|
// Right-to-left direction
|
|
//
|
|
|
|
.right-to-left &:before{
|
|
border-color: transparent transparent transparent $color;
|
|
}
|
|
|
|
.right-to-left &[href]:hover:before,
|
|
.right-to-left &[href]:focus:before {
|
|
border-color: transparent transparent transparent darken($color, 10%);
|
|
}
|
|
|
|
.ie8 .right-to-left &:before,
|
|
.ie9 .right-to-left &:before{
|
|
border-color: transparent $color transparent transparent;
|
|
}
|
|
|
|
.ie8 .right-to-left &[href]:hover:before,
|
|
.ie8 .right-to-left &[href]:focus:before,
|
|
.ie9 .right-to-left &[href]:hover:before,
|
|
.ie9 .right-to-left &[href]:focus:before {
|
|
border-color: transparent darken($color, 10%) transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button mixin
|
|
//
|
|
@mixin pixel-button($color, $gradient: 6%, $hover: 3%, $border: 0%, $font-color: #fff, $gradient-offset: 2%) {
|
|
color: $font-color;
|
|
|
|
&,
|
|
&:focus {
|
|
border-color: darken($color, 5% + $border);
|
|
border-bottom-color: darken($color, 11% + $border);
|
|
@include pixel-gradient(
|
|
$fallback: $color,
|
|
$start: lighten($color, floor($gradient/2.0%) - $gradient-offset),
|
|
$end: darken($color, floor($gradient/2.0%) + $gradient-offset)
|
|
);
|
|
}
|
|
|
|
&:hover {
|
|
color: $font-color;
|
|
border-color: darken($color, 8% + $border);
|
|
border-bottom-color: darken($color, 18% + $border);
|
|
@include pixel-gradient-forced(
|
|
$fallback: darken($color, $hover + $gradient-offset),
|
|
$start: darken(lighten($color, floor($gradient/2.0%) - $gradient-offset), $hover),
|
|
$end: darken(darken($color, floor($gradient/2.0%) + $gradient-offset), $hover)
|
|
);
|
|
}
|
|
|
|
&:active,
|
|
&.active,
|
|
.open &.dropdown-toggle {
|
|
background: none;
|
|
background: darken($color, $gradient/2.0% + 1%) !important;
|
|
border-color: darken($color, 14% + $border);
|
|
border-bottom-color: darken($color, 14% + $border) !important;
|
|
color: $font-color;
|
|
@include box-shadow(0 0 12px rgba(0, 0, 0, .1) inset);
|
|
}
|
|
|
|
&.btn-flat {
|
|
background: darken($color, 3%);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&.active,
|
|
.open &.dropdown-toggle {
|
|
background: darken($color, 3%) !important;
|
|
color: $font-color;
|
|
}
|
|
}
|
|
|
|
&.btn-outline,
|
|
&.btn-outline.btn-flat {
|
|
&:hover {
|
|
color: $font-color;
|
|
border-color: darken($color, 8% + $border);
|
|
border-bottom-color: darken($color, 18% + $border);
|
|
}
|
|
|
|
&:active {
|
|
border-color: darken($color, 14% + $border);
|
|
}
|
|
}
|
|
|
|
// Button groups & Input groups
|
|
//
|
|
.btn-group &,
|
|
.btn-group &:focus,
|
|
.input-group-btn &,
|
|
.input-group-btn &:focus {
|
|
border-left-color: darken($color, 8% + $border);
|
|
border-right-color: darken($color, 8% + $border);
|
|
}
|
|
.btn-group &:hover,
|
|
.btn-group.open &.dropdown-toggle,
|
|
.input-group-btn &:hover,
|
|
.input-group-btn.open &.dropdown-toggle {
|
|
border-color: darken($color, 8% + $border);
|
|
border-bottom-color: darken($color, 18% + $border);
|
|
}
|
|
.btn-group &:active,
|
|
.btn-group &.active,
|
|
.input-group-btn &:active,
|
|
.input-group-btn &.active {
|
|
border-left-color: darken($color, 14% + $border);
|
|
border-right-color: darken($color, 14% + $border);
|
|
}
|
|
}
|
|
|
|
// Progress bar mixin
|
|
//
|
|
@mixin pixel-progress-bar($color) {
|
|
background: $color;
|
|
border-color: darken($color, 6%);
|
|
}
|
|
|
|
// Striped progress bar mixin
|
|
//
|
|
@mixin pixel-progress-striped($color) {
|
|
background-color: darken($color,0%);
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.1)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.1)), color-stop(.75, rgba(255,255,255,.1)), color-stop(.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.1) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.1) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.1) 75%, transparent 75%, transparent);
|
|
background-size: 10px 10px;
|
|
}
|
|
|
|
|
|
// Alert mixin
|
|
//
|
|
@mixin pixel-alert($color, $font-color, $border-color) {
|
|
background: $color;
|
|
border-color: $border-color;
|
|
color: $font-color;
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
// Dark alert mixin
|
|
//
|
|
@mixin pixel-alert-dark($color, $stripes-opacity: .06) {
|
|
background: none;
|
|
border-color: darken($color, 10%);
|
|
background-color: $color;
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,$stripes-opacity)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,$stripes-opacity)), color-stop(.75, rgba(255,255,255,$stripes-opacity)), color-stop(.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,$stripes-opacity) 25%, transparent 25%, transparent 50%, rgba(255,255,255,$stripes-opacity) 50%, rgba(255,255,255,$stripes-opacity) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(255,255,255,$stripes-opacity) 25%, transparent 25%, transparent 50%, rgba(255,255,255,$stripes-opacity) 50%, rgba(255,255,255,$stripes-opacity) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(255,255,255,$stripes-opacity) 25%, transparent 25%, transparent 50%, rgba(255,255,255,$stripes-opacity) 50%, rgba(255,255,255,$stripes-opacity) 75%, transparent 75%, transparent);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
// Tabs color mixin
|
|
//
|
|
@mixin pixel-tabs($color) {
|
|
// Tabs
|
|
& > li.active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background: $color;
|
|
border-bottom: 2px solid darken($color, 5%);
|
|
}
|
|
}
|
|
.nav-tabs.nav-justified > .active > a {
|
|
border-bottom-color: darken($color, 5%);
|
|
}
|
|
}
|
|
|
|
// Pills color mixin
|
|
//
|
|
@mixin pixel-pills($color) {
|
|
// Pills
|
|
> li.active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dropdowns color mixin
|
|
//
|
|
@mixin pixel-dropdowns($color, $hover-text-color: $text-color) {
|
|
> li > a:hover,
|
|
> li.active > a {
|
|
background: $color;
|
|
}
|
|
|
|
> li > a:hover {
|
|
color: $hover-text-color;
|
|
}
|
|
}
|
|
|
|
// Table color mixin
|
|
//
|
|
@mixin table-color($color, $text: #fff) {
|
|
table {
|
|
border-top-color: darken(desaturate($color, 15%), 12%) !important;
|
|
}
|
|
|
|
thead,
|
|
thead tr,
|
|
thead th,
|
|
.table-header {
|
|
border-color: darken(desaturate($color, 15%), 12%) !important;
|
|
color: $text;
|
|
}
|
|
|
|
thead tr,
|
|
thead th {
|
|
background: darken(desaturate($color, 8%), 6%);
|
|
}
|
|
|
|
.table-header {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
// Form state mixin
|
|
//
|
|
@mixin pixel-form-state-base($color, $font-color, $border-color, $input-border-color: darken($border-color, 17%)) {
|
|
.control-label {
|
|
color: $text-color;
|
|
}
|
|
|
|
.help-block {
|
|
background: $color;
|
|
border-color: $border-color;
|
|
color: $font-color;
|
|
background-size: 20px 20px;
|
|
|
|
&:before {
|
|
border-bottom-color: darken($border-color, 10%);
|
|
}
|
|
|
|
&:after{
|
|
border-bottom-color: lighten($color, 1%);
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
border-color: $input-border-color;
|
|
@include box-shadow(none);
|
|
&:focus,
|
|
&.focus {
|
|
border-color: darken($input-border-color, 10%) !important;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
.input-group-addon {
|
|
color: $font-color;
|
|
border-color: $border-color;
|
|
background-color: $color;
|
|
}
|
|
|
|
.form-control-feedback {
|
|
color: darken($input-border-color, 10%);
|
|
}
|
|
}
|
|
|
|
// Light form state mixin
|
|
//
|
|
@mixin pixel-form-state-light($color, $font-color, $border-color) {
|
|
@include pixel-form-state-base($color, $font-color, $border-color);
|
|
}
|
|
|
|
@mixin pixel-form-state-simple($color) {
|
|
.help-block {
|
|
color: $color !important;
|
|
}
|
|
}
|
|
|
|
|
|
// Dark form state mixin
|
|
//
|
|
@mixin pixel-form-state-dark($color, $input-border-color, $stripes-opacity: .06) {
|
|
@include pixel-form-state-base($color, $font-color: #fff, $border-color: darken($color, 10%), $input-border-color: $color);
|
|
.help-block {
|
|
background: $color;
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,$stripes-opacity)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,$stripes-opacity)), color-stop(.75, rgba(255,255,255,$stripes-opacity)), color-stop(.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,$stripes-opacity) 25%, transparent 25%, transparent 50%, rgba(255,255,255,$stripes-opacity) 50%, rgba(255,255,255,$stripes-opacity) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient(45deg, rgba(255,255,255,$stripes-opacity) 25%, transparent 25%, transparent 50%, rgba(255,255,255,$stripes-opacity) 50%, rgba(255,255,255,$stripes-opacity) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient(45deg, rgba(255,255,255,$stripes-opacity) 25%, transparent 25%, transparent 50%, rgba(255,255,255,$stripes-opacity) 50%, rgba(255,255,255,$stripes-opacity) 75%, transparent 75%, transparent);
|
|
background-size: 20px 20px;
|
|
}
|
|
}
|
|
|
|
|
|
// Default panel mixin
|
|
//
|
|
@mixin pixel-panel($color, $font-color, $border-color) {
|
|
border-color: $border-color !important;
|
|
.panel-heading {
|
|
background: $color;
|
|
border-color: $border-color;
|
|
color: $font-color;
|
|
background-size: 20px 20px;
|
|
|
|
.panel-title {
|
|
color: $font-color;
|
|
}
|
|
|
|
.panel-heading-text {
|
|
a {
|
|
color: $font-color;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: lighten($font-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.panel-body-colorful {
|
|
.panel-body {
|
|
background: $color;
|
|
color: $font-color;
|
|
}
|
|
|
|
.panel-footer {
|
|
background: $color;
|
|
border-color: $border-color;
|
|
color: $font-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Dark panel mixin
|
|
//
|
|
@mixin pixel-panel-dark($color) {
|
|
border-color: $color !important;
|
|
|
|
.panel-heading {
|
|
background: $color;
|
|
border-color: $color;
|
|
color: #fff;
|
|
|
|
.panel-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.panel-heading-text {
|
|
color: lighten($color, 38%);
|
|
|
|
a {
|
|
color: lighten($color, 38%);
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-heading-controls {
|
|
li.active a,
|
|
li.active span {
|
|
color: $color !important;
|
|
}
|
|
}
|
|
|
|
&.panel-body-colorful {
|
|
.panel-heading,
|
|
table,
|
|
table tr,
|
|
table th,
|
|
table td,
|
|
.list-group-item {
|
|
border-color: lighten($color, 8%);
|
|
}
|
|
|
|
&,
|
|
.panel-body,
|
|
.list-group-item {
|
|
background: $color;
|
|
color: #fff;
|
|
}
|
|
|
|
.panel-footer {
|
|
background: $color;
|
|
border-color: lighten($color, 8%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Popover states mixin
|
|
//
|
|
@mixin pixel-popover-state($color, $font-color, $border-color) {
|
|
& + .popover .popover-title {
|
|
background: $color;
|
|
border-bottom-color: $border-color;
|
|
color: $font-color;
|
|
}
|
|
|
|
&.popover-colorful + .popover {
|
|
background: $color;
|
|
border-color: $border-color;
|
|
color: $font-color;
|
|
|
|
&.top .arrow:after { border-top-color: $border-color; }
|
|
&.bottom .arrow:after { border-bottom-color: $border-color; }
|
|
&.left .arrow:after { border-left-color: $border-color; }
|
|
&.right .arrow:after { border-right-color: $border-color; }
|
|
}
|
|
}
|
|
|
|
|
|
// Dark popover states mixin
|
|
//
|
|
@mixin pixel-popover-state-dark($color) {
|
|
& + .popover .popover-title {
|
|
background: $color;
|
|
border-bottom-color: $color;
|
|
color: #fff;
|
|
}
|
|
|
|
&.popover-colorful + .popover {
|
|
background: $color;
|
|
border-color: $color;
|
|
color: #fff;
|
|
|
|
.popover-title {
|
|
border-bottom-color: lighten($color, 8%);
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
&.top .arrow:after { border-top-color: $color; }
|
|
&.bottom .arrow:after { border-bottom-color: $color; }
|
|
&.left .arrow:after { border-left-color: $color; }
|
|
&.right .arrow:after { border-right-color: $color; }
|
|
}
|
|
}
|
|
|
|
|
|
// Tooltip states mixin
|
|
//
|
|
@mixin pixel-tooltip-state($color){
|
|
.tooltip-inner {
|
|
background-color: $color;
|
|
}
|
|
|
|
&.top .tooltip-arrow {
|
|
border-top-color: $color;
|
|
}
|
|
&.top-left .tooltip-arrow {
|
|
border-top-color: $color;
|
|
}
|
|
&.top-right .tooltip-arrow {
|
|
border-top-color: $color;
|
|
}
|
|
&.right .tooltip-arrow {
|
|
border-right-color: $color;
|
|
}
|
|
&.left .tooltip-arrow {
|
|
border-left-color: $color;
|
|
}
|
|
&.bottom .tooltip-arrow {
|
|
border-bottom-color: $color;
|
|
}
|
|
&.bottom-left .tooltip-arrow {
|
|
border-bottom-color: $color;
|
|
}
|
|
&.bottom-right .tooltip-arrow {
|
|
border-bottom-color: $color;
|
|
}
|
|
}
|
|
|
|
|
|
// Note states mixin
|
|
//
|
|
@mixin pixel-note-mixin($color, $bg-color) {
|
|
border-color: $color;
|
|
background: $bg-color;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
|
|
// Panel groups mixin
|
|
//
|
|
|
|
@mixin pixel-panel-group($color, $font-color: #fff) {
|
|
.accordion-toggle {
|
|
background: $color;
|
|
color: $font-color;
|
|
}
|
|
|
|
.accordion-toggle:after,
|
|
.accordion-toggle:hover:after,
|
|
.accordion-toggle.collapsed:hover:after {
|
|
color: $font-color;
|
|
}
|
|
|
|
.panel,
|
|
.panel-heading,
|
|
.panel-body,
|
|
&.panel-group .panel-heading + .panel-collapse .panel-body {
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
|
|
// Text color mixin
|
|
//
|
|
|
|
@mixin pixel-text-color($color) {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
a,
|
|
a:focus {
|
|
color: $color;
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
color: darken($color, 15%);
|
|
}
|
|
}
|
|
|
|
|
|
// BG color mixin
|
|
//
|
|
|
|
@mixin pixel-bg-color($color, $text-color: #fff) {
|
|
background: $color !important;
|
|
|
|
&[href]:hover {
|
|
background: desaturate(darken($color, 3%), 6%) !important;
|
|
}
|
|
|
|
&.darken {
|
|
background: desaturate(darken($color, 3%), 6%) !important;
|
|
|
|
&[href]:hover {
|
|
background: desaturate(darken($color, 6%), 6%) !important;
|
|
}
|
|
}
|
|
&.darker {
|
|
background: desaturate(darken($color, 6%), 6%) !important;
|
|
|
|
&[href]:hover {
|
|
background: desaturate(darken($color, 9%), 6%) !important;
|
|
}
|
|
}
|
|
@include pixel-text-color($text-color);
|
|
|
|
&[href]:hover,
|
|
[href]:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
* {
|
|
border-color: lighten($color, 7%);
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// Themes
|
|
// --------------------------------------------------
|
|
|
|
// Navigation icon buttons theme
|
|
//
|
|
@mixin nav-icon-btn-theme($color) {
|
|
.nav-icon-btn.nav-icon-btn-primary {
|
|
|
|
@include nav-icon-btn-state($color);
|
|
}
|
|
}
|
|
|
|
// Badges theme
|
|
//
|
|
@mixin badges-theme($color) {
|
|
// Primary badges
|
|
.badge.badge-primary {
|
|
@include pixel-badge($color);
|
|
}
|
|
}
|
|
|
|
// Labels theme
|
|
//
|
|
@mixin labels-theme($color) {
|
|
// Primary labels
|
|
.label.label-primary {
|
|
@include pixel-label($color);
|
|
}
|
|
|
|
&.right-to-left .label.label-primary.label-tag {
|
|
&:before{
|
|
border-color: transparent transparent transparent $color;
|
|
}
|
|
|
|
&:hover:before,
|
|
&:focus:before {
|
|
border-color: transparent transparent transparent darken($color, 10%);
|
|
}
|
|
}
|
|
|
|
.ie8 &.right-to-left .label.label-primary.label-tag:before,
|
|
.ie9 &.right-to-left .label.label-primary.label-tag:before {
|
|
border-color: transparent $color transparent transparent;
|
|
}
|
|
|
|
.ie8 &.right-to-left .label.label-primary.label-tag:hover:before,
|
|
.ie8 &.right-to-left .label.label-primary.label-tag:focus:before,
|
|
.ie9 &.right-to-left .label.label-primary.label-tag:hover:before,
|
|
.ie9 &.right-to-left .label.label-primary.label-tag:focus:before {
|
|
border-color: transparent darken($color, 10%) transparent transparent;
|
|
}
|
|
}
|
|
|
|
// Buttons theme
|
|
//
|
|
@mixin buttons-theme($color) {
|
|
.btn-primary {
|
|
@include pixel-button($color);
|
|
}
|
|
|
|
.open .btn.btn-primary.dropdown-toggle {
|
|
color: #fff;
|
|
border-bottom-color: darken($color, 14%) !important;
|
|
background: none;
|
|
background: darken($color, 4%) !important;
|
|
}
|
|
}
|
|
|
|
// Progress bars theme
|
|
//
|
|
@mixin progress-bars-theme($color) {
|
|
// Default progress bars
|
|
.progress-bar {
|
|
@include pixel-progress-bar($color);
|
|
}
|
|
.progress-striped .progress-bar {
|
|
@include pixel-progress-striped($color);
|
|
}
|
|
}
|
|
|
|
// Badges theme
|
|
//
|
|
@mixin badges-theme($color) {
|
|
// Primary badges
|
|
.badge.badge-primary {
|
|
@include pixel-badge($color);
|
|
}
|
|
}
|
|
|
|
// Tables theme
|
|
//
|
|
@mixin tables-theme($color) {
|
|
.table-primary {
|
|
@include table-color($color);
|
|
}
|
|
}
|
|
|
|
// Tabs theme
|
|
//
|
|
@mixin tabs-theme($color) {
|
|
.nav-tabs {
|
|
@include pixel-tabs($color);
|
|
}
|
|
}
|
|
|
|
// Pills theme
|
|
//
|
|
@mixin pills-theme($color) {
|
|
.nav-pills {
|
|
@include pixel-pills($color);
|
|
}
|
|
}
|
|
|
|
// Dropdowns theme
|
|
//
|
|
@mixin dropdowns-theme($color, $hover-text-color: $text-color) {
|
|
.dropdown-menu {
|
|
@include pixel-dropdowns($color, $hover-text-color);
|
|
}
|
|
}
|
|
|
|
// Button groups theme
|
|
//
|
|
@mixin button-groups-theme($color) {
|
|
.btn-group .btn-primary,
|
|
.btn-group .btn-primary:focus,
|
|
.input-group-btn .btn-primary,
|
|
.input-group-btn .btn-primary:focus {
|
|
border-left-color: darken($color, 8%);
|
|
border-right-color: darken($color, 8%);
|
|
}
|
|
.btn-group .btn-primary:hover,
|
|
.btn-group.open .btn-primary.dropdown-toggle,
|
|
.input-group-btn .btn-primary:hover,
|
|
.input-group-btn.open .btn-primary.dropdown-toggle {
|
|
border-color: darken($color, 14%);
|
|
}
|
|
.btn-group .btn-primary:active,
|
|
.btn-group .btn-primary.active,
|
|
.input-group-btn .btn-primary:active,
|
|
.input-group-btn .btn-primary.active {
|
|
border-left-color: darken($color, 14%);
|
|
border-right-color: darken($color, 14%);
|
|
}
|
|
}
|
|
|
|
// Pagination theme
|
|
//
|
|
@mixin pagination-theme($color) {
|
|
.pagination {
|
|
> li > a:hover {
|
|
border-color: $color;
|
|
}
|
|
|
|
> li.active > a,
|
|
> li.active > a:hover,
|
|
> li.active > a:focus,
|
|
> li.active > span {
|
|
background: $color;
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
// Pager
|
|
.pager {
|
|
li > a:hover {
|
|
border-color: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// List groups theme
|
|
//
|
|
@mixin list-groups-theme($color) {
|
|
// Linked list groups
|
|
a.list-group-item.active {
|
|
background: $color;
|
|
border-color: $color;
|
|
|
|
.list-group-item-text {
|
|
color: lighten($color, 40%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Forms theme
|
|
//
|
|
@mixin forms-theme($color) {
|
|
// Forms
|
|
.form-control:focus,
|
|
.form-control.focus {
|
|
border-color: $color;
|
|
outline: 0;
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
// Styled form elements
|
|
.gt-ie8 & input.px:focus + .lbl:before,
|
|
.gt-ie8 & input.px + .lbl:hover:before {
|
|
border-color: $color;
|
|
}
|
|
|
|
.gt-ie8 & input[type="checkbox"].px + .lbl:after {
|
|
color: $color;
|
|
}
|
|
|
|
.gt-ie8 & input[type="radio"].px + .lbl:after {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Mixins for plugins **//
|
|
|
|
|
|
// jQuery UI
|
|
//
|
|
|
|
// Sliders
|
|
@mixin ui-slider-theme($color) {
|
|
@include ui-slider-color($color);
|
|
}
|
|
|
|
@mixin ui-slider-color($color) {
|
|
.ui-slider-handle.ui-state-active:before {
|
|
background: $color;
|
|
}
|
|
|
|
.ui-slider-range {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
// Autocomplete
|
|
@mixin ui-autocomplete-theme($color, $hover-text-color: $text-color) {
|
|
// Dropdowns
|
|
.ui-autocomplete > li > a:hover,
|
|
.ui-autocompletev > li.active > a {
|
|
background: $color;
|
|
}
|
|
|
|
.ui-autocomplete > li > a:hover {
|
|
color: $hover-text-color;
|
|
}
|
|
|
|
.ui-autocomplete .ui-state-focus {
|
|
background: $color;
|
|
color: $hover-text-color;
|
|
}
|
|
}
|
|
|
|
// Menus
|
|
@mixin ui-menu-theme($color) {
|
|
.ui-menu .ui-menu-item a:hover,
|
|
.ui-menu .ui-menu-item a.ui-state-focus,
|
|
.ui-menu .ui-menu-item a.ui-state-active {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
// Progress bars
|
|
@mixin ui-progressbar-color($color) {
|
|
border-color: darken($color, 6%);
|
|
@include pixel-progress-striped($color);
|
|
}
|
|
@mixin ui-progressbar-theme($color) {
|
|
.ui-progressbar-value {
|
|
@include ui-progressbar-color($color);
|
|
}
|
|
}
|
|
|
|
// Tabs
|
|
@mixin ui-tabs-theme($color) {
|
|
.ui-tabs-nav > .ui-tabs-active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: #fff;
|
|
background: $color;
|
|
border-bottom: 2px solid darken($color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Datepicker
|
|
@mixin ui-datepicker-theme($color) {
|
|
.ui-datepicker .ui-state-active {
|
|
background: $color !important;
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
background: $color;
|
|
}
|
|
|
|
.ui-datepicker th {
|
|
background: darken(desaturate($color, 20%), 5%);
|
|
}
|
|
|
|
.ui-datepicker-buttonpane button.ui-priority-primary {
|
|
@include pixel-button($color);
|
|
}
|
|
}
|
|
|
|
|
|
// Plugins
|
|
//
|
|
|
|
// Select2
|
|
@mixin select2-color($color) {
|
|
.select2-container-multi .select2-choices {
|
|
.select2-search-choice {
|
|
background: $color;
|
|
}
|
|
|
|
.select2-search-choice-focus {
|
|
background: darken($color, 10%);
|
|
}
|
|
}
|
|
|
|
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
|
background: $color !important;
|
|
}
|
|
|
|
}
|
|
@mixin select2-theme($color) {
|
|
.select2-drop-active,
|
|
.select2-container-multi.select2-container-active .select2-choices,
|
|
.select2-container-multi.select2-dropdown-open .select2-choices {
|
|
border: 1px solid $color;
|
|
}
|
|
|
|
.select2-drop.select2-drop-above.select2-drop-active {
|
|
border-top: 1px solid $color;
|
|
}
|
|
|
|
.select2-container-active {
|
|
.select2-choice,
|
|
.select2-choices {
|
|
border: 1px solid $color;
|
|
}
|
|
}
|
|
|
|
.select2-dropdown-open .select2-drop-above {
|
|
.select2-choice,
|
|
.select2-choices {
|
|
border: 1px solid $color;
|
|
border-top-color: #aaa;
|
|
}
|
|
}
|
|
|
|
.select2-results .select2-highlighted {
|
|
background: $color;
|
|
}
|
|
|
|
.select2-primary {
|
|
@include select2-color($color);
|
|
}
|
|
}
|
|
|
|
// Switchers
|
|
@mixin switcher-color($color) {
|
|
.switcher-state-on {
|
|
background: $color !important;
|
|
}
|
|
}
|
|
@mixin switcher-theme($color) {
|
|
.switcher-primary {
|
|
@include switcher-color($color);
|
|
}
|
|
}
|
|
|
|
// Bootstrap Datepicker
|
|
@mixin bootstrap-datepicker-theme($color) {
|
|
$bs-datepicker-border-color: darken(desaturate($color, 30%), 12%);
|
|
|
|
.datepicker {
|
|
table tr td {
|
|
&.selected,
|
|
&.selected:hover,
|
|
&.selected.disabled,
|
|
&.selected.disabled:hover {
|
|
background: $color;
|
|
}
|
|
&.active,
|
|
&.active:hover,
|
|
&.active.disabled,
|
|
&.active.disabled:hover {
|
|
background: $color;
|
|
}
|
|
span {
|
|
&.active,
|
|
&.active:hover,
|
|
&.active.disabled,
|
|
&.active.disabled:hover {
|
|
background: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
background: darken(desaturate($color, 20%), 5%);
|
|
&:first-child {
|
|
background: $color !important;
|
|
border-bottom-color: $bs-datepicker-border-color !important;
|
|
}
|
|
}
|
|
|
|
th.prev,
|
|
th.next {
|
|
background: $color;
|
|
}
|
|
th.prev {
|
|
border-color: $bs-datepicker-border-color;
|
|
}
|
|
th.next {
|
|
border-color: $bs-datepicker-border-color;
|
|
}
|
|
}
|
|
|
|
> .datepicker-days thead tr:first-child th.cw + .prev {
|
|
border-color: $bs-datepicker-border-color;
|
|
}
|
|
> .datepicker-days thead tr:last-child th.cw + th {
|
|
border-color: $bs-datepicker-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bootstrap Timepicker
|
|
@mixin bootstrap-timepicker-theme($color) {
|
|
.bootstrap-timepicker-widget table td a:hover {
|
|
background: $color;
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
// Bootstrap Datepaginator
|
|
@mixin datepaginator-theme($color) {
|
|
.pagination a.dp-today,
|
|
.pagination a.dp-today:hover {
|
|
background: lighten($color, 10%);
|
|
border-color: lighten($color, 5%);
|
|
}
|
|
|
|
.pagination a.dp-today:hover {
|
|
border-color: $color !important;
|
|
}
|
|
|
|
.pagination a.dp-selected {
|
|
background: $color !important;
|
|
border-color: $color !important;
|
|
}
|
|
}
|
|
|
|
// Bootstrap-Editable typeahead
|
|
@mixin editable-typeahead-theme($color) {
|
|
.tt-suggestion.tt-is-under-cursor {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
// jQuery DataTables
|
|
@mixin DT-color($color) {
|
|
.dataTables_wrapper .DT-per-page {
|
|
border-color: darken(desaturate($color, 15%), 12%) !important;
|
|
}
|
|
}
|
|
@mixin data-table-theme($color) {
|
|
.table-primary {
|
|
@include DT-color($color);
|
|
}
|
|
}
|
|
|
|
// File Inputs
|
|
@mixin pixel-file-input-theme($color) {
|
|
.pixel-file-input:hover {
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
// File Inputs
|
|
@mixin dropzone-theme($color) {
|
|
.dropzone-box.dz-drag-hover {
|
|
border-color: $color;
|
|
}
|
|
.dropzone-box:hover .fa.fa-cloud-upload {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
// Markdown Editor
|
|
@mixin md-editor-theme($color) {
|
|
.md-editor.active {
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
// Rating Widget
|
|
@mixin widget-rating-theme($color) {
|
|
.widget-rating .active a {
|
|
color: $color;
|
|
}
|
|
}
|