/*** Theme Panel ***/ .btn-theme-panel { margin-top: 10px; .btn { @include opacity(0.6); padding: 0 6px; > i { font-size: 24px; color: darken(#697882, 3%); } &:hover { @include opacity(1); } } &.open .btn { @include opacity(1); } } .theme-panel { z-index: 1000; min-width: 575px; padding: 20px 10px; font-family: $font-family-primary; h3 { margin: 8px 0 8px 0; font-size: 15px; padding-left: 12px; } .seperator { border-left:1px solid #EFF2F4; } .theme-colors { list-style: none; padding: 0; margin: 0; > li.theme-color { padding: 8px 12px; &:hover, &.active { background: lighten(#EFF2F4, 2%); } &:hover { cursor: pointer; } > .theme-color-view { float: left; margin-top: 0px; margin-right: 8px; display: inline-block; border-radius: 10px !important; height: 20px; width: 20px; } > .theme-color-name { display: inline-block; color: #777; font-size: 14px; font-weight: 300; padding-top: -4px; } &.theme-color-default .theme-color-view { background: #3B3F51; } &.theme-color-light .theme-color-view { background: lighten(#3B3F51, 55%); } } } .theme-settings { list-style: none; padding: 0; margin: 0; > li { padding: 8px 12px; font-size: 14px; font-weight: 300; color: #777; .form-control { color: #777; margin-top: -3px; float: right; } } } } @media (max-width: $screen-xs-max) { /* 767px */ .theme-panel { left: 20px; right: 20px; min-width: 285px; .seperator { border: 0; } .theme-settings { .form-control { width: 105px !important; } } } }