solid/_lib/solid-components/_popovers.scss at 9f5ccfd6192dbf2ee35a5666d1a9bca2e3ba3a6f · buzzfeed/solid · 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
133
134
135
136
137
138
139
140
141
142
143
144
//
// Popovers
// --------------------------------------------------
$background-caret-size: .625rem;
$foreground-caret-size: .5625rem;

.popover-right, .popover-left, .popover-bottom, .popover-top {
    width: 100%;
    position: relative;
    padding: $space-2;

  // shared styles between right, left, bottom, and top caret for the popover
  &:before, &:after {
    content: " ";
    pointer-events: none;
    position: absolute;
    height: 0;
    width: 0;
    border: solid transparent;
    right: 100%;
  }
  &:before { //foreground caret styles for right, left, bottom, & top popover
    border-color: transparent;
    border-width: $background-caret-size;
  }
  &:after { // background caret styles for right, left, bottom, & top popover
    border-color: transparent;
    border-width: $foreground-caret-size;
  }
}

.popover-right, .popover-left {
  &:before {
    margin-top: -($background-caret-size); //foreground caret styles for right & left popover
  }
  &:after {
    margin-top: -($foreground-caret-size); //background caret styles for between right & left popover
  }
}

.popover-right {
  &:before, &:after { // caret styles for the right popover
    right: 100%;
    top: 50%;
  }
  &:before {
    border-right-color: lighten($fill-gray, 20%);
  }
  &:after {
    border-right-color: $fill-white;
  }
  &--gray {
    background-color: darken($fill-gray, 20%);
    border: none;
    color: white;
    &:before {
      border-right-color: darken($fill-gray, 20%);
    }
    &:after {
      border-right-color: darken($fill-gray, 20%);
    }
  }
}

.popover-left {
  &:before, &:after { // caret styles for the left popover
    left: 100%;
    top: 50%;
  }
  &:before {
    border-left-color: lighten($fill-gray, 20%);
  }
  &:after {
    border-left-color: $fill-white;
  }
  &--gray {
    background-color: darken($fill-gray, 20%);
    border: none;
    color: white;
    &:before {
      border-left-color: darken($fill-gray, 20%);
    }
    &:after {
      border-left-color: darken($fill-gray, 20%);
    }
  }
}

.popover-top, .popover-bottom {
  &:before {
    margin-left: -($background-caret-size); // foreground caret styles shared between top and bottom popover
  }
  &:after {
    margin-left: -($foreground-caret-size); // background caret styles shared between top and bottom popover
  }
}

.popover-top {
  &:before, &:after { // caret styles for the top popover
    left: 50%;
    bottom: 100%;
  }
  &:before {
    border-bottom-color: lighten($fill-gray, 20%);
  }
  &:after {
    border-bottom-color: $fill-white;
  }
  &--gray {
    background-color: darken($fill-gray, 20%);
    border: none;
    color: white;
    &:before {
      border-bottom-color: darken($fill-gray, 20%);
    }
    &:after {
      border-bottom-color: darken($fill-gray, 20%);
    }
  }
}

.popover-bottom {
  &:before, &:after { // caret styles for the bottom popover
    left: 50%;
    top: 100%;
  }
  &:before {
    border-top-color: lighten($fill-gray, 20%);
  }
  &:after {
    border-top-color: $fill-white;
  }
  &--gray {
    background-color: darken($fill-gray, 20%);
    border: none;
    color: white;
    &:before {
      border-top-color: darken($fill-gray, 20%);
    }
    &:after {
      border-top-color: darken($fill-gray, 20%);
    }
  }
}