site

personal website, served at mordaunt.dev/site
Log | Files | Refs

_tabs.scss (1262B)

      1 .tabs {
      2   display: flex;
      3   flex-wrap: wrap;
      4   margin: 2rem 0 2rem 0;
      5   position: relative;
      6 
      7   &.tabs-left {
      8     justify-content: flex-start;
      9 
     10     label.tab-label {
     11       margin-right: 0.5rem;
     12     }
     13 
     14     .tab-content {
     15       border-radius: 0px 4px 4px 4px;
     16     }
     17   }
     18 
     19   &.tabs-right {
     20     justify-content: flex-end;
     21 
     22     label.tab-label {
     23       margin-left: 0.5rem;
     24     }
     25 
     26     .tab-content {
     27       border-radius: 4px 0px 4px 4px;
     28     }
     29   }
     30 
     31   input.tab-input {
     32     display: none;
     33   }
     34 
     35   label.tab-label {
     36     background-color: $alt-bg-color;
     37     border-color: $darker-alt-bg-color;
     38     border-radius: 4px 4px 0px 0px;
     39 
     40     border-style: solid;
     41     border-bottom-style: hidden;
     42 
     43     border-width: 1px;
     44     cursor: pointer;
     45     display: inline-block;
     46     order: 1;
     47     padding: 0.3rem 0.6rem;
     48     position: relative;
     49     top: 1px;
     50     user-select: none;
     51   }
     52 
     53   input.tab-input:checked + label.tab-label {
     54     background-color: $bg-color;
     55   }
     56 
     57   .tab-content {
     58     background-color: $bg-color;
     59     border-color: $darker-alt-bg-color;
     60     border-style: solid;
     61     border-width: 1px;
     62     display: none;
     63     order: 2;
     64     padding: 1rem;
     65     width: 100%;
     66   }
     67 
     68   &.tabs-code {
     69     .tab-content {
     70       padding: 0.5rem;
     71 
     72       pre {
     73         margin: 0;
     74       }
     75     }
     76   }
     77 }