codecheck

1
.p-editor-container {
2
    .p-editor-toolbar {
3
        background: $editorToolbarBg;
4
        border-top-right-radius: $borderRadius;
5
        border-top-left-radius: $borderRadius;
6

7
        &.ql-snow {
8
            border: $editorToolbarBorder;
9

10
            .ql-stroke {
11
                stroke: $editorToolbarIconColor;
12
            }
13
    
14
            .ql-fill {
15
                fill: $editorToolbarIconColor;
16
            }
17
    
18
            .ql-picker {
19
                .ql-picker-label {
20
                    border: 0 none;
21
                    color: $editorToolbarIconColor;
22

23
                    &:hover {
24
                        color: $editorToolbarIconHoverColor;
25

26
                        .ql-stroke {
27
                            stroke: $editorToolbarIconHoverColor;
28
                        }
29
                
30
                        .ql-fill {
31
                            fill: $editorToolbarIconHoverColor;
32
                        }
33
                    }
34
                }
35

36
                &.ql-expanded {
37
                    .ql-picker-label {
38
                        color: $editorToolbarIconHoverColor;
39

40
                        .ql-stroke {
41
                            stroke: $editorToolbarIconHoverColor;
42
                        }
43
                
44
                        .ql-fill {
45
                            fill: $editorToolbarIconHoverColor;
46
                        }
47
                    }
48

49
                    .ql-picker-options {
50
                        background: $inputOverlayBg;
51
                        border:$inputOverlayBorder;
52
                        box-shadow:$inputOverlayShadow;
53
                        border-radius: $borderRadius;
54
                        padding: $inputListPadding;
55

56
                        .ql-picker-item {
57
                            color: $inputListItemTextColor;
58
                            
59
                            &:hover {
60
                                color: $inputListItemTextHoverColor;
61
                                background: $inputListItemHoverBg;
62
                            }
63
                        }
64
                    }
65

66
                    &:not(.ql-icon-picker) {
67
                        .ql-picker-item {
68
                            padding: $inputListItemPadding;
69
                        }
70
                    }
71
                }
72
            }
73
        }
74
    }
75

76
    .p-editor-content {
77
        border-bottom-right-radius: $borderRadius;
78
        border-bottom-left-radius: $borderRadius;
79

80
        &.ql-snow {
81
            border: $editorContentBorder;
82
        }
83

84
        .ql-editor {
85
            background: $inputBg;
86
            color: $inputTextColor;
87
            border-bottom-right-radius: $borderRadius;
88
            border-bottom-left-radius: $borderRadius;
89
        }
90
    }
91

92
    .ql-snow.ql-toolbar button:hover,
93
    .ql-snow.ql-toolbar button:focus {
94
        color: $editorToolbarIconHoverColor;
95

96
        .ql-stroke {
97
            stroke: $editorToolbarIconHoverColor;
98
        }
99

100
        .ql-fill {
101
            fill: $editorToolbarIconHoverColor;
102
        }
103
    }
104

105
    .ql-snow.ql-toolbar button.ql-active,
106
    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
107
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
108
        color: $editorIconActiveColor;
109

110
        .ql-stroke {
111
            stroke: $editorIconActiveColor;
112
        }
113

114
        .ql-fill {
115
            fill: $editorIconActiveColor;
116
        }
117

118
        .ql-picker-label {
119
            color: $editorIconActiveColor;
120
        }
121
    }
122
}
123