exercises

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

product-details.component.scss (1080B)

      1 :host {
      2     display: grid;
      3     grid-template-rows: auto 1fr;
      4     gap: 16px;
      5     height: 100%;
      6 }
      7 
      8 img {
      9     aspect-ratio: 5;
     10     object-fit: cover;
     11 }
     12 
     13 .brand {
     14     background-color: var(--violet-0);
     15     border-color: var(--violet-8);
     16     color: var(--violet-11);
     17 }
     18 
     19 .discount {
     20     background-color: var(--pink-0);
     21     border-color: var(--pink-8);
     22     color: var(--pink-11);
     23 }
     24 
     25 .category {
     26     background-color: var(--cyan-0);
     27     border-color: var(--cyan-8);
     28     color: var(--cyan-11);
     29 }
     30 
     31 .stock {
     32     background-color: var(--teal-3);
     33     border-color: var(--teal-8);
     34     color: var(--teal-11);
     35     font-weight: 600;
     36     font-size: .76rem;
     37     i {
     38         font-size: .85rem;
     39         color: var(--gray-12);
     40     }
     41 }
     42 
     43 li {
     44     padding-left: 0;
     45     border: none;
     46 
     47     i {
     48         font-size: 1.25rem;
     49     }
     50 }
     51 
     52 .back,
     53 .btn-add-cart {
     54     background-color: var(--gray-8);
     55     border: 1px solid var(--gray-8);
     56     transition: all 0.3s ease;
     57     color: var(--gray-0);
     58 
     59     &:hover,
     60     &:focus,
     61     &:active {
     62         background-color: var(--gray-10);
     63         color: var(--gray-0);
     64     }
     65 }