aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include/_mixins.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r--client/src/sass/include/_mixins.scss32
1 files changed, 20 insertions, 12 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0f301dab2..cafe830fe 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -91,8 +91,16 @@
91 } 91 }
92} 92}
93 93
94@mixin peertube-input-text($width) { 94@mixin rounded-line-height-1-5 ($font-size) {
95 padding: 4px 15px; 95 line-height: $font-size + math.round(math.div($font-size, 2));
96}
97
98@mixin peertube-input-text($width, $font-size: $form-input-font-size) {
99 @include rounded-line-height-1-5($font-size);
100
101 font-size: $font-size;
102
103 padding: 3px 15px;
96 display: inline-block; 104 display: inline-block;
97 width: $width; 105 width: $width;
98 max-width: $width; 106 max-width: $width;
@@ -100,8 +108,6 @@
100 background-color: pvar(--inputBackgroundColor); 108 background-color: pvar(--inputBackgroundColor);
101 border: 1px solid pvar(--inputBorderColor); 109 border: 1px solid pvar(--inputBorderColor);
102 border-radius: 3px; 110 border-radius: 3px;
103 font-size: $form-input-font-size;
104 line-height: $form-input-line-height;
105 111
106 &::placeholder { 112 &::placeholder {
107 color: pvar(--inputPlaceholderColor); 113 color: pvar(--inputPlaceholderColor);
@@ -252,6 +258,8 @@
252} 258}
253 259
254@mixin peertube-button { 260@mixin peertube-button {
261 @include rounded-line-height-1-5($button-font-size);
262
255 padding: 4px 13px; 263 padding: 4px 13px;
256 264
257 border: 0; 265 border: 0;
@@ -264,7 +272,6 @@
264 cursor: pointer; 272 cursor: pointer;
265 273
266 font-size: $button-font-size; 274 font-size: $button-font-size;
267 line-height: $button-font-size + math.round(math.div($button-font-size, 2));
268 275
269 my-global-icon + * { 276 my-global-icon + * {
270 @include margin-right(4px); 277 @include margin-right(4px);
@@ -314,10 +321,6 @@
314 width: $width; 321 width: $width;
315 top: $top; 322 top: $top;
316 } 323 }
317
318 span {
319 vertical-align: middle;
320 }
321} 324}
322 325
323@mixin peertube-file { 326@mixin peertube-file {
@@ -408,15 +411,17 @@
408 } 411 }
409 412
410 select { 413 select {
411 padding: 4px 35px 4px 12px; 414 @include rounded-line-height-1-5($form-input-font-size);
415
416 font-size: $form-input-font-size;
417
418 padding: 3px 35px 3px 12px;
412 position: relative; 419 position: relative;
413 border: 1px solid pvar(--inputBorderColor); 420 border: 1px solid pvar(--inputBorderColor);
414 background: transparent none; 421 background: transparent none;
415 appearance: none; 422 appearance: none;
416 text-overflow: ellipsis; 423 text-overflow: ellipsis;
417 color: pvar(--mainForegroundColor); 424 color: pvar(--mainForegroundColor);
418 font-size: $form-input-font-size;
419 line-height: $form-input-line-height;
420 425
421 &:focus { 426 &:focus {
422 outline: none; 427 outline: none;
@@ -443,6 +448,9 @@
443 font-weight: $font-semibold; 448 font-weight: $font-semibold;
444 color: pvar(--greyForegroundColor); 449 color: pvar(--greyForegroundColor);
445 border: 0; 450 border: 0;
451
452 // No border, add +1 to vertical padding
453 padding: 4px 35px 4px 12px;
446 } 454 }
447 } 455 }
448} 456}