eslint/docs/src/assets/scss/components/rules.scss

   1 .rule-categories {
   2     display: grid;
   3     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   4     gap: 0;
   5     margin-bottom: 3rem;
   6     background-color: var(--lightest-background-color);
   7     border: 1px solid var(--divider-color);
   8     border-radius: var(--border-radius);
   9
  10     .rule-category {
  11         margin: 0;
  12         padding: 1rem;
  13         background: none;
  14         border: none;
  15
  16         @media screen and (min-width:768px){
  17             &:not(:first-child)::after {
  18                 content: "";
  19                 display: block;
  20                 padding: 1px;
  21                 border-left: 1px solid var(--divider-color);
  22                 left: 0px;
  23             }
  24         }
  25
  26         @media screen and (min-width:768px) and (max-width:1023px), screen and (min-width:1440px){
  27             &:not(:first-child)::after {
  28                 height: 70%;
  29                 position: absolute;
  30             }
  31         }
  32
  33         @media screen and (min-width:1024px) and (max-width:1439px){
  34             &:nth-child(2)::after {
  35                 height: 70%;
  36                 position: absolute;
  37             }
  38         }
  39     }
  40
  41     .rule-category__description {
  42         flex: 1 1 45ch;
  43     }
  44 }
  45
  46 .rule-category {
  47     font-size: var(--step--1);
  48     display: flex;
  49     position: relative;
  50     flex-wrap: wrap;
  51     align-items: flex-start;
  52     gap: 1rem;
  53     padding: 1rem;
  54     margin: 1.5rem 0;
  55     border-radius: var(--border-radius);
  56     border: 1px solid var(--divider-color);
  57     background-color: var(--lightest-background-color);
  58
  59     p {
  60         margin: 0;
  61     }
  62
  63     .rule-category__description {
  64         flex: 1 1 30ch;
  65     }
  66 }
  67
  68 .rule {
  69     border-radius: var(--border-radius);
  70     background-color: var(--lightest-background-color);
  71     display: flex;
  72     flex-wrap: wrap;
  73     align-items: center;
  74     gap: 1rem;
  75     padding: 1rem;
  76     margin: .5rem 0;
  77     position: relative;
  78
  79     p:last-of-type {
  80         margin: 0;
  81     }
  82 }
  83
  84 .rule--deprecated,
  85 .rule--removed {
  86     // opacity: .5;
  87 }
  88
  89 .rule__content {
  90     flex: 1 1 35ch;
  91 }
  92
  93 .rule__name {
  94     font-weight: 500;
  95     font-size: .875rem;
  96     margin-bottom: .25rem;
  97     margin-block-end: .25rem;
  98 }
  99
 100 a.rule__name {
 101     text-decoration: none;
 102
 103     &:hover {
 104         text-decoration: underline;
 105     }
 106
 107     &::after {
 108         position: absolute;
 109         content: "";
 110         width: 100%;
 111         height: 100%;
 112         top: 0;
 113         offset-block-start: 0;
 114         left: 0;
 115         offset-inline-start: 0;
 116     }
 117 }
 118
 119 .rule__description {
 120     font-size: var(--step--1);
 121 }
 122
 123 .rule__categories {
 124     font-size: .875rem;
 125     display: flex;
 126     align-items: center;
 127     gap: 1rem;
 128     border-radius: var(--border-radius);
 129     padding: 2px 4px;
 130
 131     p {
 132         display: inline-flex;
 133         margin: 0;
 134         align-items: center;
 135     }
 136
 137     [data-theme="dark"] & {
 138         background: var(--body-background-color);
 139     }
 140 }
 141
 142 .rule__status {
 143     color: var(--color-rose-500);
 144     background: var(--color-rose-50);
 145     border-radius: var(--border-radius);
 146     display: inline-block;
 147     font-weight: normal;
 148     margin-left: .5rem;
 149     margin-inline-start: .5rem;
 150     font-size: var(--step--1);
 151     padding: 0 .5rem;
 152
 153     [data-theme="dark"] & {
 154         background: var(--body-background-color);
 155     }
 156 }
 157
 158 .rule__categories__type {
 159     &[aria-hidden="true"] {
 160         opacity: .25;
 161     }
 162 }
 163
 164 /* related rules */
 165
 166 .related-rules__list {
 167     display: flex;
 168     gap: .5rem;
 169     flex-wrap: wrap;
 170     justify-content: start;
 171 }
 172
 173 .related-rules__list__item {
 174
 175     svg {
 176         color: inherit;
 177     }
 178
 179     a {
 180         text-decoration: none;
 181         color: var(--headings-color);
 182         padding: .625rem;
 183         display: inline-flex;
 184         gap: .5rem;
 185         align-items: center;
 186         border: 1px solid var(--divider-color);
 187         border-radius: var(--border-radius);
 188         background-color: var(--lightest-background-color);
 189
 190         &:hover {
 191             color: var(--link-color);
 192             background-color: var(--lighter-background-color);
 193         }
 194     }
 195 }
 196
 197 a.rule-list-item+a.rule-list-item::before {
 198     content: ",";
 199     display: inline-block;
 200     margin-left: 5px;
 201     margin-right: 5px;
 202 }