@import "variables"; $width-button: 50px; $height-button: 40px; .left-bar { width: $width-button; height: calc(100%); background: $color-secondary; position: relative; } .left-bar-link { color: $font-link-primary; color: darken(whitesmoke, 17); text-decoration: none; &:hover { color: $font-link-primary-hover; } } .left-bar-button { font-size: 32px; display: block; width: $width-button; height: $height-button; transition: all .2s; // outline: 1px dotted greenyellow; &--status { //margin-top: 3px; font-size: 26px; font-size: 22px; padding: 8px 0 2px 13px; } &--search { // font-size: 28px; // font-size: 22px; font-size: 16px; padding: 5px 0 0 16px; } &--add { padding: 2px 0 5px 18px; font-size: 14px; } &--scheduled { font-size: 24px; position: absolute; left: 14px; bottom: 37px; } &--cog { font-size: 24px; padding: 5px 0 0 12px; position: absolute; bottom: 7px; } &--bottom { opacity: .3; transition: all .3s; filter: alpha(opacity=30); &:hover{ filter: alpha(opacity=100); opacity: 1; } } } .add-account { width: $width-button; height: 30px; padding-top: 7px; &__link { font-size: 2em; height: 10px; margin: 0 15px; line-height: 0; } } .no-accounts { padding-top: 10px; // color: cornflowerblue; } $draggable-accent-color: #47e927; // $draggable-accent-color: #a8ff97; .draggable { width: 40px; height: 40px; margin: auto; margin-bottom: 5px; border: 2px solid #df0adf; border: 2px solid $draggable-accent-color; border-radius: 2px; position: relative; &__avatar { width: calc(100%); opacity: .8; } &__icon { position: absolute; float: left; z-index: 5; color:$draggable-accent-color; top: 6px; left: 12px; font-size: 18px; } }