site

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

_notices.scss (1896B)

      1 .notice {
      2   border-radius: 0.2rem;
      3   position: relative;
      4   margin: 2rem 0;
      5   padding: 0 0.75rem;
      6   overflow: auto;
      7 
      8   .notice-title {
      9     position: relative;
     10     font-weight: 700;
     11     margin: 0 -0.75rem;
     12     padding: 0.2rem 3.5rem;
     13     border-bottom: 1px solid $bg-color;
     14 
     15     i {
     16       position: absolute;
     17       top: 50%;
     18       left: 1.8rem;
     19       transform: translate(-50%, -50%);
     20     }
     21   }
     22 
     23   .notice-content {
     24     display: block;
     25     margin: 2rem 2rem;
     26   }
     27 }
     28 
     29 .notice.note {
     30   background-color: $bg-color-notice-note-content;
     31 
     32   .notice-title {
     33     background-color: $bg-color-notice-note-title;
     34 
     35     i {
     36       color: $fg-color-notice-note-icon;
     37     }
     38   }
     39 }
     40 
     41 .notice.tip {
     42   background-color: $bg-color-notice-tip-content;
     43 
     44   .notice-title {
     45     background-color: $bg-color-notice-tip-title;
     46 
     47     i {
     48       color: $fg-color-notice-tip-icon;
     49     }
     50   }
     51 }
     52 
     53 .notice.example {
     54   background-color: $bg-color-notice-example-content;
     55 
     56   .notice-title {
     57     background-color: $bg-color-notice-example-title;
     58 
     59     i {
     60       color: $fg-color-notice-example-icon;
     61     }
     62   }
     63 }
     64 
     65 .notice.question {
     66   background-color: $bg-color-notice-question-content;
     67 
     68   .notice-title {
     69     background-color: $bg-color-notice-question-title;
     70 
     71     i {
     72       color: $fg-color-notice-question-icon;
     73     }
     74   }
     75 }
     76 
     77 .notice.info {
     78   background-color: $bg-color-notice-info-content;
     79 
     80   .notice-title {
     81     background-color: $bg-color-notice-info-title;
     82 
     83     i {
     84       color: $fg-color-notice-info-icon;
     85     }
     86   }
     87 }
     88 
     89 .notice.warning {
     90   background-color: $bg-color-notice-warning-content;
     91 
     92   .notice-title {
     93     background-color: $bg-color-notice-warning-title;
     94 
     95     i {
     96       color: $fg-color-notice-warning-icon;
     97     }
     98   }
     99 }
    100 
    101 .notice.error {
    102   background-color: $bg-color-notice-error-content;
    103 
    104   .notice-title {
    105     background-color: $bg-color-notice-error-title;
    106 
    107     i {
    108       color: $fg-color-notice-error-icon;
    109     }
    110   }
    111 }