8
0

button.scss 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. .ck-button,
  4. a.ck-button {
  5. @include ck-button-colors( 'button-default-background', 'button-default-border' );
  6. @include ck-rounded-corners();
  7. border-width: 1px;
  8. border-style: solid;
  9. white-space: nowrap;
  10. cursor: default;
  11. vertical-align: middle;
  12. padding: ck-spacing( 'small' );
  13. // Enable font size inheritance, which allows fluid UI scaling.
  14. font-size: inherit;
  15. &:focus {
  16. @include ck-focus-ring();
  17. @include ck-box-shadow( $ck-focus-outer-shadow );
  18. }
  19. @include ck-button-icon {
  20. float: left;
  21. }
  22. // https://github.com/ckeditor/ckeditor5-theme-lark/issues/70
  23. &.ck-disabled {
  24. @include ck-button-icon {
  25. @include ck-disabled;
  26. }
  27. // https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
  28. .ck-button__label {
  29. @include ck-disabled;
  30. }
  31. }
  32. &.ck-button_with-text {
  33. padding: ck-spacing( 'small' ) ck-spacing();
  34. @include ck-button-icon {
  35. margin-left: -#{ck-spacing( 'small' )};
  36. margin-right: ck-spacing( 'small' );
  37. }
  38. .ck-button__label {
  39. display: block;
  40. }
  41. }
  42. // A style of the button which is currently on, e.g. its feature is active.
  43. &.ck-on {
  44. @include ck-button-colors( 'button-on-background', 'button-on-border' );
  45. }
  46. // A style of the button which handles the primary action.
  47. &-action {
  48. @include ck-button-colors( 'button-action-background', 'button-action-border' );
  49. text-shadow: 0 -1px ck-color( 'button-action-background', -20 );
  50. color: ck-color( 'button-action-text' );
  51. &:hover,
  52. &:focus,
  53. &:active {
  54. text-shadow: 0 -1px ck-color( 'button-action-background', -40 );
  55. }
  56. }
  57. &-bold {
  58. font-weight: bold;
  59. }
  60. .ck-icon {
  61. use,
  62. use * {
  63. color: inherit;
  64. }
  65. }
  66. .ck-button__label {
  67. // Enable font size inheritance, which allows fluid UI scaling.
  68. font-size: inherit;
  69. float: left;
  70. height: #{ $ck-line-height-base }em;
  71. line-height: inherit;
  72. font-weight: inherit;
  73. color: inherit;
  74. cursor: inherit;
  75. }
  76. }