MDL-43822 theme_bootstrapbase: blocks less tidied and reorganised
[moodle.git] / theme / bootstrapbase / less / moodle / blocks.less
CommitLineData
496e46b1 1// General block styles.
8903b17b
BB
2.block {
3 .well;
4 padding: 8px 0;
8903b17b 5
496e46b1
SH
6 .header {
7 h2 {
8 .nav-header;
9 font-size: 1.1em;
10 word-wrap: break-word;
11 margin: 0;
12 }
13 .block_action {
14 padding: 3px 15px;
15 float: right;
16 > * {
17 margin-left:3px;
18 }
19 .block-hider-show,
20 .block-hider-hide {
21 cursor: pointer;
22 }
23 .block-hider-show {
24 display: none;
25 }
26 }
27 .commands {
28 clear: both;
29 text-align: right;
30 display: block;
31 padding: 3px 15px;
13273e51 32
496e46b1
SH
33 > a {
34 margin: 0 3px;
35 }
36 .icon img {
37 width: 12px;
38 height: 12px;
39 }
40 img.actionmenu {
41 width:auto;
42 }
43 }
ee749e50 44 }
f802fe7d
FM
45 .content {
46 padding: 4px 14px;
47 word-wrap: break-word;
496e46b1
SH
48
49 h3 {
50 .nav-header;
51 font-size: 1.1em;
52 }
f802fe7d
FM
53 hr {
54 margin: 5px 0;
55 }
496e46b1
SH
56 .userpicture {
57 width: 16px;
58 height: 16px;
59 margin-right: 6px;
60 }
61 .list {
62 li.listentry {
63 clear: both;
64 }
65 .c0 {
66 display: inline;
67 }
68 .c1 {
69 margin-left: 5px;
70 display: inline;
71 }
72 }
73 }
74 .footer {
75 margin-bottom: 4px;
76 display: block;
77 padding: 3px 5px;
78 }
79 &.beingmoved {
80 border-width: 2px;
81 border-style: dashed;
82 }
83 &.invisible {
84 .opacity(50);
85 }
86
87 &.hidden .header .block_action {
88 .block-hider-hide {
89 display: none;
90 }
91 .block-hider-show {
92 display: inline;
93 }
94 }
95 &.list_block .unlist > li > .column {
96 display: inline-block;
97 .ie7-inline-block();
f802fe7d 98 }
68ce3896 99}
8903b17b 100
496e46b1 101// Hide the block content when the block has been minimised.
2fad76eb 102.jsenabled .block.hidden .content {
8903b17b
BB
103 display: none;
104}
105
496e46b1
SH
106// Style the div used as a move target for non-drag+drop block moves.
107.blockmovetarget {
8903b17b
BB
108 border-width: 2px;
109 border-style: dashed;
8903b17b
BB
110 display: block;
111 height: 1em;
496e46b1 112 margin-bottom: 20px;
8903b17b
BB
113}
114
496e46b1
SH
115// Style the div that contains the cancel link for moving a block with JS disabled.
116.blockannotation {
117 // Blocks have a bottom margin of 20px, to associate this link with the block being moved
118 // we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
119 position: relative;
120 top: -10px;
121 margin-bottom: 10px;
8903b17b
BB
122}
123
496e46b1
SH
124// Styles for the blog menu block.
125.block_blog_menu #blogsearchquery {
126 max-width: 92%;
8903b17b 127}
496e46b1
SH
128
129// Styles for the admin block.
130.block_settings {
131 #adminsearchquery {
132 max-width: 92%;
133 }
8903b17b 134}
496e46b1
SH
135
136// Styles for the search forums block.
137.block_search_forums {
138 #searchform_search {
139 width: auto;
140 max-width: 92%;
141 }
8903b17b
BB
142}
143
496e46b1 144// Styles for the Calendar Upcoming block.
ef7810de 145.block_calendar_upcoming {
ef7810de
AB
146 .content {
147 .date {
148 padding-left: 22px;
149 }
150 .footer {
496e46b1 151 margin-top: .5em;
ef7810de
AB
152 padding-top: 10px;
153 padding-left: 0px;
154 }
155 }
8903b17b 156}
ef7810de 157
496e46b1 158// Styles for the RSS client block.
fa5a1365 159.block_rss_client {
24b65a44
DM
160 .content li {
161 margin-bottom: 10px;
162 padding: 5px;
163 border: 1px solid #ddd;
164 .border-radius(@baseBorderRadius);
165 .link {
166 font-weight: inherit;
167 }
fa5a1365 168 }
24b65a44
DM
169 .list li:first-child {
170 border-top-width: 1px; // undo the style provided by the block's styles.css
fa5a1365 171 }
33f9a601 172}
8903b17b 173
496e46b1 174// Styles for the news items block.
cd578aa0
AB
175.block_news_items .content {
176 .newlink {
177 padding-bottom: 10px;
178 }
179 ul li {
180 border-top: 1px rgba(0,0,0,0.05) solid;
181 padding: 2px;
182 display: table;
183 width: 100%;
184 .info {
185 display: table-header-group;
186 }
187 .date {
188 font-size: @fontSizeSmall;
189 display: inline;
190 }
191 .name {
192 font-size: @fontSizeSmall;
193 padding-left: 1ex;
194 display: inline;
195 }
196 }
197 .footer {
198 padding-top: 10px;
199 padding-left: 0px;
200 }
33f9a601 201}
8903b17b 202
97080d53
ME
203// Overide for login block.
204.block_login {
205 input#login_username,
206 input#login_password {
207 width: 95%;
208 }
209 .content {
210 margin-left: auto;
211 margin-right: auto;
212 max-width: 280px;
213 }
214 input[type="submit"] {
215 margin: 10px 0;
216 }
217}
218
496e46b1
SH
219// Styles for the special "Add block" block shown while editing.
220.block_adminblock {
221 .content {
222 display: block;
223 padding: 3px 5px;
8903b17b 224 }
496e46b1
SH
225 select {
226 max-width: 92%;
8903b17b 227 }
496e46b1
SH
228}
229
230// RTL styles for blocks.
231.dir-rtl {
232
233 // RTL styles for blocks in general.
234 .block {
235 .header {
236 text-align:right;
237 h2 {
238 text-align:right;
239 }
240 .commands {
241 text-align: left;
242 > * {
243 margin-left:0;
244 margin-right:3px;
245 }
246 }
247 .block_action {
248 float: left;
249 }
250 }
8903b17b 251 }
496e46b1
SH
252
253 // LTR styles for the calendar upcoming block.
b549e66e
AB
254 .block_calendar_upcoming {
255 .content {
256 .date {
257 padding-right: 22px;
258 }
259 .footer {
260 padding-right: 0px;
261 }
262 }
263 }
496e46b1
SH
264
265 // RTL styles for the news items block.
b549e66e
AB
266 .block_news_items .content {
267 ul li {
268 .name {
269 padding-right: 1ex;
270 }
271 }
272 .footer {
273 padding-left: 0px;
274 }
275 }
8903b17b 276}