theme/bootstrapbase/less/moodle/blocks.less

   1 // General block styles.
   2 .block {
   3     .well;
   4     padding: 8px 0;
   5
   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     }
  28     .content {
  29         padding: 4px 14px;
  30         word-wrap: break-word;
  31
  32         h3 {
  33             .nav-header;
  34             font-size: 1.1em;
  35         }
  36         hr {
  37             margin: 5px 0;
  38         }
  39         .userpicture {
  40             width: 16px;
  41             height: 16px;
  42             margin-right: 6px;
  43         }
  44         .list {
  45             li.listentry {
  46                 clear: both;
  47             }
  48             .c0 {
  49                 display: inline;
  50             }
  51             .c1 {
  52                 margin-left: 5px;
  53                 display: inline;
  54             }
  55         }
  56         p {
  57             &.hasicon {
  58                 img {
  59                     &.icon {
  60                         padding-right: 0;
  61                     }
  62                 }
  63             }
  64         }
  65     }
  66     .footer {
  67         margin-bottom: 4px;
  68         display: block;
  69         padding: 3px 5px;
  70     }
  71     &.beingmoved {
  72         border-width: 2px;
  73         border-style: dashed;
  74     }
  75     &.invisible {
  76         .header h2 {
  77             .opacity(50);
  78         }
  79     }
  80
  81     &.hidden .header .block_action {
  82         .block-hider-hide {
  83             display: none;
  84         }
  85         .block-hider-show {
  86             display: inline;
  87         }
  88     }
  89     &.list_block .unlist > li > .column {
  90         display: inline-block;
  91         .ie7-inline-block();
  92     }
  93 }
  94 .editing {
  95     .block {
  96         .header {
  97             .commands {
  98                 clear: both;
  99                 text-align: right;
 100                 display: block;
 101                 padding: 3px 15px;
 102
 103                 > a {
 104                     margin: 0 3px;
 105                 }
 106                 .icon img {
 107                     width: 12px;
 108                     height: 12px;
 109                 }
 110                 img.actionmenu {
 111                     width: auto;
 112                 }
 113             }
 114         }
 115     }
 116 }
 117
 118 // Hide the block content when the block has been minimised.
 119 .jsenabled .block.hidden .content {
 120     display: none;
 121 }
 122
 123 // Style the div used as a move target for non-drag+drop block moves.
 124 .blockmovetarget {
 125     border-width: 2px;
 126     border-style: dashed;
 127     display: block;
 128     height: 1em;
 129     margin-bottom: 20px;
 130 }
 131
 132 // Style the div that contains the cancel link for moving a block with JS disabled.
 133 .blockannotation {
 134     // Blocks have a bottom margin of 20px, to associate this link with the block being moved
 135     // we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
 136     position: relative;
 137     top: -10px;
 138     margin-bottom: 10px;
 139 }
 140
 141 // Styles for the blog menu block.
 142 .block_blog_menu #blogsearchquery {
 143     max-width: 92%;
 144 }
 145
 146 // Styles for the admin block.
 147 .block_settings {
 148     #adminsearchquery {
 149         max-width: 92%;
 150     }
 151 }
 152
 153 // Styles for the search forums block.
 154 .block_search_forums {
 155     #searchform_search {
 156         width: auto;
 157         max-width: 92%;
 158     }
 159 }
 160
 161 // Styles for the Calendar Upcoming block.
 162 .block_calendar_upcoming {
 163     .content {
 164         .date {
 165             padding-left: 22px;
 166         }
 167         .footer {
 168             margin-top: .5em;
 169             padding-top: 10px;
 170             padding-left: 0;
 171         }
 172     }
 173 }
 174
 175 // Styles for the RSS client block.
 176 .block_rss_client {
 177     .content li {
 178         margin-bottom: 10px;
 179         padding: 5px;
 180         border: 1px solid @tableBorder;
 181         .border-radius(@baseBorderRadius);
 182         .link {
 183             font-weight: inherit;
 184         }
 185     }
 186     .list li:first-child {
 187         border-top-width: 1px; // undo the style provided by the block's styles.css
 188     }
 189 }
 190
 191 // Styles for the news items block.
 192 .block_news_items .content {
 193     .newlink {
 194         padding-bottom: 10px;
 195     }
 196     ul li {
 197         border-top: 1px rgba(0, 0, 0, 0.05) solid;
 198         padding: 2px;
 199         display: table;
 200         width: 100%;
 201         .info {
 202             display: table-header-group;
 203         }
 204         .date {
 205             font-size: @fontSizeSmall;
 206             display: inline;
 207         }
 208         .name {
 209             font-size: @fontSizeSmall;
 210             padding-left: 1ex;
 211             display: inline;
 212         }
 213     }
 214     .footer {
 215         padding-top: 10px;
 216         padding-left: 0;
 217     }
 218 }
 219
 220 // Overide for login block.
 221 .block_login {
 222     input#login_username,
 223     input#login_password {
 224         width: 95%;
 225     }
 226     .content {
 227         margin-left: auto;
 228         margin-right: auto;
 229         max-width: 280px;
 230     }
 231     input[type="submit"] {
 232         margin: 10px 0;
 233     }
 234 }
 235
 236 // Styles for the special "Add block" block shown while editing.
 237 .block_adminblock {
 238     .content {
 239         display: block;
 240         margin: 0 10px;
 241         padding: 3px 5px;
 242         width: auto;
 243     }
 244     .singleselect {
 245         display: block;
 246         select.singleselect {
 247             display: block;
 248             width: 100%;
 249         }
 250     }
 251 }
 252
 253 @chart-size: 70px;
 254 @doughnut-border-size: 15px;
 255 @doughnut-dasharray: 173;
 256 @doughnut-empty-colour: @grayLighter;
 257 @doughnut-fill-colour: @orange;
 258
 259 .generate-percents(@i: 1) when (@i =< 100) {
 260     &.percent-@{i} {
 261         stroke-dashoffset: @doughnut-dasharray - (@i / 100 * @doughnut-dasharray);
 262     }
 263
 264     .generate-percents((@i + 1));
 265 }
 266
 267 .progress-chart-container {
 268     height: @chart-size;
 269     width: @chart-size;
 270
 271     .progress-doughnut {
 272         position: relative;
 273         height: @chart-size;
 274         width: @chart-size;
 275         background-clip: padding-box;
 276         border: @doughnut-border-size solid @doughnut-empty-colour;
 277         border-radius: 50%;
 278         box-sizing: border-box;
 279
 280         .progress-text {
 281             position: absolute;
 282             top: 50%;
 283             /*rtl:ignore*/
 284             left: 50%;
 285             transform: translate(-50%, -50%);
 286             color: @doughnut-empty-colour;
 287
 288             &.has-percent {
 289                 color: @doughnut-fill-colour;
 290             }
 291         }
 292
 293         .progress-indicator {
 294             position: absolute;
 295             top: (@doughnut-border-size * -1);
 296             left: (@doughnut-border-size * -1);
 297             height: @chart-size;
 298             width: @chart-size;
 299
 300             svg {
 301                 position: relative;
 302                 height: 100%;
 303                 width: 100%;
 304
 305                 .circle {
 306                     stroke-width: @doughnut-border-size;
 307                     stroke: @doughnut-fill-colour;
 308                     fill: none;
 309                     stroke-dasharray: @doughnut-dasharray;
 310                     stroke-dashoffset: @doughnut-dasharray;
 311                     transform: rotate(-90deg);
 312                     transform-origin: center center;
 313
 314                     .generate-percents();
 315                 }
 316             }
 317         }
 318     }
 319
 320     .no-progress {
 321         height: @chart-size;
 322         width: @chart-size;
 323         background-color: @doughnut-empty-colour;
 324         border-radius: 50%;
 325         position: relative;
 326
 327         .icon,
 328         .smallicon {
 329             position: absolute;
 330             top: 50%;
 331             /*rtl:ignore*/
 332             left: 50%;
 333             margin: 0;
 334             padding: 0;
 335             transform: translate(-45%, -45%);
 336             color: #fff;
 337             height: (@chart-size / 2);
 338             width: (@chart-size / 2);
 339         }
 340     }
 341 }
 342
 343 .block_starredcourses,
 344 .block_myoverview {
 345
 346     .empty-placeholder-image-lg {
 347         height: 125px;
 348     }
 349     .course-info-container {
 350         flex: 1 1 auto;
 351         padding: 0.8rem;
 352     }
 353     .dashboard-card-footer {
 354         padding: 0.8rem;
 355         background-color: @wellBackground;
 356         border-top: 1px solid darken(@wellBackground, 7%);
 357         .border-bottom-radius(@baseBorderRadius);
 358     }
 359     .progress {
 360         height: 0.5rem;
 361         margin-bottom: 0;
 362     }
 363     .list-group {
 364         margin: 0;
 365     }
 366     .course-listitem {
 367         display: block;
 368         padding: 0.75rem 1.25rem;
 369         margin-bottom: 0.5rem;
 370         background-color: @white;
 371         border: 1px solid @tableBorder;
 372         .border-radius(@baseBorderRadius);
 373     }
 374     .course-summaryitem {
 375         padding: 0.5rem;
 376         background-color: @white;
 377         border: 1px solid @tableBorder;
 378         .border-radius(@baseBorderRadius);
 379     }
 380     .summary img {
 381         max-width: 100%;
 382     }
 383
 384     @media (max-width: 576px) {
 385         .summaryimage {
 386             max-height: 7rem;
 387         }
 388     }
 389 }
 390
 391 .block_starredcourses {
 392     .dashboard-card-deck {
 393         flex-flow: nowrap;
 394         overflow-y: scroll;
 395     }
 396 }
 397
 398 .dashboard-card-deck {
 399     box-sizing: border-box;
 400     *,
 401     *::before,
 402     *::after {
 403         box-sizing: border-box;
 404     }
 405     display: flex;
 406     flex-flow: row wrap;
 407     margin-right: -.25rem;
 408     margin-left: -.25rem;
 409
 410     .dashboard-card {
 411         .border-radius(@baseBorderRadius);
 412         margin-bottom: 0.5rem;
 413         flex-grow: 0;
 414         flex-shrink: 0;
 415         min-width: 0;
 416         flex-basis: 100%;
 417     }
 418     @media (min-width: 576px) {
 419         .dashboard-card {
 420             display: flex;
 421             flex-direction: column;
 422             margin-right: 0.25rem;
 423             margin-left: 0.25rem;
 424             flex-basis: ~"calc(50% - 0.6rem)";
 425         }
 426     }
 427
 428     @media (min-width: 1200px) {
 429         .dashboard-card {
 430             flex-basis: ~"calc(33.333% - 0.5rem)";
 431         }
 432     }
 433 }
 434
 435 @media (min-width: 768px) {
 436     #block-region-side-post .dashboard-card-deck {
 437         margin: 0;
 438         .dashboard-card {
 439             flex-basis: 100%;
 440             margin-left: 0;
 441             margin-right: 0;
 442         }
 443     }
 444 }
 445
 446 .dashboard-card-img {
 447     height: 7rem;
 448     background-position: center;
 449     background-size: cover;
 450     .border-top-radius(@baseBorderRadius);
 451 }
 452
 453 .summaryimage {
 454     height: 7rem;
 455     background-position: center;
 456     background-size: cover;
 457 }
 458
 459 .position-absolute {
 460     position: absolute;
 461 }