theme/bootstrapbase/less/moodle/bs4-compat.less

   1
   2 // Add support for card. We map it to well.
   3 // This is not meant to be perfect - but at least applies some styles to a bs4 card.
   4 .card:extend(.well) {
   5     /* stylelint-disable-line no-empty-source */
   6 }
   7
   8 // Padding and margin utitilies.
   9 .padding-margin(3);
  10
  11 .padding-margin(@n, @i : 1) when (@i =< @n) {
  12     @amount: @i * @baseFontSize;
  13     .p-l-@{i} {
  14         padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
  15     }
  16     .p-r-@{i} {
  17         padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
  18     }
  19     .p-t-@{i} {
  20         padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
  21     }
  22     .p-b-@{i} {
  23         padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
  24     }
  25     .p-x-@{i} {
  26         padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
  27         padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
  28     }
  29     .p-y-@{i} {
  30         padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
  31         padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
  32     }
  33     .p-a-@{i} {
  34         padding: @amount !important; /* stylelint-disable-line declaration-no-important */
  35     }
  36
  37     .m-l-@{i} {
  38         margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
  39     }
  40     .m-r-@{i} {
  41         margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
  42     }
  43     .m-t-@{i} {
  44         margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
  45     }
  46     .m-b-@{i} {
  47         margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
  48     }
  49     .m-x-@{i} {
  50         margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
  51         margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
  52     }
  53     .m-y-@{i} {
  54         margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
  55         margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
  56     }
  57     .m-a-@{i} {
  58         margin: @amount !important; /* stylelint-disable-line declaration-no-important */
  59     }
  60     .padding-margin(@n, (@i + 1));
  61 }
  62
  63 .d-inline {
  64     display: inline !important; /* stylelint-disable-line declaration-no-important */
  65 }
  66 .d-block {
  67     display: block !important; /* stylelint-disable-line declaration-no-important */
  68 }
  69 .d-inline-block {
  70     display: inline-block !important; /* stylelint-disable-line declaration-no-important */
  71 }
  72
  73 // Horizontal centering.
  74 .m-x-auto {
  75     margin-left: auto !important; /* stylelint-disable-line declaration-no-important */
  76     margin-right: auto !important; /* stylelint-disable-line declaration-no-important */
  77 }
  78
  79 // Support img-fluid.
  80 .img-fluid:extend(.img-responsive) {
  81     /* stylelint-disable-line no-empty-source */
  82 }
  83
  84 // Text danger
  85 .text-danger:extend(.text-error) {
  86     /* stylelint-disable-line no-empty-source */
  87 }
  88
  89 .btn-secondary {
  90     background-color: @white;
  91     background-image: none;
  92     color: @black;
  93 }
  94
  95 // Tags
  96 .tag:extend(.label) {
  97     // Important (red)
  98     &-danger {
  99         background-color: @errorText;
 100     }
 101     &-danger[href] {
 102         background-color: darken(@errorText, 10%);
 103     }
 104     // Warnings (orange)
 105     &-warning {
 106         background-color: @orange;
 107     }
 108     &-warning[href] {
 109         background-color: darken(@orange, 10%);
 110     }
 111     // Success (green)
 112     &-success {
 113         background-color: @successText;
 114     }
 115     &-success[href] {
 116         background-color: darken(@successText, 10%);
 117     }
 118     // Info (turquoise)
 119     &-info {
 120         background-color: @infoText;
 121     }
 122     &-info[href] {
 123         background-color: darken(@infoText, 10%);
 124     }
 125     // Primary (blue)
 126     &-primary {
 127         background-color: @blue;
 128     }
 129     &-primary[href] {
 130         background-color: darken(@blue, 10%);
 131     }
 132 }
 133
 134 // Floats
 135 .pull-xs-left:extend(.pull-left) {
 136     /* stylelint-disable-line no-empty-source */
 137 }
 138
 139 .pull-xs-right:extend(.pull-right) {
 140     /* stylelint-disable-line no-empty-source */
 141 }
 142
 143 .text-nowrap {
 144     white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */
 145 }