p5.js-website/src/components/Dropdown/styles.module.scss at 61865ef66f45fa710d13889f097885b31b4ccd27 · processing/p5.js-website · GitHub

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@use "styles/variables.scss";

.container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.selected,
.options {
  height: fit-content;
  border-radius: 20px;
  border: 1px solid var(--accent-type-color);
  background-color: var(--accent-color);
  color: var(--accent-type-color);
}

.selected {
  width: 100%;
  height: 100%;
  cursor: pointer;
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      border: 1px solid var(--accent-color);
      background-color: var(--accent-type-color);
      color: var(--accent-color);
    }
  }
}

.options {
  list-style-type: none;
  width: 100%;
  z-index: 1;
  position: absolute;
}

.option {
  padding-left: 0;
  padding: 7px 0;
  cursor: pointer;
  position: relative;

  button {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
  }
}

.icon,
.chevron,
.iconTop {
  position: absolute;
  pointer-events: none;
}

// Icons have different visual balance so they need different positioning
.icon {
  left: 10px;
  top: 8px;
  @media (min-width: variables.$breakpoint-tablet) {
    left: 11px;
    top: 8px;
  }
  @media (min-width: variables.$breakpoint-desktop) {
    left: 11px;
    top: 10px;
  }
}

.iconTop {
  left: 10px;
  top: 8px;

  @media (min-width: variables.$breakpoint-laptop) {
    left: 11px;
    top: 10px;
  }
}

.chevron {
  right: 10px;
  top: 12px;
  @media (min-width: variables.$breakpoint-tablet) {
    right: 12px;
    top: 14px;
  }
  @media (min-width: variables.$breakpoint-desktop) {
    right: 12px;
    top: 16px;
  }
}

// Only apply hover styles on devices with true hover capability (not touch devices)
@media (hover: hover) and (pointer: fine) {
  li[aria-selected="false"]:hover .icon {
    svg {
      background: var(--accent-type-color);
      border-radius: 2rem;
    }
  }
}

button.chevron {
  pointer-events: all;
  padding: 2px;
  right: 0;
  top: 0;
  padding-right: 10px;
  padding-top: 12px;
}

.selected > span,
.option > button > span {
  text-align: left;
  padding-left: 44px;
  // 38px padding-right holds the chevron icon on mobile for better touch targets
  padding-right: 38px;
  display: inline-block;
  width: 100%;
  // 0.75rem font-size for mobile to fit content in smaller screens
  font-size: 0.75rem;

  @media (min-width: variables.$breakpoint-tablet) {
    font-size: 1rem;
    padding-right: 10px;
  }
}