docs/styles.css at main · turnkeyintern/docs · 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
/* Custom Dropdown for SMS Price Lookup */
.sms-price-lookup-container {
  /* Container needs relative positioning for absolute list */
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.sms-country-trigger {
  /* Make button look like a select input */
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit; /* Use site's font */
  line-height: 1.5;
  color: #495057; /* Standard text color */
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Standard border */
  border-radius: 0.25rem;
  text-align: left;
  cursor: pointer;
  /* Add space for a dropdown arrow indicator */
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.sms-country-list {
  /* Style the dropdown list */
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Position below trigger */
  left: 0;
  width: 100%;
  max-height: 200px; /* Fixed height with scroll */
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-top: none; /* Avoid double border with trigger */
  border-radius: 0 0 0.25rem 0.25rem;
  z-index: 1000; /* Ensure it's on top */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sms-country-item {
  /* Style individual country items */
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: #495057;
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap; /* Prevent wrapping */
}

.sms-country-item:hover,
.sms-country-item:focus {
  background-color: #f8f9fa; /* Subtle hover effect */
  color: #16181b;
  outline: none;
}

/* CSS to control visibility based on data-open attribute */
#hidden-content-simple[data-open="false"] {
  display: none;
}

#hidden-content-simple[data-open="true"] {
  display: block; /* Or inline, inline-block, etc., as needed */
}