Hugging Face's logo

Spaces:
thulieu
/
CosmeticsStore
Running

App Files Community
CosmeticsStore
File size: 1,821 Bytes 
c9ba648
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
/*=============== HEADER & NAV ===============*/
.header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--body-color);
   z-index: var(--z-fixed);
   transition: box-shadow .4s, background-color .4s;
}

.nav{
   height: var(--header-height);
   display: flex;
   justify-content: space-between;
   align-items: center;

   &__logo{
      display: inline-flex;
      align-items: center;
      column-gap: .5rem;
      color: var(--first-color);
      font-weight: var(--font-medium);

      & i{
         font-size: 1.25rem;
      }
   }
   // Navigation for mobile devices
   @media screen and (max-width: 1150px){
      &__menu{
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         background-color: var(--container-color);
         box-shadow: 0 -8px 32px hsla(0, 0%, 0%, .1);
         padding: 1.25rem 4rem;
         transition: background-color .4s;
      }
   }
   &__list{
      display: flex;
      justify-content: space-between;
   }
   &__link{
      color: var(--text-color);
      transition: color .4s;
      
      & span{
         display: none;
      }
      & i{
         font-size: 1.25rem;
      }
      &:hover{
         color: var(--first-color);
      }
   }
   &__actions{
      display: flex;
      align-items: center;
      column-gap: 1rem;

      & i{
         font-size: 1.25rem;
	      color: var(--title-color);
	      cursor: pointer;
	      transition: color .4s;

         &:hover{
            color: var(--first-color);
         }
      }
   }
}

/* Add shadow header */
.shadow-header{
   box-shadow: 0 2px 16px hsla(0, 0%, 0%, .1);
}

/* Active link */
.active-link{
   color: var(--first-color);
}