copy dari repo om Irfan
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
body {
|
||||
// BUTTON
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Button Basic */
|
||||
.btn:focus,
|
||||
.btn:active:focus,
|
||||
.btn.active:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// SOCIAL BUTTONS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Buttons - Social */
|
||||
.btn-facebook,
|
||||
.btn-twitter,
|
||||
.btn-gplus {
|
||||
&,
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #FFF;
|
||||
font-weight: 300;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
&,
|
||||
&:focus {
|
||||
background: #3B5998;
|
||||
border: 1px solid #37538D;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten( #3B5998, 4% );
|
||||
border-color: lighten( #37538D, 4% );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken( #3B5998, 3% );
|
||||
border-color: darken( #37538D, 3% );
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
&,
|
||||
&:focus {
|
||||
background: #55ACEE;
|
||||
border: 1px solid #47A5ED;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten( #55ACEE, 3% );
|
||||
border-color: lighten( #47A5ED, 3% );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken( #55ACEE, 3% );
|
||||
border-color: darken( #47A5ED, 3% );
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gplus {
|
||||
&,
|
||||
&:focus {
|
||||
background: #D95232;
|
||||
border: 1px solid #D44927;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten( #D95232, 4% );
|
||||
border-color: lighten( #D44927, 4% );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken( #D95232, 4% );
|
||||
border-color: darken( #D44927, 4% );
|
||||
}
|
||||
}
|
||||
|
||||
// STATES
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Buttons - States */
|
||||
@each $state in $states {
|
||||
.btn-#{nth($state,1)} {
|
||||
border-color: #{nth($state,2)};
|
||||
background-color: #{nth($state,2)};
|
||||
border-color: #{nth($state,2)} #{nth($state,2)} darken(nth($state,2), 10%);
|
||||
color: #{nth($state,3)};
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
|
||||
&:hover {
|
||||
border-color: lighten(nth($state,2), 5%);
|
||||
background-color: lighten(nth($state,2), 5%);
|
||||
color: #{nth($state,3)};
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: darken(nth($state,2), 5%);
|
||||
background-color: darken(nth($state,2), 5%);
|
||||
color: #{nth($state,3)};
|
||||
}
|
||||
|
||||
&.dropdown-toggle {
|
||||
border-left-color: darken(nth($state,2), 5%);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border-color: lighten(nth($state,2), 20%);
|
||||
background-color: lighten(nth($state,2), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DARK
|
||||
// -----------------------------------------------------------------------------
|
||||
html.dark {
|
||||
.btn-default {
|
||||
background-color: $dark-color-3;
|
||||
border-color: $dark-color-3;
|
||||
color: #EEE;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($dark-color-3, 1%);
|
||||
border-color: lighten($dark-color-3, 1%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($dark-color-3, 2%);
|
||||
border-color: darken($dark-color-3, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default:hover,
|
||||
.btn-default:focus,
|
||||
.btn-default:active,
|
||||
.btn-default.active,
|
||||
.open > .dropdown-toggle.btn-default {
|
||||
color: #EEE;
|
||||
background-color: darken($dark-color-3, 2%);
|
||||
border-color: darken($dark-color-3, 2%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.img-rounded {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-thumbnail {
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.modal {
|
||||
z-index: $modal-z-index;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.nav-pills > .active {
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
// NOTIFICATIONS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Notifications */
|
||||
.notifications {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 4px -10px 0 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
& > li {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
position: relative;
|
||||
|
||||
.notification-icon {
|
||||
background: #FFF;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
color: #777;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.fa-tasks {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: #D2312D;
|
||||
color: #FFF;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
height: 16px;
|
||||
padding: 3px 5px 3px 5px;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
border: none;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
left: auto;
|
||||
margin: 10px 0 0 0;
|
||||
padding: 0;
|
||||
right: -5px;
|
||||
width: $header-notification-menu-width;
|
||||
|
||||
&.large {
|
||||
width: 325px;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
background: $header-notification-menu-title-background;
|
||||
border-radius: $header-notification-menu-border-radius;
|
||||
color: $header-notification-menu-title-color;
|
||||
@include font-size($header-notification-menu-title-size);
|
||||
@include line-height($header-notification-menu-title-size + 4);
|
||||
padding: $header-notification-menu-title-padding;
|
||||
text-transform: uppercase;
|
||||
|
||||
.label {
|
||||
@include font-size($header-notification-menu-title-size - 1);
|
||||
font-weight: 200;
|
||||
line-height: 14px;
|
||||
margin-left: 10px;
|
||||
margin-top: -2px;
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
.label-default {
|
||||
background: $header-notification-menu-label-background;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: $header-notification-menu-padding;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: $header-notification-menu-hr-background;
|
||||
height: 1px;
|
||||
margin: $header-notification-menu-hr-margin;
|
||||
}
|
||||
|
||||
.view-more {
|
||||
color: $header-notification-menu-view-more-color;
|
||||
@include font-size($header-notification-menu-view-more-size);
|
||||
@include line-height($header-notification-menu-view-more-size);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NOTIFICATION MENU - PIN
|
||||
// -----------------------------------------------------------------------------
|
||||
/* notification menu - pin */
|
||||
.notifications .notification-menu,
|
||||
.notifications .notification-icon {
|
||||
&:before {
|
||||
border: {
|
||||
bottom: $header-notification-menu-pin-width solid $header-notification-menu-title-background;
|
||||
left: $header-notification-menu-pin-width solid transparent;
|
||||
right: $header-notification-menu-pin-width solid transparent;
|
||||
}
|
||||
content: '';
|
||||
height: 0;
|
||||
margin-right: -( $header-notification-menu-pin-width / 2);
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications .notification-menu:before {
|
||||
bottom: 100%;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.notifications .notification-icon:before {
|
||||
display: none;
|
||||
right: 11px;
|
||||
top: 35px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
// NOTIFICATION MENU - EMAILS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* notification menu - emails */
|
||||
.notification-menu {
|
||||
color: $notification-menu-email-message-color;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 0 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
|
||||
i {
|
||||
border-radius: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $notification-menu-email-name-color;
|
||||
display: block;
|
||||
@include font-size($notification-menu-email-name-size);
|
||||
@include line-height($notification-menu-email-name-size + 4);
|
||||
padding: $notification-menu-email-name-padding;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: $notification-menu-email-message-color;
|
||||
display: block;
|
||||
@include font-size($notification-menu-email-message-size);
|
||||
@include line-height($notification-menu-email-message-size + 4);
|
||||
padding: $notification-menu-email-message-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// HEADER DARK AND DARK VERSION
|
||||
// -----------------------------------------------------------------------------
|
||||
html.dark,
|
||||
html.header-dark {
|
||||
.notifications {
|
||||
> li .notification-icon {
|
||||
background: lighten( $sidebar-background, 5% );
|
||||
|
||||
i {
|
||||
color: $page-header-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NOTIFICATIONS
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Notifications Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.notifications {
|
||||
float: right;
|
||||
margin: 16px 8px 0 0;
|
||||
|
||||
> li {
|
||||
position: static;
|
||||
|
||||
&.open {
|
||||
.notification-icon:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
top: auto;
|
||||
width: auto !important;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.pagination {
|
||||
> li {
|
||||
|
||||
a {
|
||||
color: $color-primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($color-primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
a,
|
||||
span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-primary;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.progress-bar-primary {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.progress-bar.progress-without-number[aria-valuenow="1"],
|
||||
.progress-bar.progress-without-number[aria-valuenow="2"] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.progress-bar.progress-bar-primary[aria-valuenow="0"] {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
.sidebar-right .sidebar-widget {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-widget {
|
||||
margin: 0 30px 0 25px;
|
||||
|
||||
.widget-header {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
h6 {
|
||||
@include font-size(13);
|
||||
color: #465162;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-widget-act {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
border-color: darken($color-dark, 5%);
|
||||
background-color: darken($color-dark, 5%);
|
||||
border-color: darken($color-dark, 5%) darken($color-dark, 15%) darken($color-dark, 15%);
|
||||
|
||||
&:hover {
|
||||
border-color: darken($color-dark, 2%);
|
||||
background-color: darken($color-dark, 2%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: darken($color-dark, 10%);
|
||||
background-color: darken($color-dark, 10%);
|
||||
}
|
||||
|
||||
&.dropdown-toggle {
|
||||
border-left-color: darken($color-dark, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.widget-toggle {
|
||||
@include font-size(17);
|
||||
@include line-height(13);
|
||||
color: #465162;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
@include transform(rotate(45deg));
|
||||
@include transition-property (transform);
|
||||
@include transition-duration(.2s);
|
||||
@include transition-timing-function(linear);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
&.widget-collapsed {
|
||||
|
||||
.widget-header {
|
||||
.widget-toggle {
|
||||
@include transform(none);
|
||||
}
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// WIDGET: TASKS
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
&.widget-tasks {
|
||||
|
||||
ul {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
color: $menu-item-text-color;
|
||||
display: block;
|
||||
margin: 0 -25px 0 -30px;
|
||||
padding: 10px 0 10px 55px;
|
||||
|
||||
&:hover {
|
||||
background: #21262d;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
border: 5px solid $color-primary;
|
||||
border-radius: 100px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
margin: -5px 0 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
$colors: $widget-tasks-colors;
|
||||
@for $i from 1 through length($colors) {
|
||||
&:nth-child(#{length($colors)}n+#{$i}) {
|
||||
&:before {
|
||||
border-color: nth($colors, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// WIDGET: STATS
|
||||
// -----------------------------------------------------------------------------
|
||||
&.widget-stats {
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
.stats-complete {
|
||||
float: right;
|
||||
@include font-size(10);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 7px;
|
||||
background: #474453;
|
||||
box-shadow: 0 1px 0 #585564 inset;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// WIDGET: CALENDAR
|
||||
// -----------------------------------------------------------------------------
|
||||
&.widget-calendar {
|
||||
margin: 0 0 25px;
|
||||
|
||||
.datepicker {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #000;
|
||||
|
||||
time {
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
line-height: 1.3em;
|
||||
font-weight: 600;
|
||||
color: $color-default-inverse;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(14);
|
||||
line-height: 1.3em;
|
||||
color: $color-primary-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// WIDGET: FRIENDS
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
&.widget-friends {
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 10px 2px;
|
||||
|
||||
li {
|
||||
padding: 10px 0;
|
||||
|
||||
.profile-info,
|
||||
.profile-picture {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
margin: 0 35px 0 10px;
|
||||
}
|
||||
|
||||
span.name {
|
||||
display: block;
|
||||
color: $color-primary-inverse;
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
line-height: 1.3em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
span.title {
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
line-height: 1.3em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.status-online, &.status-offline {
|
||||
.profile-picture {
|
||||
&:after {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
content: '';
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.status-online {
|
||||
.profile-picture {
|
||||
&:after {
|
||||
display: block;
|
||||
background-color: #1AAE88;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.status-offline {
|
||||
.profile-picture {
|
||||
&:after {
|
||||
display: block;
|
||||
background-color: #D2312D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
// USERBOX
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Userbox */
|
||||
.userbox {
|
||||
display: inline-block;
|
||||
margin: 3px 17px 0 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
& > a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-info,
|
||||
.profile-picture {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.profile-picture img {
|
||||
width: 35px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
margin: 0 25px 0 10px;
|
||||
}
|
||||
|
||||
.name,
|
||||
.role {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #000011;
|
||||
@include font-size(13);
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.role {
|
||||
color: #ACACAC;
|
||||
@include font-size(11);
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.custom-caret {
|
||||
color: #000011;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// USERBOX OPENED
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Userbox - Open */
|
||||
.userbox.open {
|
||||
& > a {
|
||||
position: relative;
|
||||
z-index: 993;
|
||||
|
||||
.custom-caret:before {
|
||||
content: "\f106";
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
@include box-sizing(content-box);
|
||||
left: -11px;
|
||||
padding: 45px 10px 0;
|
||||
top: -10px;
|
||||
width: 100%;
|
||||
z-index: 992;
|
||||
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 2px;
|
||||
color: #7d7d7d;
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
@include line-height(15);
|
||||
padding: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $color-primary-inverse;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@include font-size(17);
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// USERBOX MOBILE
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Userbox - Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.userbox {
|
||||
float: left;
|
||||
margin: 16px 0 0 12px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
background: #E9E9E6;
|
||||
content: '';
|
||||
height: 63px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: -21px;
|
||||
top: -18px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.open .dropdown-menu {
|
||||
left: -5px;
|
||||
padding: 43px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// HEADER DARK
|
||||
// -----------------------------------------------------------------------------
|
||||
/* Header Dark - Userbox */
|
||||
html.dark,
|
||||
html.header-dark {
|
||||
.userbox {
|
||||
&:after {
|
||||
background: darken( $sidebar-background, 5% );
|
||||
}
|
||||
|
||||
.name,
|
||||
.custom-caret {
|
||||
color: $page-header-color;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.dropdown-menu {
|
||||
.name,
|
||||
.custom-caret {
|
||||
color: $page-header-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $page-header-color;
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: lighten( $sidebar-background, 5% );
|
||||
|
||||
.divider {
|
||||
background: $sidebar-background;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $page-header-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user