// inspired by http://dribbble.com/shots/857472-Toolbar // theme settings $medium-editor-bgcolor: #dee7f0; $medium-editor-bgcolor-alt: #5c90c7; $medium-editor-border-color: #cdd6e0; $medium-editor-button-size: 50px; $medium-editor-button-hover-text-color: #fff; $medium-editor-button-active-text-color: #000; $medium-editor-link-color: #40648a; $medium-editor-border-radius: 2px; // theme rules .medium-toolbar-arrow-under:after, .medium-toolbar-arrow-over:before { display: none; } .medium-editor-toolbar { border: 1px solid $medium-editor-border-color; background-color: $medium-editor-bgcolor; background-color: rgba($medium-editor-bgcolor, .95); background: linear-gradient(to top, $medium-editor-bgcolor, rgba(#fff, 1)); border-radius: $medium-editor-border-radius; box-shadow: 0 2px 6px rgba(#000, .45); li { button { min-width: $medium-editor-button-size; height: $medium-editor-button-size; border: none; border-right: 1px solid $medium-editor-border-color; background-color: transparent; color: $medium-editor-link-color; transition: background-color .2s ease-in, color .2s ease-in; &:hover { background-color: $medium-editor-bgcolor-alt; background-color: rgba($medium-editor-bgcolor-alt, .45); color: $medium-editor-button-hover-text-color; } } .medium-editor-button-first { border-top-left-radius: $medium-editor-border-radius; border-bottom-left-radius: $medium-editor-border-radius; } .medium-editor-button-last { border-top-right-radius: $medium-editor-border-radius; border-bottom-right-radius: $medium-editor-border-radius; } .medium-editor-button-active { background-color: $medium-editor-bgcolor-alt; background-color: rgba($medium-editor-bgcolor-alt, .45); color: $medium-editor-button-active-text-color; background: linear-gradient(to bottom, $medium-editor-bgcolor, rgba(#000, .1)); } } } .medium-editor-toolbar-form { background: $medium-editor-bgcolor; color: #999; border-radius: $medium-editor-border-radius; .medium-editor-toolbar-input { height: $medium-editor-button-size; background: $medium-editor-bgcolor; color: $medium-editor-link-color; box-sizing: border-box; } a { color: $medium-editor-link-color; } } .medium-editor-toolbar-anchor-preview { background: $medium-editor-bgcolor; color: $medium-editor-link-color; border-radius: $medium-editor-border-radius; } .medium-editor-placeholder:after { color: $medium-editor-border-color; }