exercises

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

cart.component.scss (1803B)

      1 :host {
      2     grid-area: cart;
      3     display: flex;
      4     flex-direction: column;
      5     height: 100%;    
      6     background-color: var(--gray-1);
      7     border-radius: 8px;
      8 }
      9 
     10 ul.list-group {
     11     flex-grow: 1;
     12     overflow-y: auto;
     13     margin-bottom: 1rem;
     14 }
     15 
     16 .card-header,
     17 .card-footer {
     18     background-color: inherit;
     19 }
     20 
     21 .brand {
     22     background-color: var(--violet-0);
     23     border-color: var(--violet-8);
     24     color: var(--violet-11);
     25 }
     26 
     27 .discount {
     28     background-color: var(--pink-0);
     29     border-color: var(--pink-8);
     30     color: var(--pink-11);
     31 }
     32 
     33 .card {
     34     transition: all 0.3s ease;
     35     background-color: var(--gray-0);
     36     &:hover {
     37         border-color: var(--blue-7);
     38     }
     39 
     40     &[disabled="true"] {
     41         opacity: 0.8;
     42         pointer-events: none;
     43     }
     44 }
     45 
     46 .category {
     47     background-color: var(--cyan-0);
     48     border-color: var(--cyan-8);
     49     color: var(--cyan-11);
     50 }
     51 
     52 .qty {
     53     font-size: .9rem;
     54     padding: 0 .5rem;
     55     background-color: var(--violet-1);
     56     border-color: var(--violet-6);
     57     color: var(--violet-11);
     58     font-weight: 600;
     59 
     60     &:hover,
     61     &:active {
     62         background-color: var(--violet-10);
     63         color: var(--violet-1);
     64     }
     65 }
     66 
     67 .total {
     68     font-size: 1rem;
     69     background-color: var(--gray-0);
     70     border-color: var(--gray-6);
     71     color: var(--gray-10);
     72 }
     73 
     74 .cancel,
     75 .checkout {
     76     border: 1px solid black;    
     77 }
     78 
     79 .cancel {
     80     background-color: var(--orange-0);
     81     color: var(--orange-11);
     82     border-color: var(--orange-11);
     83 
     84     &:hover,
     85     &:active {
     86         background-color: var(--orange-10);
     87         color: var(--orange-1);
     88     }
     89 }
     90 .checkout {
     91     background-color: var(--violet-0);
     92     color: var(--violet-11);
     93     border-color: var(--violet-11);
     94 
     95     &:hover,
     96     &:active {
     97         background-color: var(--violet-10);
     98         color: var(--violet-1);
     99     }
    100 }