Admin Control Panel v2.0

✎ Editing: _block.scss ← Back

//
// Blocks
// --------------------------------------------------

.block {
  margin-bottom: $space-base;
  background-color: $white;
  box-shadow: 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5), 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5);

& &,
  .content-side & {
    box-shadow: none;
  }
}

.block-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: .875rem $space-block;
  transition: opacity .2s ease-out;

&.block-header-rtl {
    flex-direction: row-reverse;

.block-title {
      text-align: right;
    }

.block-options {
      padding-right: $space-block;
      padding-left: 0;
    }
  }

&-default {
    background-color: $body-bg-light;
  }
}

.block-title {
  flex: 1 1 auto;
  min-height: 1.75rem;
  margin: 0;
  font-size: 1rem;
  font-weight: $font-weight-medium;
  line-height: 1.75;

small {
    font-size: .875rem;
    font-weight: $font-weight-normal;
    line-height: 1.375rem;
    opacity: .75;
  }
}

.block-content {
  transition: opacity .2s ease-out;
  @include content-layout($space-block, $space-block);

&.block-content-sm {
    padding-top: ($space-block * .5);

.pull-t,
    .pull-t-b,
    .pull-all {
      margin-top: -($space-block * .5);
    }

&.block-content-full {
      padding-bottom: ($space-block * .5);

.pull-b,
      .pull-y,
      .pull {
        margin-bottom: -($space-block * .5);
      }
    }
  }
}

// Block Variations
.block {
  &.block-bordered {
    border: 1px solid $body-bg-dark;
    box-shadow: none;
  }

&.block-rounded {
    border-radius: .875rem 1rem;

> .block-header,
    > .nav-tabs {
      border-top-right-radius: .875rem 1rem;
      border-top-left-radius: .875rem 1rem;

&:last-child {
        border-bottom-right-radius: .875rem 1rem;
        border-bottom-left-radius: .875rem 1rem;
      }
    }

&.block-mode-hidden > .block-header.block-header-default {
      border-bottom-right-radius: .875rem 1rem;
      border-bottom-left-radius: .875rem 1rem;
    }

> .block-content {
      &:first-child {
        border-top-right-radius: .875rem 1rem;
        border-top-left-radius: .875rem 1rem;
      }

&:last-child {
        border-bottom-right-radius: .875rem 1rem;
        border-bottom-left-radius: .875rem 1rem;
      }
    }
  }

&.block-themed > .block-header {
    border-bottom: none;
    color: $white;
    background-color: $primary;

> .block-title {
      color: rgba($white, .9);

small {
        color: rgba($white, .7);
      }
    }
  }

&.block-transparent {
    background-color: transparent;
    box-shadow: none;
  }
}

// Block Modes
.block {
  &.block-mode-hidden {
    &.block-bordered > .block-header {
      border-bottom: none;
    }

> .block-content {
      display: none;
    }
  }

&.block-mode-loading {
    position: relative;
    overflow: hidden;

&::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      z-index: 9;
      content: " ";
      background-color: rgba($white, .85);
    }

&::after {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -1.5rem 0 0 -1.5rem;
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      color: $primary-dark;
      font-family: Simple-Line-Icons;
      font-size: 1.125rem;
      text-align: center;
      z-index: 10;
      content: '\e09a';
      animation: fa-spin 1.75s infinite linear;
      border-radius: 1.5rem;
      box-shadow: 0 0 1rem 1rem rgba($primary-dark, .05);
    }

&.block-mode-hidden::after {
      margin: -1rem 0 0 -1rem;
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      box-shadow: 0 0 .5rem .5rem rgba($primary-dark, .05);
    }

&.block-mode-loading-dark {
      &::before {
        background-color: rgba($black, .85);
      }

&::after {
        color: $white;
        box-shadow: 0 0 1rem 1rem rgba($white,.5);
      }
    }

&.block-mode-loading-location::after {
      content: '\e06e';
    }

&.block-mode-loading-energy::after {
      content: '\e020';
    }

&.block-mode-loading-refresh::after {
      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
      font-weight: 900;
      content: '\f021';
    }

&.block-mode-loading-sun::after {
      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
      font-weight: 900;
      content: '\f185';
    }

&.block-mode-loading-repeat::after {
      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
      font-weight: 900;
      content: '\f01e';
    }
  }

