theme/boost/scss/moodle/blocks.scss

   1 .blockmovetarget .accesshide {
   2     position: relative;
   3     left: initial;
   4 }
   5
   6 .block:target {
   7     padding-top: 0 !important; /* stylelint-disable declaration-no-important */
   8     margin-top: 0 !important;
   9 }
  10
  11 .block_search_forums .searchform {
  12     /* Override plugin's default. */
  13     text-align: left;
  14 }
  15
  16 .block.block_navigation .block_tree ul,
  17 .block_settings .block_tree ul {
  18     margin-left: 0;
  19 }
  20
  21 .block .block-controls {
  22     .dropdown-toggle {
  23         /* So that the caret takes the colour of the icon. */
  24         color: $body-color;
  25     }
  26 }
  27
  28 $blocks-column-width: 360px !default;
  29
  30 [data-region="blocks-column"] {
  31     width: $blocks-column-width;
  32     float: right;
  33 }
  34
  35 $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
  36
  37 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
  38 #region-main-settings-menu {
  39     position: relative;
  40     float: left;
  41     width: 100%;
  42 }
  43 #region-main-settings-menu > div {
  44     position: absolute;
  45     right: 0;
  46     z-index: 100;
  47     margin: 1rem;
  48 }
  49 .region_main_settings_menu_proxy {
  50     width: 4rem;
  51     height: 2rem;
  52     background-color: $card-bg;
  53     margin-left: $card-spacer-x / 2;
  54     margin-bottom: $card-spacer-x / 2;
  55     border-bottom-left-radius: 0.5rem;
  56     float: right;
  57 }
  58
  59 // Required for IE11 to prevent blocks being pushed under the content.
  60 #region-main-settings-menu.has-blocks,
  61 #region-main.has-blocks {
  62     display: inline-block;
  63     width: calc(100% - #{$blocks-plus-gutter});
  64     @include media-breakpoint-down(lg) {
  65         width: 100%;
  66         /* MDL-63102 - Remove extra space at bottom.
  67         If modifying make sure block-region is horizontally stacked when in full screen */
  68         display: block;
  69     }
  70 }
  71
  72 [data-region="blocks-column"] {
  73     @include media-breakpoint-down(lg) {
  74         width: 100%;
  75     }
  76 }
  77
  78 $card-gutter : $card-deck-margin * 2;
  79
  80 .block .empty-placeholder-image-lg {
  81     height: 125px;
  82 }
  83
  84 .block .block-cards {
  85     .course-info-container {
  86         padding: 0.8rem;
  87     }
  88     .progress {
  89         height: 0.5rem;
  90     }
  91     .course-summaryitem {
  92         border: $border-width solid $border-color;
  93         background-color: $body-bg;
  94     }
  95     .icon {
  96         margin-right: 0;
  97         &.fa-star {
  98             color: $blue;
  99         }
 100     }
 101     .card .coursemenubtn {
 102         margin-top: -0.5rem;
 103     }
 104     a.coursename,
 105     .btn-link {
 106         color: inherit;
 107     }
 108     .btn.btn-link.btn-icon {
 109         height: 36px;
 110         width: 36px;
 111         padding: 0;
 112         border-radius: 50%;
 113
 114         @include hover-focus {
 115             background-color: $gray-200;
 116         }
 117     }
 118 }
 119
 120 .dashboard-card-deck.one-row {
 121     flex-flow: nowrap;
 122     overflow-y: scroll;
 123 }
 124
 125 .summaryimage {
 126     height: 7rem;
 127     width: 7rem;
 128     background-position: center;
 129     background-size: cover;
 130 }
 131
 132 .dashboard-card-deck .dashboard-card {
 133     margin-bottom: $card-gutter;
 134     flex-basis: 100%;
 135     flex-grow: 0;
 136     .dashboard-card-img {
 137         height: 7rem;
 138         background-position: center;
 139         background-size: cover;
 140     }
 141     .dashboard-card-footer {
 142         padding: 0.8rem;
 143     }
 144 }
 145
 146 .dashboard-card-deck {
 147     @include media-breakpoint-up(sm) {
 148         .dashboard-card {
 149             flex-basis: calc(50% - #{$card-gutter});
 150         }
 151     }
 152     @include media-breakpoint-up(md) {
 153         .dashboard-card {
 154             flex-basis: calc(33.33% - #{$card-gutter});
 155         }
 156     }
 157     @include media-breakpoint-up(lg) {
 158         .dashboard-card {
 159             flex-basis: calc(25% - #{$card-gutter});
 160         }
 161     }
 162     @include media-breakpoint-up(xl) {
 163         .dashboard-card {
 164             flex-basis: calc(20% - #{$card-gutter});
 165         }
 166     }
 167 }
 168
 169 #region-main.has-blocks {
 170     .dashboard-card-deck {
 171         @include media-breakpoint-up(lg) {
 172             .dashboard-card {
 173                 flex-basis: calc(33.33% - #{$card-gutter});
 174             }
 175         }
 176         @include media-breakpoint-up(xl) {
 177             .dashboard-card {
 178                 flex-basis: calc(25% - #{$card-gutter});
 179             }
 180         }
 181     }
 182 }
 183
 184 body.drawer-open-left #region-main.has-blocks {
 185     .dashboard-card-deck {
 186         @include media-breakpoint-up(lg) {
 187             .dashboard-card {
 188                 flex-basis: calc(33.33% - #{$card-gutter});
 189             }
 190         }
 191         @media (min-width: 1400px) {
 192             .dashboard-card {
 193                 flex-basis: calc(25% - #{$card-gutter});
 194             }
 195         }
 196     }
 197 }
 198
 199 @media (min-width: 1200px) {
 200     #block-region-side-pre {
 201         .dashboard-card-deck {
 202             margin: 0;
 203             .dashboard-card {
 204                 flex-basis: 100% !important;
 205                 margin-left: 0;
 206                 margin-right: 0;
 207             }
 208         }
 209     }
 210 }
 211
 212 .block_recentlyaccesseditems {
 213     img.icon {
 214         height: auto;
 215         width: auto;
 216         margin-right: 6px;
 217     }
 218 }
 219
 220 // Show expand collapse with font-awesome.
 221 .block_settings .block_tree [aria-expanded="true"],
 222 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 223 .block_settings .block_tree [aria-expanded="false"],
 224 .block_navigation .block_tree [aria-expanded="true"],
 225 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
 226 .block_navigation .block_tree [aria-expanded="false"] {
 227     background-image: none;
 228 }
 229 .block_settings .block_tree [aria-expanded="true"]:before,
 230 .block_navigation .block_tree [aria-expanded="true"]:before {
 231     content: $fa-var-angle-down;
 232     margin-right: 0;
 233     font-size: 16px;
 234     @extend .fa;
 235     width: 16px;
 236 }
 237
 238 .block_settings .block_tree [aria-expanded="false"]:before,
 239 .block_navigation .block_tree [aria-expanded="false"]:before {
 240     content: $fa-var-angle-right;
 241     font-size: 16px;
 242     margin-right: 0;
 243     @extend .fa;
 244     width: 16px;
 245 }
 246 .dir-rtl {
 247     .block_settings .block_tree [aria-expanded="false"]:before,
 248     .block_navigation .block_tree [aria-expanded="false"]:before {
 249         content: $fa-var-angle-left;
 250     }
 251 }
 252
 253 .block_navigation .block_tree p.hasicon,
 254 .block_settings .block_tree p.hasicon {
 255     text-indent: -3px;
 256
 257     .icon {
 258         margin-right: 2px;
 259     }
 260 }