| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- // 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;
- overflow: hidden;
- padding: ck-spacing( 'small' );
- @include ck-button( 'background' );
- @include ck-unselectable();
- @include ck-rounded-corners();
- @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;
- }
- }
- .ck-button__label {
- display: none;
- float: left;
- line-height: inherit;
- font-size: inherit;
- font-weight: inherit;
- color: inherit;
- cursor: inherit;
- }
- }
|