dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

ThreadList.module.scss (1128B)

      1 @use 'core/vars';
      2 @use 'core/typography';
      3 @use 'core/colors';
      4 @use 'core/elevate';
      5 
      6 .threads {
      7   display: flex;
      8   flex-direction: column;
      9   width: 100%;
     10   gap: vars.$gap;
     11   margin-bottom: vars.$gap;
     12 }
     13 
     14 .thread {
     15   display: flex;
     16   flex-direction: column;
     17   align-items: flex-start;
     18   width: 100%;
     19   padding: 0.5rem;
     20   cursor: pointer;
     21   user-select: none;
     22 
     23   a {
     24     color: inherit;
     25     font-weight: bold;
     26   }
     27 
     28   &:hover {
     29     @include colors.apply-themes() using ($theme) {
     30       @include elevate.apply-background-color($theme, 2, 'on-surface');
     31       @include elevate.apply-box-shadow(2);
     32     }
     33   }
     34 
     35   @include colors.apply-themes() using ($theme) {
     36     border: 1px solid colors.get($theme, 'outline');
     37     background: colors.get($theme, 'background');
     38     border-radius: 0.5rem;
     39   }
     40 
     41   .title {
     42     display: block;
     43     padding: 0.5rem;
     44     @include typography.apply('title-large');
     45   }
     46 
     47   .meta {
     48     padding: 0.25rem 0.5rem;
     49     @include typography.apply('body-small');
     50 
     51     a:hover {
     52       text-decoration: underline;
     53     }
     54   }
     55 
     56   .preview {
     57     padding: 0.25rem 0.5rem;
     58     @include typography.apply('body-medium');
     59   }
     60 }