1130 lines
19 KiB
Plaintext
1130 lines
19 KiB
Plaintext
.page-body {
|
|
|
|
// Sidebar Menu
|
|
&.skin-aero {
|
|
// Aero
|
|
.xenon-sidebar-skin-variant(#558C89; #ECECEA; #FFF; #5f9a97; #558C89; #255e5b);
|
|
}
|
|
|
|
&.skin-navy {
|
|
// Navy
|
|
.xenon-sidebar-skin-variant(#2c3e50; #a7bfd6; #FFF; #34495e; #2c3e50; #ff4e50);
|
|
}
|
|
|
|
&.skin-facebook {
|
|
// Facebook
|
|
.xenon-sidebar-skin-variant(#3b5998; #8b9dc3; #FFF; #4160a0; #3b5998; #8b9dc3);
|
|
}
|
|
|
|
&.skin-turquoise {
|
|
// Turquoise
|
|
.xenon-sidebar-skin-variant(#16a085; #96ead9; #FFF; #1daf92; #16a085; #0f7e68);
|
|
}
|
|
|
|
&.skin-lime {
|
|
// Lime
|
|
.xenon-sidebar-skin-variant(#8cc657; #FFF; #FFF; #95cd62; #8cc657; #70a93c);
|
|
}
|
|
|
|
&.skin-green {
|
|
// Green
|
|
.xenon-sidebar-skin-variant(#27ae60; #a2f9c7; #FFF; #2fbd6b; #27ae60; #1c954f);
|
|
}
|
|
|
|
&.skin-purple {
|
|
// Purple
|
|
.xenon-sidebar-skin-variant(#795b95; #c2afd4; #FFF; #81629f; #795b95; #5f3d7e);
|
|
}
|
|
|
|
&.skin-white {
|
|
// White
|
|
.xenon-sidebar-skin-variant(#FFF; #666; #95cd62; #EEE; #95cd62; #555; #eee);
|
|
}
|
|
|
|
&.skin-concrete {
|
|
// Concrete
|
|
.xenon-sidebar-skin-variant(#a8aba2; #666; #a40f37; #b8bbb3; #a40f37; #323232);
|
|
}
|
|
|
|
&.skin-watermelon {
|
|
// Watermelon
|
|
.xenon-sidebar-skin-variant(#b63131; #f7b2b2; #FFF; #c03737; #b63131; #32932e);
|
|
}
|
|
|
|
&.skin-lemonade {
|
|
// Lemonade
|
|
.xenon-sidebar-skin-variant(#f5c150; #ffeec9; #FFF; #ffcf67; #f5c150; #d9a940);
|
|
}
|
|
|
|
|
|
|
|
// Horizontal Menu
|
|
&.horizontal-menu-skin-aero {
|
|
.xenon-horizontal-menu-skin-variant(#558C89; #ECECEA; #FFF; #5f9a97);
|
|
}
|
|
|
|
&.horizontal-menu-skin-navy {
|
|
.xenon-horizontal-menu-skin-variant(#2c3e50; #a7bfd6; #FFF; #34495e);
|
|
}
|
|
|
|
&.horizontal-menu-skin-facebook {
|
|
.xenon-horizontal-menu-skin-variant(#3b5998; #8b9dc3; #FFF; #4160a0);
|
|
}
|
|
|
|
&.horizontal-menu-skin-turquoise {
|
|
.xenon-horizontal-menu-skin-variant(#16a085; #96ead9; #FFF; #1daf92);
|
|
}
|
|
|
|
&.horizontal-menu-skin-lime {
|
|
.xenon-horizontal-menu-skin-variant(#8cc657; #FFF; #FFF; #95cd62);
|
|
}
|
|
|
|
&.horizontal-menu-skin-green {
|
|
.xenon-horizontal-menu-skin-variant(#27ae60; #a2f9c7; #FFF; #2fbd6b);
|
|
}
|
|
|
|
&.horizontal-menu-skin-purple {
|
|
.xenon-horizontal-menu-skin-variant(#795b95; #c2afd4; #FFF; #81629f);
|
|
}
|
|
|
|
&.horizontal-menu-skin-white {
|
|
.xenon-horizontal-menu-skin-variant(#FFF; #666; #95cd62; #EEE);
|
|
}
|
|
|
|
&.horizontal-menu-skin-concrete {
|
|
.xenon-horizontal-menu-skin-variant(#a8aba2; #666; #a40f37; #b8bbb3);
|
|
}
|
|
|
|
&.horizontal-menu-skin-watermelon {
|
|
.xenon-horizontal-menu-skin-variant(#b63131; #f7b2b2; #FFF; #c03737);
|
|
}
|
|
|
|
&.horizontal-menu-skin-lemonade {
|
|
.xenon-horizontal-menu-skin-variant(#f5c150; #ffeec9; #FFF; #ffcf67);
|
|
}
|
|
|
|
|
|
|
|
// User Info Navbar Menu
|
|
&.user-info-navbar-skin-aero {
|
|
.xenon-user-info-navbar-skin-variant(#558C89; #ECECEA; #FFF; #5f9a97);
|
|
}
|
|
|
|
&.user-info-navbar-skin-navy {
|
|
.xenon-user-info-navbar-skin-variant(#2c3e50; #a7bfd6; #FFF; #34495e);
|
|
}
|
|
|
|
&.user-info-navbar-skin-facebook {
|
|
.xenon-user-info-navbar-skin-variant(#3b5998; #8b9dc3; #FFF; #4160a0);
|
|
}
|
|
|
|
&.user-info-navbar-skin-turquoise {
|
|
.xenon-user-info-navbar-skin-variant(#16a085; #96ead9; #FFF; #1daf92);
|
|
}
|
|
|
|
&.user-info-navbar-skin-lime {
|
|
.xenon-user-info-navbar-skin-variant(#8cc657; #FFF; #FFF; #95cd62);
|
|
}
|
|
|
|
&.user-info-navbar-skin-green {
|
|
.xenon-user-info-navbar-skin-variant(#27ae60; #a2f9c7; #FFF; #2fbd6b);
|
|
}
|
|
|
|
&.user-info-navbar-skin-purple {
|
|
.xenon-user-info-navbar-skin-variant(#795b95; #c2afd4; #FFF; #81629f);
|
|
}
|
|
|
|
&.user-info-navbar-skin-white {
|
|
.xenon-user-info-navbar-skin-variant(#FFF; #666; #95cd62; #EEE);
|
|
}
|
|
|
|
&.user-info-navbar-skin-concrete {
|
|
.xenon-user-info-navbar-skin-variant(#a8aba2; #666; #a40f37; #b8bbb3);
|
|
}
|
|
|
|
&.user-info-navbar-skin-watermelon {
|
|
.xenon-user-info-navbar-skin-variant(#b63131; #f7b2b2; #FFF; #c03737);
|
|
}
|
|
|
|
&.user-info-navbar-skin-lemonade {
|
|
.xenon-user-info-navbar-skin-variant(#f5c150; #ffeec9; #FFF; #ffcf67);
|
|
}
|
|
}
|
|
|
|
|
|
// Sidebar Skin
|
|
.xenon-sidebar-skin-variant(@bg-color; @text-color; @text-active-color; @border-color; @primary; @secondary; @scroll-color: #fff) {
|
|
|
|
.btn-primary {
|
|
background: @primary;
|
|
|
|
&:hover {
|
|
background: darken(@primary,5%);
|
|
border-color: darken(@primary,5%);
|
|
}
|
|
|
|
&:active, &:focus {
|
|
background: darken(@primary,15%);
|
|
border-color: darken(@primary,15%);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
|
|
&.btn-secondary { .xenon-btn-style(@secondary, #FFF); }
|
|
|
|
}
|
|
|
|
.settings-pane {
|
|
background: @border-color;
|
|
color: @text-color;
|
|
|
|
> a[data-toggle="settings-pane"] {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
|
|
.user-info {
|
|
|
|
.user-details {
|
|
|
|
h3 {
|
|
a {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
.user-status {
|
|
}
|
|
}
|
|
|
|
.user-title {
|
|
color: fade(@text-active-color, 65%);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.links-block {
|
|
|
|
&.left-sep {
|
|
border-left: 1px solid @bg-color;
|
|
}
|
|
|
|
h4 {
|
|
color: @text-active-color;
|
|
|
|
span {
|
|
display: inline-block;
|
|
border-bottom: 1px solid @border-color;
|
|
}
|
|
|
|
a {
|
|
color: @text-active-color;
|
|
|
|
&:hover {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ul {
|
|
|
|
li {
|
|
|
|
a {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.sidebar-menu {
|
|
background: @bg-color;
|
|
|
|
.logo-env {
|
|
border-bottom: 1px solid @border-color;
|
|
|
|
.settings-icon {
|
|
a {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Main Menu
|
|
.main-menu {
|
|
// Links
|
|
a {
|
|
color: @text-color;
|
|
border-bottom: 1px solid @border-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
// Active
|
|
li.active > a {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
// With Subs
|
|
li.has-sub {
|
|
|
|
> a {
|
|
|
|
&:before {
|
|
color: lighten(@border-color, 25%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scrollbar
|
|
.ps-scrollbar-x-rail .ps-scrollbar-x,
|
|
.ps-scrollbar-y-rail .ps-scrollbar-y {
|
|
background-color: @scroll-color;
|
|
}
|
|
|
|
|
|
// Collapsed sidebar
|
|
@media screen and (min-width: @screen-sm) {
|
|
|
|
&.collapsed {
|
|
+ .main-content {
|
|
|
|
.user-info-navbar {
|
|
|
|
.user-info-menu {
|
|
|
|
a[data-toggle="sidebar"] {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-menu {
|
|
> li {
|
|
&.active, li.active {
|
|
background-color: darken(@bg-color, 3%);
|
|
}
|
|
|
|
> ul {
|
|
background: @bg-color;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-loading-overlay {
|
|
background-color: @bg-color;
|
|
}
|
|
|
|
&.login-page {
|
|
@main-border-color: lighten(#323435, 2%);
|
|
|
|
background: @bg-color;
|
|
color: #fff;
|
|
|
|
.login-form {
|
|
//background: lighten(@brand-primary, 1%);
|
|
|
|
&.fade-in-effect {
|
|
.form-group {
|
|
@fg-delay: 150ms;
|
|
|
|
}
|
|
}
|
|
|
|
.login-header {
|
|
|
|
.logo {
|
|
span {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
.control-label {
|
|
color: @text-color;
|
|
}
|
|
|
|
.form-control {
|
|
&.input-dark {
|
|
background: darken(@bg-color,5%);
|
|
border: 1px solid transparent;
|
|
color: @text-color;
|
|
.placeholder(@text-active-color);
|
|
}
|
|
|
|
&.error {
|
|
border-color: fade(@brand-danger, 50%);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
&.btn-dark {
|
|
border-color: @border-color;
|
|
background-color: @bg-color;
|
|
color: @text-active-color;
|
|
|
|
&:hover {
|
|
background-color: fade(@border-color, 30%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-footer {
|
|
margin-top: 45px;
|
|
|
|
a {
|
|
color: @text-active-color;
|
|
|
|
&:hover {
|
|
color: lighten(@text-color, 15%);
|
|
}
|
|
}
|
|
|
|
.info-links {
|
|
@color: fade(@text-color, 70%);
|
|
|
|
font-size: @font-size-small - 1;
|
|
margin-top: @base-padding/2;
|
|
color: @text-color;
|
|
|
|
a {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.external-login {
|
|
position: relative;
|
|
margin-bottom: @default-padding;
|
|
padding: 0 @default-padding;
|
|
|
|
a {
|
|
display: block;
|
|
color: #fff;
|
|
background: @brand-primary;
|
|
padding: @base-padding+3 @base-margin;
|
|
font-size: @font-size-base + 2;
|
|
margin-bottom: @base-padding;
|
|
|
|
i {
|
|
margin-right: @base-padding/2;
|
|
}
|
|
|
|
&:hover {
|
|
background: lighten(@brand-primary, 10%);
|
|
}
|
|
|
|
&.facebook {
|
|
@color: #3b5998;
|
|
|
|
background-color: @color;
|
|
|
|
&:hover {
|
|
background-color: darken(@color, 10%);
|
|
}
|
|
}
|
|
|
|
&.twitter {
|
|
@color: #55acee;
|
|
|
|
background-color: @color;
|
|
|
|
&:hover {
|
|
background-color: darken(@color, 10%);
|
|
}
|
|
}
|
|
|
|
&.gplus {
|
|
@color: #dd4b39;
|
|
|
|
background-color: @color;
|
|
|
|
&:hover {
|
|
background-color: darken(@color, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&.login-light {
|
|
background: @background-color;
|
|
|
|
.errors-container, .external-login {
|
|
padding: 0;
|
|
}
|
|
|
|
.form-group {
|
|
|
|
label.error {
|
|
color: fade(@main-text-color, 80%);
|
|
}
|
|
}
|
|
|
|
.login-form {
|
|
background: #fff;
|
|
color: @main-text-color;
|
|
|
|
.login-footer {
|
|
|
|
a {
|
|
color: @secondary-color;
|
|
|
|
&:hover {
|
|
color: darken(@secondary-color, 10%);
|
|
}
|
|
}
|
|
|
|
.info-links {
|
|
@color: fade(@main-text-color, 70%);
|
|
|
|
a {
|
|
color: @color;
|
|
|
|
&:hover {
|
|
color: @main-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-sm){
|
|
padding-top: 0;
|
|
|
|
.login-form,
|
|
.errors-container,
|
|
.external-login {
|
|
padding-left: @base-padding;
|
|
padding-right: @base-padding;
|
|
}
|
|
|
|
.errors-container {
|
|
margin-top: @base-margin;
|
|
}
|
|
|
|
&.login-light {
|
|
|
|
.login-form {
|
|
padding-left: @default-padding;
|
|
padding-right: @default-padding;
|
|
}
|
|
|
|
.errors-container,
|
|
.external-login {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.lockscreen-page {
|
|
background: @bg-color;
|
|
|
|
.lockcreen-form {
|
|
.form-group {
|
|
p {
|
|
color: @text-color;
|
|
}
|
|
|
|
h3 {
|
|
color: @text-color;
|
|
}
|
|
|
|
.input-group {
|
|
|
|
.form-control {
|
|
border: 1px solid @border-color;
|
|
.placeholder(fade(@text-active-color, 50%));
|
|
color: @text-active-color;
|
|
}
|
|
|
|
.input-group-btn {
|
|
|
|
.btn {
|
|
color: @text-active-color;
|
|
border: 1px solid @border-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: fade(@border-color, 30%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.settings-pane-open {
|
|
|
|
.sidebar-menu {
|
|
|
|
.sidebar-menu-inner {
|
|
|
|
.logo-env {
|
|
|
|
.settings-icon {
|
|
background: @border-color;
|
|
.box-shadow(~"0px 0px 0px 10px @{border-color}, 0px -10px 0px 10px @{border-color}, 0px -20px 0px 10px @{border-color}, 0px -30px 0px 10px @{border-color}");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Horizontal Menu
|
|
.xenon-horizontal-menu-skin-variant(@bg-color; @text-color; @text-active-color; @border-color) {
|
|
|
|
.navbar {
|
|
|
|
&.horizontal-menu {
|
|
background: @bg-color;
|
|
.box-shadow(none);
|
|
|
|
|
|
.navbar-inner {
|
|
.navbar-brand {
|
|
.settings-pane-open & a[data-toggle="settings-pane"] {
|
|
|
|
i {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
a {
|
|
&[data-toggle="settings-pane"] {
|
|
i {
|
|
color: @text-color;
|
|
}
|
|
|
|
&:hover {
|
|
|
|
i {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm){
|
|
|
|
.navbar-nav {
|
|
&.click-to-expand {
|
|
|
|
.has-sub {
|
|
|
|
&:hover > a:before {
|
|
.rotate(0deg);
|
|
}
|
|
|
|
&.expanded > a:before {
|
|
.rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: @text-color;
|
|
}
|
|
|
|
li:hover > a,
|
|
li.active > a {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
> li {
|
|
border: 0px;
|
|
|
|
&.active,
|
|
&:hover {
|
|
border-color: transparent;
|
|
background-color: @border-color;
|
|
}
|
|
|
|
&.active {
|
|
|
|
+ li:hover {
|
|
border-left-color: transparent;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
border: none;
|
|
.box-shadow(~"0 2px 8px rgba(0,1,1,.05)");
|
|
}
|
|
}
|
|
|
|
|
|
// First Level
|
|
ul {
|
|
background: @border-color;
|
|
|
|
> li {
|
|
|
|
> a {
|
|
color: @text-color;
|
|
|
|
&:after {
|
|
background: lighten(@border-color,5%);
|
|
}
|
|
}
|
|
|
|
&.active > a {
|
|
color: @text-active-color;
|
|
background: @bg-color;
|
|
}
|
|
|
|
&.has-sub {
|
|
|
|
> a {
|
|
|
|
&:before {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background: lighten(@border-color,5%);
|
|
border-top: 1px solid lighten(@border-color,8%);
|
|
border-bottom: 1px solid lighten(@border-color,8%);
|
|
|
|
ul {
|
|
@bg: lighten(@border-color, 2%);
|
|
@border: lighten(@border-color, 4%);
|
|
|
|
background: @bg;
|
|
border-top-color: @border;
|
|
border-bottom-color: @border;
|
|
|
|
a:after {
|
|
background-color: @border;
|
|
}
|
|
|
|
ul {
|
|
@bg: lighten(@border-color, 4%);
|
|
@border: lighten(@border-color, 4%);
|
|
|
|
background: @bg;
|
|
border-top-color: @border;
|
|
border-bottom-color: @border;
|
|
|
|
a:after {
|
|
background-color: @border;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
> .nav {
|
|
|
|
> li {
|
|
|
|
&:hover {
|
|
background: @border-color;
|
|
}
|
|
|
|
i {
|
|
color: @text-color;
|
|
}
|
|
|
|
> a {
|
|
border: 0px;
|
|
|
|
&:hover {
|
|
background: @border-color;
|
|
color: @text-active-color;
|
|
|
|
i {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
&.notification-icon {
|
|
|
|
&:before {
|
|
background: @secondary-color;
|
|
}
|
|
|
|
&:focus {
|
|
background: @border-color;
|
|
}
|
|
|
|
&.notification-icon-messages {
|
|
|
|
&:before {
|
|
background-color: @xe-purple;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-toggle="chat"] {
|
|
i {
|
|
|
|
.chat-open & {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.open > a.notification-icon {
|
|
//background: @horizontal-menu-link-active-bg-color;
|
|
background-color: @border-color;
|
|
border-color: lighten(@border-color,5%);
|
|
color: @text-color;
|
|
|
|
i {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
&:before {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
border-color: @border-color;
|
|
}
|
|
|
|
// User Profile
|
|
&.user-profile {
|
|
&:extend(.user-info-navbar .user-info-menu > li.user-profile all);
|
|
|
|
> a {
|
|
&:focus {
|
|
background-color: @border-color;
|
|
}
|
|
|
|
span {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.open > a {
|
|
background-color: @border-color;
|
|
border-color: @border-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-loading-overlay {
|
|
background-color: @bg-color;
|
|
}
|
|
|
|
// Mobile
|
|
@media screen and (max-width: @screen-sm) {
|
|
.navbar {
|
|
&.horizontal-menu {
|
|
background: @bg-color;
|
|
color: @text-color;
|
|
|
|
.navbar-inner {
|
|
> .navbar-nav {
|
|
a {
|
|
color: @text-color;
|
|
border-color: @border-color;
|
|
|
|
&:hover, &:active, &:focus {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
> .nav {
|
|
&.navbar-mobile {
|
|
a {
|
|
color: @text-color;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// User Info Navbar Skins
|
|
.xenon-user-info-navbar-skin-variant(@bg-color; @text-color; @text-active-color; @border-color) {
|
|
|
|
// User Info Navbar
|
|
.user-info-navbar {
|
|
background-color: @bg-color;
|
|
|
|
.user-info-menu {
|
|
|
|
// Root level
|
|
> li {
|
|
border: 0px solid transparent;
|
|
|
|
|
|
|
|
&.hover-line {
|
|
|
|
&:before {
|
|
background: @text-color;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
color: @text-color;
|
|
border-bottom: 1px solid transparent;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
> form {
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
// Search field
|
|
&.search-form {
|
|
|
|
.btn {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
|
|
.search-field {
|
|
border: 1px solid @border-color;
|
|
background: lighten(@background-color, 2%);
|
|
.placeholder(@main-text-color);
|
|
|
|
&:focus {
|
|
+ .btn {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Toggled dropdown
|
|
&.open {
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
z-index: 15;
|
|
|
|
> a {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
// Dropdowns
|
|
.dropdown-menu {
|
|
background: @border-color;
|
|
border: 1px solid transparent;
|
|
|
|
.dropdown-menu-list {
|
|
|
|
li {
|
|
a {
|
|
color: @text-color;;
|
|
|
|
&:after {
|
|
background: lighten(@border-color,5%);
|
|
}
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
|
|
a {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .top {
|
|
|
|
a {
|
|
color: @text-color;
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: @text-color;
|
|
border-bottom: 1px solid lighten(@border-color,5%);
|
|
}
|
|
}
|
|
|
|
> .external {
|
|
|
|
&:after {
|
|
background-color: lighten(@border-color,5%);
|
|
}
|
|
|
|
a {
|
|
color: @text-color;
|
|
background-color: lighten(@border-color,5%);
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.messages {
|
|
.dropdown-menu-list li {
|
|
|
|
&:after {
|
|
background-color: lighten(@border-color,5%);
|
|
}
|
|
|
|
&.active:after {
|
|
background-color: @brand-success;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.notifications {
|
|
|
|
.dropdown-menu-list {
|
|
max-height: @userinfo-notifications-dropdown-height;
|
|
|
|
> li {
|
|
|
|
> a {
|
|
|
|
> i {
|
|
background: @border-color;
|
|
color: #FFF;
|
|
}
|
|
|
|
.line {
|
|
padding-left: 45px;
|
|
}
|
|
}
|
|
|
|
|
|
&.notification-secondary > a > i {
|
|
background-color: #FFF;
|
|
color: #444;
|
|
.box-shadow(0 0 0 1px #eee);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.user-profile-menu {
|
|
|
|
li {
|
|
|
|
a {
|
|
color: @text-color;
|
|
border-bottom: 1px solid lighten(@border-color,5%);
|
|
|
|
&:hover {
|
|
color: @text-active-color;
|
|
}
|
|
|
|
}
|
|
|
|
&.last {
|
|
background: lighten(@border-color,5%);
|
|
|
|
&:after {
|
|
background: lighten(@border-color,5%);
|
|
}
|
|
|
|
> a {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |