remove the banner
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _lang.scss
1 .c-lang {
2   position: absolute;
3   top: 11px;
4
5   width: 150px;
6   right: 50px + 16px;
7   opacity: 0;
8   pointer-events: none;
9   transition: opacity 350ms $ease-out;
10   z-index: $master-layer + 1;
11   display: none;
12
13   @include rwd($break-menu) {
14       display: block;
15   }
16
17   &.is-open {
18     .c-lang__button {
19       .icon-arrow-down {
20         transform: rotate(-180deg);
21       }
22     }
23     .c-lang__list {
24       transform: none;
25       opacity: 1;
26       pointer-events: all;
27     }
28   }
29 }
30
31 .c-lang__button {
32   display: flex;
33   align-items: center;
34   color: $color-white;
35   cursor: pointer;
36
37   .icon-lang {
38     color: #92BD39;
39     @include font-size(26px);
40     margin-right: 8px;
41   }
42
43   .icon-arrow-down {
44     margin-left: 8px;
45     transition: transform 350ms $ease-out;
46   }
47 }
48
49 .c-lang__list {
50   margin-top: 10px;
51   border-radius: 10px;
52   background-color: #F7BA00;
53   overflow: hidden;
54   transform: translateY(-10px);
55   opacity: 0;
56   transition: all 350ms $ease-out;
57   pointer-events: none;
58   display: flex;
59   flex-direction: column;
60
61   button {
62     display: block;
63     padding: 9px 20px;
64     color: #474747;
65     background-color: transparent;
66     border: 0;
67     cursor: pointer;
68     font-family: "Source Sans Pro";
69     font-size: 16px;
70     line-height: 18.4px;
71     text-align: left;
72
73     &:hover {
74       background-color: #EDAA00;
75     }
76
77     &.is-active {
78       font-weight: $semibold;
79       background-color: #EDAA00;
80     }
81   }
82 }