group-income/frontend/assets/style/_mixins.scss at a96c8b612687faa373ec7d206888bc14f0374abe · okTurtles/group-income · 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
// Breakpoints
// // Same as JS breakpoints at breakpoints.js
// TODO: Redefine the breakpoints with @mmbotelho in a next task.
$gap: 1rem;
$tablet: 769px;
$desktop: 1200px;
$payment-table-desktop-bp: 1290px;

@mixin fa($size, $dimensions) {
  display: inline-block;
  font-size: $size;
  height: $dimensions;
  line-height: $dimensions;
  text-align: center;
  vertical-align: top;
  width: $dimensions;
}

@mixin tooltip-style-common {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 3rem;
  max-width: 12rem;
  border-radius: 3px;
  padding: 0.5rem;
  z-index: 50; // $zindex-tooltip: 50;
  pointer-events: none;
  background-color: var(--text_0);
  opacity: 0.95;
  color: var(--background_0);
}

@mixin overflow-touch {
  -webkit-overflow-scrolling: touch;
}

@mixin from($device) {
  @media screen and (min-width: $device) {
    @content;
  }
}

@mixin until($device) {
  @media screen and (max-width: $device - 1px) {
    @content;
  }
}

@mixin phone {
  @media screen and (max-width: $tablet - 1px) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: $tablet), print {
    @content;
  }
}

@mixin touch {
  @media screen and (max-width: $desktop - 1px) {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: $desktop) {
    @content;
  }
}

@mixin payment-table-desktop {
  @media screen and (min-width: $payment-table-desktop-bp) {
    @content;
  }
}

@mixin if-forced-color-mode {
  @media (forced-colors: active) {
    @content;
  }
}

%unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

%overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

%reset-button {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  min-height: auto;
  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;

  /* Remove excess padding and border in Firefox 4+ */
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

%floating-panel {
  @include phone {
    top: auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem 1rem 0 0;
  }

  @include tablet {
    position: fixed;
    top: 4.25rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  @include desktop {
    top: 2.3rem;
    position: absolute;
    right: auto;
    transform: none;
  }
}

%floating-panel-item {
  height: 2.31rem;

  @include touch {
    height: 3.43rem;
  }
}