scss visibility_04.scss

Posted 2021-05-17

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.table {
  display: table !important;
}

.table-row {
  display: table-row !important;
}

.table-cell {
  display: table-cell !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.grid {
  display: grid !important;
}

.hide {
  display: none !important;
}

@include breakpoint(xs) {
  .block--xs {
    display: block !important;
  }
  
  .inline-block--xs {
    display: inline-block !important;
  }
  
  .inline--xs {
    display: inline !important;
  }
  
  .table--xs {
    display: table !important;
  }
  
  .table-row--xs {
    display: table-row !important;
  }
  
  .table-cell--xs {
    display: table-cell !important;
  }
  
  .flex--xs {
    display: flex !important;
  }
  
  .inline-flex--xs {
    display: inline-flex !important;
  }
  
  .grid--xs {
    display: grid !important;
  }
  
  .hide--xs {
    display: none !important;
  }
}

@include breakpoint(sm) {
  .block--sm {
    display: block !important;
  }
  
  .inline-block--sm {
    display: inline-block !important;
  }
  
  .inline--sm {
    display: inline !important;
  }
  
  .table--sm {
    display: table !important;
  }
  
  .table-row--sm {
    display: table-row !important;
  }
  
  .table-cell--sm {
    display: table-cell !important;
  }
  
  .flex--sm {
    display: flex !important;
  }
  
  .inline-flex--sm {
    display: inline-flex !important;
  }
  
  .grid--sm {
    display: grid !important;
  }
  
  .hide--sm {
    display: none !important;
  }
}

@include breakpoint(md) {
  .block--md {
    display: block !important;
  }
  
  .inline-block--md {
    display: inline-block !important;
  }
  
  .inline--md {
    display: inline !important;
  }
  
  .table--md {
    display: table !important;
  }
  
  .table-row--md {
    display: table-row !important;
  }
  
  .table-cell--md {
    display: table-cell !important;
  }
  
  .flex--md {
    display: flex !important;
  }
  
  .inline-flex--md {
    display: inline-flex !important;
  }
  
  .grid--md {
    display: grid !important;
  }
  
  .hide--md {
    display: none !important;
  }
}

@include breakpoint(lg) {
  .block--lg {
    display: block !important;
  }
  
  .inline-block--lg {
    display: inline-block !important;
  }
  
  .inline--lg {
    display: inline !important;
  }
  
  .table--lg {
    display: table !important;
  }
  
  .table-row--lg {
    display: table-row !important;
  }
  
  .table-cell--lg {
    display: table-cell !important;
  }
  
  .flex--lg {
    display: flex !important;
  }
  
  .inline-flex--lg {
    display: inline-flex !important;
  }
  
  .grid--lg {
    display: grid !important;
  }
  
  .hide--lg {
    display: none !important;
  }
}

@include breakpoint(xl) {
  .block--xl {
    display: block !important;
  }
  
  .inline-block--xl {
    display: inline-block !important;
  }
  
  .inline--xl {
    display: inline !important;
  }
  
  .table--xl {
    display: table !important;
  }
  
  .table-row--xl {
    display: table-row !important;
  }
  
  .table-cell--xl {
    display: table-cell !important;
  }
  
  .flex--xl {
    display: flex !important;
  }
  
  .inline-flex--xl {
    display: inline-flex !important;
  }
  
  .grid--xl {
    display: grid !important;
  }
  
  .hide--xl {
    display: none !important;
  }
}