Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
less.awe.mixins.less Maven / Gradle / Ivy
//
// Mixins
// --------------------------------------------------
.awe-theme-color(@theme-color) {
.background {
background-color: @theme-color;
}
.foreground {
color: @theme-color;
}
}
.awe-menu-color(@menu-color) {
.background {
background-color: @menu-color;
}
.foreground {
color: @menu-color;
}
}
.border-radius(@size) {
border-radius: @size;
}
.no-transition {
transition: none !important;
}
.transition (@elem, @type, @time) {
transition: @elem @type @time;
}
.transition-multiple (@elm1, @type1, @time1, @elm2, @type2, @time2) {
transition: @elm1 @type1 @time1, @elm2 @type2 @time2;
}
// Flex
.display-flex {
display: flex;
}
.flex(@attrs) {
flex: @attrs;
}
// Flex direction
.flex-direction(@attrs) {
flex-direction: @attrs;
}
// Flex order
.flex-order(@attrs) {
order: @attrs;
}
// Flex align self
.flex-align-self(@attrs) {
align-self: @attrs;
}
// Flex justify
.flex-justify(@attrs) {
justify-content: @attrs;
}
// Flex basis
.flex-basis(@attrs) {
flex-basis: @attrs;
}
// Forms themes
//
.awe-forms-theme(@color) {
input.cbox:after {
color: @color;
}
}
// Dark themes navigation colors
.navigation-submenus(@menu-color, @type) when (@type=dark) {
.mm-dropdown > ul {
background-color: @menu-color;
.mm-dropdown > ul {
background-color: lighten(@menu-color, 5%);
.navigation-colors(lighten(@menu-color, 5%), @type);
.mm-dropdown > ul {
background-color: lighten(@menu-color, 10%);
.navigation-colors(lighten(@menu-color, 10%), @type);
.mm-dropdown > ul {
background-color: lighten(@menu-color, 15%);
.navigation-colors(lighten(@menu-color, 15%), @type);
}
}
}
}
}
.navigation-divider(@menu-color, @type) when (@type=dark) {
ul.navigation {
& > li.divider {
border-color: lighten(@menu-color, 40%);
}
}
}
.navigation-colors(@menu-color, @type) when (@type=dark) {
li {
& > a {
color: lighten(@menu-color, 35%) !important;
&:hover {
color: lighten(@menu-color, 60%) !important;
background-color: lighten(@menu-color, 8%) !important;
}
}
&.active > a {
background-color: fadeout(darken(@menu-color, 10%), 20%) !important;
color: lighten(@menu-color, 45%) !important;
&:hover {
background-color: darken(@menu-color, 15%) !important;
color: lighten(@menu-color, 70%) !important;
}
}
}
li.divider {
border-top: 1px solid !important;
border-color: lighten(@menu-color, 40%) !important;
margin-right: 15px;
margin-left: 15px;
}
}
// Light themes navigation colors
.navigation-submenus(@menu-color, @type) when (@type=light) {
.mm-dropdown > ul {
background-color: @menu-color;
.mm-dropdown > ul {
background-color: darken(@menu-color, 5%);
.navigation-colors(darken(@menu-color, 5%), @type);
.mm-dropdown > ul {
background-color: darken(@menu-color, 10%);
.navigation-colors(darken(@menu-color, 10%), @type);
.mm-dropdown > ul {
background-color: darken(@menu-color, 15%);
.navigation-colors(darken(@menu-color, 15%), @type);
}
}
}
}
}
.navigation-divider(@menu-color, @type) when (@type=light) {
ul.navigation {
& > li.divider {
border-color: darken(@menu-color, 40%);
}
}
}
.navigation-colors(@menu-color, @type) when (@type=light) {
li {
a {
color: darken(@menu-color, 35%) !important;
&:hover {
color: darken(@menu-color, 60%) !important;
background-color: darken(@menu-color, 8%) !important;
}
}
&.active > a {
background-color: fadeout(darken(@menu-color, 10%), 20%) !important;
color: darken(@menu-color, 45%) !important;
&:hover {
background-color: lighten(@menu-color, 15%) !important;
color: darken(@menu-color, 70%) !important;
}
}
}
li.divider {
border-top: 1px solid !important;
border-color: darken(@menu-color, 40%) !important;
margin-right: 15px;
margin-left: 15px;
}
}
// Main menu theme
.awe-main-menu(@menu-color,@type: dark) {
#main-menu {
ul {
background-color: @menu-color;
}
.navigation-submenus(@menu-color, @type);
&.horizontal .awe-menu > ul > li > ul {
.box-shadow(2px 2px 5px rgba(100, 100, 100, 0.5));
}
.navigation-divider(@menu-color, @type);
.navigation-colors(@menu-color, @type);
}
}
// Awe grid theme
.awe-grid(@theme-color, @primary-color) {
.grid, .treegrid {
.ui-jqgrid, .tree-grid {
.table {
border-top-color: darken(desaturate(@theme-color, 15%), 12%) !important;
tbody {
tr.ui-state-hover td,
tr:hover td {
background-color: lighten(@theme-color, 30%);
}
tr.ui-state-highlight td,
tr.active td {
background-color: lighten(@theme-color, 35%);
}
}
}
.ui-sortable-placeholder {
background-color: lighten(@theme-color, 25%);
}
// Form colors
.awe-forms-theme(@primary-color);
}
.row-number {
background-color: lighten(desaturate(@theme-color, 8%), 40%);
}
.multioperation-icon, .ui-grid-rownumber {
background-color: lighten(desaturate(@theme-color, 8%), 40%);
color: darken(desaturate(@theme-color, 8%), 20%);
}
.ui-grid-row-selected .ui-grid-cell-contents,
.save-button {
background-color: lighten(@theme-color, 40%);
}
.ui-grid-row-hover .ui-grid-cell-contents {
background-color: lighten(@theme-color, 35%);
}
}
}
// Change password page
.awe-change-password-page(@primary-color) {
&.page-change_password .change_password-header {
background: @primary-color;
background: fadeout(@primary-color, 20%);
}
}
// Change loading bar color
.awe-loading-bar(@color) {
#loading-bar {
.bar {
background: @color;
}
.peg {
.box-shadow(@color 1px 0 6px 1px);
}
}
#loading-bar-spinner .spinner-icon {
border-top-color: @color;
border-left-color: @color;
}
}
.awe-breadcrumbs(@type) when (@type=dark) {
.breadcrumb.breadcrumb-page {
background-color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, .1);
.box-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
.breadcrumb-label {
color: rgba(0, 0, 0, 0.5);
}
> li {
color: rgba(0, 0, 0, 0.5);
+ li:before {
color: rgba(0, 0, 0, 0.5);
}
}
> li.active {
color: rgba(0, 0, 0, 0.8);
}
> li:hover {
color: rgba(0, 0, 0, 0.8);
}
> li.active:hover {
color: rgba(0, 0, 0, 1);
}
}
}
.awe-breadcrumbs(@type) when (@type=light) {
.breadcrumb.breadcrumb-page {
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.box-shadow(0 1px 0 rgba(255, 255, 255, .5));
.breadcrumb-label {
color: rgba(0, 0, 0, 0.5);
}
> li {
color: rgba(0, 0, 0, 0.5);
+ li:before {
color: rgba(0, 0, 0, 0.5);
}
}
> li.active {
color: rgba(0, 0, 0, 0.8);
}
> li:hover {
color: rgba(0, 0, 0, 0.8);
}
> li.active:hover {
color: rgba(0, 0, 0, 1);
}
}
}
// Buttons theme
//
.awe-buttons(@default, @primary, @font-color: @text-color) {
.btn-awe {
.pixel-button(@color: lighten(@default, 35%), @gradient: 5%, @hover: 2%, @border: 4%, @font-color: @font-color);
}
.btn-awe.btn-primary {
.pixel-button(@primary);
}
.btn-awe.btn-danger {
.pixel-button(@danger-color);
}
.btn-awe.btn-warning {
.pixel-button(@warning-color);
}
.btn-awe.btn-success {
.pixel-button(@success-color);
}
}
.awe-navbar(@navbar-start-color, @navbar-end-color, @navbar-text-color, @navbar-text-shadow, @menu-color, @menu-active-color) {
.gt-ie9 & #main-navbar,
.gt-ie9 & #main-navbar .navbar-header {
#gradient > .vertical(@navbar-start-color, @navbar-end-color);
}
// Use image for bg on IE 8-9
.ie8 & #main-navbar,
.ie9 & #main-navbar,
.ie8 & #main-navbar .navbar-header,
.ie9 & #main-navbar .navbar-header {
background: @navbar-start-color;
}
// Main navbar
//
#main-navbar {
// Header
//
.dropdown > a,
.dropdown-menu > li > a,
.navbar-nav.nav > li > a,
.navbar-header a {
color: @navbar-text-color;
}
.navbar-toggle,
#main-menu-toggle,
#main-menu-toggle .fa:before,
a {
text-shadow: @navbar-text-shadow;
}
// Navbar buttona
//
.navbar-toggle,
#main-menu-toggle {
color: @navbar-text-color;
}
#main-menu-toggle .fa:before {
color: @navbar-text-color;
}
// Navbar collapse
//
#main-navbar-collapse {
border-top-color: darken(@navbar-end-color, 6%);
background: @navbar-end-color;
}
// Navbar Items
//
.navbar-nav li + .navbar-nav li,
.navbar-nav.nav + .navbar-nav.nav,
.navbar-nav.nav + .navbar-nav .right {
border-top: 1px solid lighten(@navbar-end-color, 8%);
}
.dropdown.open > a {
border-top: 1px solid darken(@navbar-end-color, 12%);
border-bottom: 1px solid darken(@navbar-end-color, 9%);
margin-top: -1px;
background: darken(@navbar-end-color, 6%);
}
// Navbar forms
//
form.navbar-form {
.box-shadow(none);
.form-control {
background: #fff;
border-color: #fff;
border-radius: 3px;
}
}
}
// Desktops
//
@media (min-width: @screen-tablet) {
#main-navbar {
// Navbar collapse
//
#main-navbar-collapse {
background: none;
}
// Navbar Items
//
// Reset borders
.navbar-nav li + .navbar-nav li,
.navbar-nav.nav + .navbar-nav.nav,
.navbar-nav.nav + .navbar-nav .right {
border: none;
}
.navbar-nav.nav > li > a {
border-left: 0px solid transparent;
border-right: 0px solid transparent;
&:hover {
background: rgba(0, 0, 0, .08);
border-color: darken(@navbar-end-color, 10%);
}
}
// Dropdowns
//
.dropdown.open > a {
border-top: none;
border-bottom: none;
margin-top: 0;
background: rgba(0, 0, 0, .08);
border-color: darken(@navbar-end-color, 10%);
}
.dropdown-menu {
background: @menu-color;
border-color: @menu-color;
margin-top: 2px;
padding: 5px 0;
border-radius: @border-radius-base;
a {
text-shadow: none;
margin: 0 -2px;
}
a:hover {
background: @menu-active-color;
}
.divider {
background-color: lighten(@menu-color, 4%);
margin-left: -2px;
margin-right: -2px;
}
}
// Notifications widget
//
.widget-notifications {
a:hover {
color: #fff !important;
}
.notification,
.notifications-link {
border-color: lighten(@menu-color, 4%);
margin: 0 -2px;
.border-bottom-radius(@border-radius-base);
}
.notification-description {
color: lighten(@menu-color, 35%);
}
.notification-ago {
color: lighten(@menu-color, 25%);
}
}
// Alt messages widget
//
.widget-messages-alt {
a:hover {
color: #fff !important;
}
.message,
.messages-link {
border-color: lighten(@menu-color, 4%);
.border-bottom-radius(3px);
a:hover {
background: none;
}
}
.message-subject {
color: @menu-active-color;
}
.message-description {
color: lighten(@menu-color, 25%);
a {
color: lighten(@menu-color, 35%);
}
}
}
}
}
#main-navbar #main-menu-toggle,
&.right-to-left.main-menu-right #main-navbar #main-menu-toggle {
border-left: none;
border-right: 1px solid darken(@navbar-end-color, 8%);
}
&.right-to-left #main-navbar #main-menu-toggle,
&.main-menu-right #main-navbar #main-menu-toggle {
border-left: 1px solid darken(@navbar-end-color, 8%);
border-right: none;
}
}
