|
|
@@ -15,33 +15,46 @@
|
|
|
}
|
|
|
|
|
|
.ck.ck-list__item {
|
|
|
- padding: var(--ck-spacing-medium);
|
|
|
cursor: default;
|
|
|
min-width: 12em;
|
|
|
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- background: var(--ck-color-list-item-background-hover);
|
|
|
- }
|
|
|
+ & .ck-button {
|
|
|
+ min-height: unset;
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ border-radius: 0;
|
|
|
+ border: 0;
|
|
|
|
|
|
- &:focus {
|
|
|
- @mixin ck-box-shadow var(--ck-focus-outer-shadow);
|
|
|
+ /* List items should have the same height. Use absolute units to make sure it is so
|
|
|
+ because e.g. different heading styles may have different height
|
|
|
+ https://github.com/ckeditor/ckeditor5-heading/issues/63 */
|
|
|
+ padding:
|
|
|
+ calc(.2*var(--ck-line-height-base)*var(--ck-font-size-base))
|
|
|
+ calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
|
|
|
|
|
|
- outline: none;
|
|
|
- }
|
|
|
+ & .ck-button__label {
|
|
|
+ /* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
|
|
|
+ line-height: calc(1.2*var(--ck-line-height-base)*var(--ck-font-size-base));
|
|
|
+ }
|
|
|
|
|
|
- &.ck-disabled {
|
|
|
- @mixin ck-disabled;
|
|
|
- }
|
|
|
-}
|
|
|
+ &:active {
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.ck-on {
|
|
|
+ background: var(--ck-color-list-button-background-active);
|
|
|
+ color: var(--ck-color-list-button-text-active);
|
|
|
|
|
|
-.ck.ck-list__item_active {
|
|
|
- background: var(--ck-color-list-item-background-active);
|
|
|
- color: var(--ck-color-list-item-text-active);
|
|
|
+ &:hover:not(ck-disabled),
|
|
|
+ &:focus {
|
|
|
+ background: var(--ck-color-list-button-background-active-focus);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- background: var(--ck-color-list-item-background-active-focus);
|
|
|
+ &:hover:not(.ck-disabled),
|
|
|
+ &:focus {
|
|
|
+ background: var(--ck-color-list-button-background-hover);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|