MDL-69395 theme_boost: improve colour contrast for form input fields
[moodle.git] / theme / boost / scss / moodle / atto.scss
1 .editor_atto_content_wrap {
2     background-color: white;
3     color: #333;
4 }
6 .editor_atto_content {
7     padding: 4px;
8     resize: vertical;
9     overflow: auto;
10 }
12 .editor_atto_content_wrap,
13 .editor_atto + textarea {
14     width: 100%;
15     padding: 0;
16 }
18 .editor_atto + textarea {
19     border-radius: 0;
20     resize: vertical;
21     margin-top: -1px;
22 }
24 div.editor_atto_toolbar {
25     display: block;
26     background: #f2f2f2;
27     min-height: 35px;
28     border: 1px solid $input-border-color;
29     width: 100%;
30     padding: 0 0 9px 0;
31 }
33 div.editor_atto_toolbar button {
34     padding: 4px 9px;
35     background: none;
36     border: 0;
37     margin: 0;
38     border-radius: 0;
39     cursor: pointer;
40 }
42 div.editor_atto_toolbar button + button {
43     border-left: 1px solid #ccc;
44 }
46 div.editor_atto_toolbar button[disabled] {
47     opacity: .45;
48     background: none;
49     cursor: default;
50 }
52 .editor_atto_toolbar button:hover {
53     background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
54     background-color: #ebebeb;
55 }
57 .editor_atto_toolbar button:active,
58 .editor_atto_toolbar button.highlight {
59     background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
60     background-color: #dfdfdf;
61 }
63 /* Make firefox button sizes match other browsers */
64 div.editor_atto_toolbar button::-moz-focus-inner {
65     border: 0;
66     padding: 0;
67 }
69 div.editor_atto_toolbar button .icon {
70     padding: 0;
71     margin: 2px 0;
72 }
74 div.editor_atto_toolbar div.atto_group {
75     display: inline-block;
76     border: 1px solid #ccc;
77     border-bottom: 1px solid #b3b3b3;
78     border-radius: 4px;
79     margin: 9px 0 0 9px;
80     background: #fff;
81 }
83 .editor_atto_content img {
84     resize: both;
85     overflow: auto;
86 }
88 .atto_hasmenu {
89     /* IE8 places the images on top of each other if that is not set. */
90     white-space: nowrap;
91 }
93 .atto_menuentry .icon {
94     width: 16px;
95     height: 16px;
96 }
98 .atto_menuentry {
99     clear: left;
102 .atto_menuentry h1,
103 .atto_menuentry h2,
104 .atto_menuentry p {
105     margin: 4px;
108 /*.atto_form label.sameline {
109     display: inline-block;
110     min-width: 10em;
111 }*/
113 .atto_form textarea.fullwidth,
114 .atto_form input.fullwidth {
115     width: 100%;
118 .atto_form {
119     padding: 0.5rem;
122 /*.atto_form label {
123     display: block;
124     margin: 0 0 5px 0;
125 }*/
127 .atto_control {
128     position: absolute;
129     right: -6px;
130     bottom: -6px;
131     display: none;
132     cursor: pointer;
135 .atto_control .icon {
136     background-color: white;
139 div.editor_atto_content:focus .atto_control,
140 div.editor_atto_content:hover .atto_control {
141     display: block;
144 .editor_atto_menu.yui3-menu-hidden {
145     display: none;
148 /* Get broken images back in firefox */
149 .editor_atto_content img:-moz-broken {
150     -moz-force-broken-image-icon: 1;
151     min-width: 24px;
152     min-height: 24px;
155 /* Atto menu styling */
156 .moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content .moodle-dialogue-bd {
157     padding: 0;
158     z-index: 1000;
161 .editor_atto_menu .dropdown-menu > li > a {
162     margin: 3px 14px;
165 .editor_atto_menu .open ul.dropdown-menu {
166     padding-top: 5px;
167     padding-bottom: 5px;
170 .editor_atto_wrap {
171     position: relative;
173 /*rtl:ignore*/
174 .editor_atto_wrap textarea {
175     direction: ltr;
178 .editor_atto_notification .atto_info,
179 .editor_atto_notification .atto_warning {
180     display: inline-block;
181     background-color: #f2f2f2;
182     padding: 0.5em;
183     padding-left: 1em;
184     padding-right: 1em;
185     border-bottom-left-radius: 1em;
186     border-bottom-right-radius: 1em;
189 .editor_atto_notification .atto_info {
190     background-color: #f2f2f2;
193 .editor_atto_notification .atto_warning {
194     background-color: #ffd700;
197 .editor_atto_toolbar,
198 .editor_atto_content_wrap,
199 .editor_atto + textarea {
200     box-sizing: border-box;
203 .editor_atto_content.form-control {
204     width: 100%;
205     border-top: 0;
208 /** Atto fields do not have form-control because that would break the layout of the editor.
209     So they need these extra styles to highlight the editor when there is a validation error. */
210 .has-danger .editor_atto_content.form-control,
211 .has-danger .editor_atto_content.form-control-danger {
212     @include form-validation-state('invalid', $form-feedback-invalid-color, $form-feedback-icon-invalid);
215 .open.atto_menu > .dropdown-menu {
216     display: block;
218 div.editor_atto_toolbar button .icon {
219     color: $gray-700;