github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/doc/themes/docsy/assets/scss/_boxes.scss (about)

     1  // Boxes on the home page and similar.
     2  .td-box {}
     3  
     4  // box-variant creates the main style for a colored section used on the site.
     5  @mixin box-variant($parent, $color-name, $color-value) {
     6      $text-color: color-yiq($color-value);
     7      $link-color: mix($blue, $text-color, lightness($color-value));
     8      $link-hover-color: rgba($link-color, 0.5) !default;
     9  
    10      #{$parent} {
    11          &--#{$color-name} {
    12              color: $text-color;
    13              background-color: #{$color-value};
    14  
    15              .td-arrow-down {
    16                  &::before {
    17                      left: 50%;
    18                      margin-left: -30px;
    19                      bottom: -25px;
    20                      border: {
    21                          style: solid;
    22                          width: 25px 30px 0 30px;
    23                          color: #{$color-value} transparent transparent transparent;
    24                      };
    25                      z-index: 3;
    26                      position: absolute;
    27                      content: "";
    28                  }
    29              }
    30          }
    31      }
    32  
    33      // Improve contrast for the links in paragraphs.
    34      @include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
    35  
    36      @if $enable-gradients {
    37          @include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value,true);
    38      }
    39  }
    40  
    41  // Common min-height modifiers used for boxes.
    42  @mixin td-box-height-modifiers($parent) {
    43      #{$parent} {
    44          &--height-auto {}
    45  
    46          &--height-min {
    47              min-height: 300px;
    48          }
    49  
    50          &--height-med {
    51              min-height: 400px;
    52          }
    53  
    54          &--height-max {
    55              min-height: 500px;
    56          }
    57  
    58          &--height-full {
    59              min-height: 100vh;
    60          }
    61  
    62          @include media-breakpoint-up(md) {
    63              &--height-min {
    64                  min-height: 450px;
    65              }
    66  
    67              &--height-med {
    68                  min-height: 500px;
    69              }
    70  
    71              &--height-max {
    72                  min-height: 650px;
    73              }
    74          }
    75      }
    76  }
    77  
    78  @include td-box-height-modifiers(".td-box");
    79  
    80  // Styling for section boxes
    81  .td-box {
    82    .row.section {
    83         padding-left: 5vw;
    84         padding-right: 5vw;
    85         flex-direction: column;
    86  
    87         > table {
    88          @extend .table-striped;
    89  
    90          @extend .table-responsive;
    91  
    92          @extend .table;
    93         }
    94     }
    95  
    96    .row {
    97         padding-left: 5vw;
    98         padding-right: 5vw;
    99         flex-direction: row;
   100    }
   101  }
   102  // Styling for community page link boxes
   103  
   104  .td-box.linkbox {
   105     padding: 5vh 5vw;
   106  }
   107  
   108  // This allows "painting by numbers"
   109  @for $i from 1 through length($td-box-colors) {
   110      $c: nth($td-box-colors, $i);
   111      $name: $i - 1;
   112  
   113      @include box-variant(".td-box", $name, $c);
   114  }
   115  
   116  // Same as above with all the theme color names.
   117  @each $color, $value in $colors {
   118      @include box-variant(".td-box", $color, $value);
   119  }
   120  
   121  @each $color, $value in $theme-colors {
   122      @include box-variant(".td-box", $color, $value);
   123  }
   124  
   125  @each $color, $value in $grays {
   126      @include box-variant(".td-box", $color, $value);
   127  }