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