// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. // For licensing, see LICENSE.md or http://ckeditor.com/license /** * Implements a button of given background color. * * @access public * @param {String} $color - Background color of the button. */ @mixin ck-button( $color ) { border: 1px solid; white-space: nowrap; cursor: pointer; vertical-align: middle; line-height: $ck-icon-size / $ck-font-size-base; position: relative; @include ck-button-colors( $color ); @include ck-user-focus-outline(); } /** * Implements a button of given background color. * * @access public * @param {String} $color - Background color of the button. */ @mixin ck-button-colors( $color, $offset: 0 ) { background: ck-color( $color, $offset ); border-color: ck-border-color( $color, $offset ); @include ck-button-state-colors( $color, $offset ); } /** * Implements button states. * * @access public * @param {String} $color - Background color of the button. */ @mixin ck-button-state-colors( $color, $offset: 0 ) { &:not(.ck-disabled) { &:hover, &:focus { background: ck-color( $color, $offset - 10 ); border-color: ck-border-color( $color, $offset - 10 ); } &:active { background: ck-color( $color, $offset - 15 ); border-color: ck-border-color( $color, $offset - 15 ); box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 ); } } } /** * A helper to define button–specific icon styles. * * @access public */ @mixin ck-button-icon { .ck-icon { @content; } } .ck-button, a.ck-button { display: inline-block; padding: ck-spacing( 'small' ); @include ck-button( 'background' ); @include ck-unselectable(); @include ck-rounded-corners(); @include ck-tooltip_enabled(); @include ck-button-icon { float: left; } &.ck-button_with-text { padding: ck-spacing( 'small' ) ck-spacing(); @include ck-button-icon { margin-left: -#{ck-spacing( 'small' )}; margin-right: ck-spacing( 'small' ); } .ck-button__label { display: block; } } &.ck-on { @include ck-button( 'foreground' ); } &-action { text-shadow: 0 -1px ck-color( 'action', -20 ); color: ck-color(); @include ck-button( 'action' ); &:hover, &:focus, &:active { text-shadow: 0 -1px ck-color( 'action', -40 ); } } &-bold { font-weight: bold; } .ck-icon { use, use * { color: inherit; } } &:hover { @include ck-tooltip_visible(); } // Tooltip tweaks: // 1. Get rid of the focus outline around the tooltip when focused (but not :hover). // 2. Don't display tooltips for buttons with text; text explains the button anyway. &:focus:not(:hover), &.ck-button_with-text { @include ck-tooltip_disabled(); } .ck-button__label { display: none; float: left; line-height: inherit; font-size: inherit; font-weight: inherit; color: inherit; cursor: inherit; } }