summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/layout/_sidebar-left.scss
diff options
context:
space:
mode:
authorChristopher Speller <crspeller@gmail.com>2016-03-15 14:05:05 -0400
committerChristopher Speller <crspeller@gmail.com>2016-03-15 14:05:05 -0400
commit3745204097b2f03cd5f3fc1292ea62fb4f931232 (patch)
tree3380ee0fd2341dac1814aed8cf851bfe274a21a7 /web/sass-files/sass/layout/_sidebar-left.scss
parentbf7ae0711743926cfbb031675cc3320d7a942465 (diff)
parent7d79a916dd58d51989d35721060cfca6dce1baca (diff)
downloadchat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.gz
chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.bz2
chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.zip
Merge pull request #2429 from asaadmahmoodspin/ui-improvements
PLT-963 - Improving scss structure
Diffstat (limited to 'web/sass-files/sass/layout/_sidebar-left.scss')
-rw-r--r--web/sass-files/sass/layout/_sidebar-left.scss197
1 files changed, 197 insertions, 0 deletions
diff --git a/web/sass-files/sass/layout/_sidebar-left.scss b/web/sass-files/sass/layout/_sidebar-left.scss
new file mode 100644
index 000000000..ece054a15
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-left.scss
@@ -0,0 +1,197 @@
+@charset 'UTF-8';
+
+.sidebar--left {
+ position: absolute;
+ width: 220px;
+ left: 0;
+ height: 100%;
+ border-right: $border-gray;
+ background: #fafafa;
+ z-index: 5;
+
+ &.sidebar--padded {
+ padding-top: 44px;
+ }
+ .dropdown-menu {
+ max-height: 400px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ max-width: 200px;
+ width: 200px;
+ }
+ .search__form {
+ margin: 0;
+ padding: 1em 1em 0;
+ display: none;
+ }
+ .badge {
+ background-color: $color--primary;
+ position: absolute;
+ right: 10px;
+ top: 5px;
+ }
+ .status {
+ position: relative;
+ top: 1px;
+ margin-right: 6px;
+ width: 12px;
+ display: inline-block;
+ svg {
+ max-height: 14px;
+ }
+ i,
+ path,
+ ellipse {
+ @include opacity(.5);
+ &.online--icon,
+ &.away--icon {
+ @include opacity(1);
+ }
+ }
+ .fa-lock {
+ margin-left: 1px;
+ }
+ .fa-globe {
+ top: -1px;
+ position: relative;
+ }
+ }
+ .nav-pills__container {
+ height: calc(100% - 80px);
+ position: relative;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .nav-pills__unread-indicator {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 72%;
+ color: #fff;
+ background: #2389d7;
+ @include border-radius(50px);
+ margin: 0 auto;
+ padding: 3px 0 4px;
+ font-size: 13.5px;
+ text-align: center;
+ z-index: 1;
+ }
+
+ .nav-pills__unread-indicator-top {
+ top: 66px;
+ }
+ .nav-pills__unread-indicator-bottom {
+ bottom: 20px;
+ }
+
+ .nav {
+ &.nav-stacked {
+ > li + li {
+ margin: 0;
+ }
+ }
+ li {
+ > h4 {
+ font-size: 1em;
+ text-transform: uppercase;
+ margin: 1.1em 0 .5em;
+ font-weight: 400;
+ color: #aaa;
+ letter-spacing: -.3px;
+ padding: 0 10px 0 15px;
+ }
+ > a {
+ padding: 3px 10px 3px 25px;
+ line-height: 1.5;
+ border-radius: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ &.has-badge {
+ padding-right: 30px;
+ }
+ &.has-close {
+ padding-right: 30px;
+ &:hover {
+ .btn-close {
+ display: block;
+ @include opacity(.8);
+ }
+ }
+ .btn-close {
+ font-family: 'Open Sans', sans-serif;
+ position: absolute;
+ right: 15px;
+ top: -1px;
+ font-size: 20px;
+ font-weight: 600;
+ @include opacity(0);
+ display: none;
+ &:hover {
+ @include opacity(1);
+ }
+ }
+ }
+ &.nav-more {
+ text-decoration: underline;
+ }
+ &.unread-title {
+ font-weight: 600;
+ }
+ }
+ &.active {
+ a {
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 5px;
+ height: 100%;
+ background: #000;
+ }
+ }
+ a,
+ a:hover,
+ a:focus {
+ background-color: rgba(black, .1);
+ border-radius: 0;
+ font-weight: 400;
+ position: relative;
+ }
+ }
+ }
+ }
+ .modal-title {
+ line-height: 2em;
+ }
+
+ .add-channel-btn {
+ float: right;
+ outline: none;
+ margin: -2px 0 0 0;
+ color: #aaa;
+ padding: 0 5px;
+ text-decoration: none;
+ font-size: 22px;
+ line-height: 18px;
+ font-weight: 700;
+ &:hover {
+ color: #666;
+ }
+ }
+}
+
+.channel-loading-gif {
+ height: 15px;
+ width: 15px;
+ margin-top: 2px;
+}
+
+.join-channel-loading-gif {
+ margin-top: 5px;
+ margin-left: 10px;
+ height: 25px;
+ width: 25px;
+}