MDL-55402 theme_noname: Convert bootstrapbase to bs4
[moodle.git] / theme / noname / scss / moodle / blocks.scss
1 // General block styles.
2 .block {
3     @extend .card;
4     padding: 8px 0;
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;
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     }
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;
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     }
109 // Hide the block content when the block has been minimised.
110 .jsenabled .block.hidden .content {
111     display: none;
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;
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;
132 // Styles for the blog menu block.
133 .block_blog_menu #blogsearchquery {
134     max-width: 92%;
137 // Styles for the admin block.
138 .block_settings {
139     #adminsearchquery {
140         max-width: 92%;
141     }
144 // Styles for the search forums block.
145 .block_search_forums {
146     #searchform_search {
147         width: auto;
148         max-width: 92%;
149     }
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     }
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     }
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     }
211 .block_navigation .block_tree ul {
212     margin: 0px;
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     }
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     }