&.block-mode-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-block-fullscreen;
    margin-bottom: 0;
    overflow-y: auto;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;

&.block-bordered {
      border: none;
    }

&.block-rounded {
      border-radius: 0;
    }

&.block-transparent {
      background-color: $white;
    }
  }

&.block-mode-pinned {
    position: fixed;
    right: .75rem;
    bottom: 0;
    margin-bottom: 0 !important;
    width: 100%;
    max-width: 300px;
    z-index: $zindex-block-pinned;
    box-shadow: 0 0 30px rgba($black, .1);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

&:last-child {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

> .block-content {
      max-height: 250px;
      overflow-y: auto;
    }

@include media-breakpoint-up(sm) {
      max-width: 400px;
    }
  }
}

// Block Links
a.block {
  display: block;
  color: $body-color;
  font-weight: normal;
  transition: all .12s ease-out;

&:hover {
    color: $body-color;
    opacity: .65;
  }

&:active {
    opacity: 1;
  }

&.block-link-rotate {
    &:hover {
      transform: rotate(1deg);
      opacity: 1;
    }

&:active {
      transform: rotate(0deg);
    }
  }

&.block-link-pop {
    &:hover {
      box-shadow: 0 .125rem 2rem darken($body-bg, 8%);
      transform: translateY(-3px);
      opacity: 1;
    }

&:active {
      box-shadow: 0 .125rem .625rem darken($body-bg, 1%);
      transform: translateY(0);
    }
  }

&.block-link-shadow {
    &:hover {
      box-shadow: 0 0 2.125rem darken($body-bg, 8%);
      opacity: 1;
    }

&:active {
      box-shadow: 0 0 .625rem darken($body-bg, 4%);
    }
  }
}

// Block Effects
.block {
  &.block-fx-rotate {
    transform: rotate(1deg);
    opacity: 1;
  }

&.block-fx-pop {
    box-shadow: 0 .125rem 1rem darken($body-bg, 8%);
    transform: translateY(-3px);
    opacity: 1;
  }

&.block-fx-shadow {
    box-shadow: 0 0 2.125rem darken($body-bg, 8%);
    opacity: 1;
  }
}

// Block Options
.block-options {
  flex: 0 0 auto;
  padding-left: $space-block;

.block-options-item {
    padding: 0 .25rem;
    line-height: 1.2;

.block.block-themed > .block-header & {
      color: $white;
    }
  }

.block-options-item,
  .dropdown {
    display: inline-block;
  }
}

.block-sticky-options {
  position: relative;

.block-options {
    position: absolute;
    top: .875rem;
    right: $space-block;

&.block-options-left {
      right: auto;
      left: $space-block;
      padding-right: .625rem;
      padding-left: 0;
    }
  }
}

.btn-block-option {
  display: inline-block;
  padding: .375rem .25rem;
  line-height: 1;
  color: $gray-600;
  background: none;
  border: none;
  cursor: pointer;

&.dropdown-toggle:after {
    position: relative;
    top: 2px;
  }

.si {
    position: relative;
    top: 1px;
  }

&:hover {
    text-decoration: none;
    color: $gray-900;
  }

@at-root {
    a#{&}:focus,
    .active > a#{&},
    .show > button#{&} {
      text-decoration: none;
      color: $gray-900;
    }
  }

&:focus {
    outline: none !important;
    color: $black;
  }

&:active {
    color: $gray-600;
  }

.block.block-themed & {
    color: $white;
    opacity: .7;

&:hover {
      color: $white;
      opacity: 1;
    }

@at-root {
      a#{&}:focus,
      .active > a#{&},
      .show > button#{&} {
        color: $white;
        opacity: 1;
      }
    }

&:focus {
      color: $white;
      opacity: 1;
    }

&:active {
      color: $white;
      opacity: .6;
    }
  }
}

Cancel