weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / atto.scss
CommitLineData
adca7326
DW
1.editor_atto_content_wrap {
2 background-color: white;
4c37c1f4 3 color: #333;
adca7326 4}
bc33e9bd 5
adca7326
DW
6.editor_atto_content {
7 padding: 4px;
f3319803
AD
8 resize: vertical;
9 overflow: auto;
adca7326
DW
10}
11
12.editor_atto_content_wrap,
13.editor_atto + textarea {
14 width: 100%;
15 padding: 0;
adca7326
DW
16}
17
18.editor_atto + textarea {
19 border-radius: 0;
20 resize: vertical;
21 margin-top: -1px;
22}
23
24div.editor_atto_toolbar {
25 display: block;
bc33e9bd 26 background: #f2f2f2;
adca7326 27 min-height: 35px;
609d8b38 28 border: 1px solid $input-border-color;
adca7326
DW
29 width: 100%;
30 padding: 0 0 9px 0;
31}
32
33div.editor_atto_toolbar button {
079c3a94 34 padding: 4px 9px;
adca7326 35 background: none;
4c37c1f4 36 border: 0;
adca7326
DW
37 margin: 0;
38 border-radius: 0;
39 cursor: pointer;
bc33e9bd 40}
adca7326
DW
41
42div.editor_atto_toolbar button + button {
bc33e9bd 43 border-left: 1px solid #ccc;
adca7326
DW
44}
45
46div.editor_atto_toolbar button[disabled] {
47 opacity: .45;
48 background: none;
49 cursor: default;
50}
51
52.editor_atto_toolbar button:hover {
aea8eaec 53 background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
adca7326
DW
54 background-color: #ebebeb;
55}
56
bc33e9bd
DP
57.editor_atto_toolbar button:active,
58.editor_atto_toolbar button.highlight {
aea8eaec 59 background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
adca7326
DW
60 background-color: #dfdfdf;
61}
62
8095505e
DW
63/* Make firefox button sizes match other browsers */
64div.editor_atto_toolbar button::-moz-focus-inner {
bc33e9bd
DP
65 border: 0;
66 padding: 0;
8095505e
DW
67}
68
d3d2f09c 69div.editor_atto_toolbar button .icon {
99fe296e 70 padding: 0;
62467795 71 margin: 2px 0;
adca7326
DW
72}
73
adca7326
DW
74div.editor_atto_toolbar div.atto_group {
75 display: inline-block;
bc33e9bd
DP
76 border: 1px solid #ccc;
77 border-bottom: 1px solid #b3b3b3;
adca7326 78 border-radius: 4px;
4c37c1f4 79 margin: 9px 0 0 9px;
bc33e9bd 80 background: #fff;
adca7326
DW
81}
82
83.editor_atto_content img {
bc33e9bd
DP
84 resize: both;
85 overflow: auto;
adca7326
DW
86}
87
4c37c1f4
FM
88.atto_hasmenu {
89 /* IE8 places the images on top of each other if that is not set. */
90 white-space: nowrap;
91}
92
d3d2f09c 93.atto_menuentry .icon {
adca7326
DW
94 width: 16px;
95 height: 16px;
96}
97
adca7326 98.atto_menuentry {
adca7326
DW
99 clear: left;
100}
101
102.atto_menuentry h1,
103.atto_menuentry h2,
104.atto_menuentry p {
105 margin: 4px;
106}
107
1b217025 108/*.atto_form label.sameline {
adca7326 109 display: inline-block;
8095505e 110 min-width: 10em;
1b217025 111}*/
bc33e9bd 112
adca7326
DW
113.atto_form textarea.fullwidth,
114.atto_form input.fullwidth {
115 width: 100%;
116}
bc33e9bd 117
adca7326 118.atto_form {
1b217025 119 padding: 0.5rem;
adca7326 120}
bc33e9bd 121
1b217025 122/*.atto_form label {
adca7326 123 display: block;
23cead68 124 margin: 0 0 5px 0;
1b217025 125}*/
adca7326 126
adca7326
DW
127.atto_control {
128 position: absolute;
129 right: -6px;
130 bottom: -6px;
131 display: none;
132 cursor: pointer;
133}
bc33e9bd 134
d3d2f09c 135.atto_control .icon {
adca7326
DW
136 background-color: white;
137}
bc33e9bd 138
adca7326
DW
139div.editor_atto_content:focus .atto_control,
140div.editor_atto_content:hover .atto_control {
141 display: block;
142}
143
9b2fc574 144.editor_atto_menu.yui3-menu-hidden {
adca7326
DW
145 display: none;
146}
18ce3fe4
JF
147
148/* Get broken images back in firefox */
149.editor_atto_content img:-moz-broken {
bc33e9bd
DP
150 -moz-force-broken-image-icon: 1;
151 min-width: 24px;
152 min-height: 24px;
62467795
AN
153}
154
ee616cff 155/* Atto menu styling */
62467795 156.moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content .moodle-dialogue-bd {
ee616cff 157 padding: 0;
62467795 158 z-index: 1000;
62467795
AN
159}
160
ee616cff 161.editor_atto_menu .dropdown-menu > li > a {
d3d2f09c 162 margin: 3px 14px;
62467795
AN
163}
164
ee616cff
AN
165.editor_atto_menu .open ul.dropdown-menu {
166 padding-top: 5px;
167 padding-bottom: 5px;
62467795 168}
bc33e9bd 169
369a63ac 170.editor_atto_wrap {
75c86d13 171 position: relative;
369a63ac 172}
ed7844b5
FM
173/*rtl:ignore*/
174.editor_atto_wrap textarea {
b555d94d
NK
175 direction: ltr;
176}
bc33e9bd 177
369a63ac
DC
178.editor_atto_notification .atto_info,
179.editor_atto_notification .atto_warning {
75c86d13 180 display: inline-block;
bc33e9bd 181 background-color: #f2f2f2;
75c86d13
DW
182 padding: 0.5em;
183 padding-left: 1em;
184 padding-right: 1em;
369a63ac
DC
185 border-bottom-left-radius: 1em;
186 border-bottom-right-radius: 1em;
187}
bc33e9bd 188
369a63ac 189.editor_atto_notification .atto_info {
bc33e9bd 190 background-color: #f2f2f2;
75c86d13 191}
bc33e9bd 192
75c86d13 193.editor_atto_notification .atto_warning {
bc33e9bd 194 background-color: #ffd700;
369a63ac 195}
bc33e9bd 196
369a63ac
DC
197.editor_atto_toolbar,
198.editor_atto_content_wrap,
199.editor_atto + textarea {
200 box-sizing: border-box;
75c86d13 201}
609d8b38
BB
202
203.editor_atto_content.form-control {
204 width: 100%;
205 border-top: 0;
206}
207
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);
213}
214
215.open.atto_menu > .dropdown-menu {
216 display: block;
217}
218div.editor_atto_toolbar button .icon {
219 color: $gray-700;
220}