flatcss2/_control-alignment.css at main · areve/flatcss2 · 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
/* _control-alignment.css */

@mixin vertical-align-baseline {
  vertical-align: baseline;
  margin-top: calc(var(--small-pad) / 2);
  margin-bottom: calc(var(--small-pad) / 2);
}

@mixin vertical-align-baseline-fix(
  /* control__height*/ $height: 2em,
  $top: 0.5
) {
  vertical-align: middle;

  $margin: calc(var(--control__height) - $height + var(--small-pad));

  margin-top: calc($margin * $top);
  margin-bottom: calc($margin * calc(1 - $top));
}

@mixin vertical-align-baseline--fix-overflow-hidden {
  vertical-align: bottom;
  margin-top: calc(var(--small-pad) / 2);
  margin-bottom: calc(var(--small-pad) / 2);
}

@mixin flat-button-alignment {
  @include vertical-align-baseline;
  display: inline-block;
  min-height: var(--control__height);
  /* vertically centers text on links */
  line-height: var(--control__height);
  position: relative;
}

select,
output,
progress,
meter,
textarea,
input:not([type]),
input[type="checkbox"],
input[type="radio"],
input[type="text"],
input[type="search"],
input[type="range"],
input[type="tel"],
input[type="url"],
input[type="color"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="local"],
input[type="number"],
input[type="file"] {
  @include vertical-align-baseline;
  display: inline-block;
  position: relative;
  height: var(--control__height);
  padding: var(--input__padding);
}

input {
  &[type="file"] {
    @include vertical-align-baseline-fix();
    height: var(--control__height);
  }

  &[type="color"],
  &[type="range"] {
    $height: calc(var(--control__height) * 15 / 16);
    height: $height;
    @include vertical-align-baseline-fix($height, 0.2);
  }

  &[type="image"] {
    @include vertical-align-baseline-fix();
  }

  &[type="checkbox"],
  &[type="radio"] {
    $height: calc(var(--control__height) * 6 / 8);
    height: $height;
    width: $height;
    @include vertical-align-baseline-fix($height, 0.5);
  }
}

progress {
  @include vertical-align-baseline-fix();
}

meter {
  @include vertical-align-baseline-fix();
}

output {
  @include vertical-align-baseline-fix();
  /* The text alignment is slightly off on this elment (Chrome) */
  line-height: calc(var(--control__height) * 0.95);
}

label {
  @include vertical-align-baseline;
  display: inline-block;
  min-height: var(--control__height);
}

/* buttons */
label.button {
  @include vertical-align-baseline--fix-overflow-hidden;
}
select,
input[type="file"],
input[type="submit"],
input[type="reset"],
input[type="button"],
.button,
button {
  @include flat-button-alignment;
}