2020-12-10 16:49:59 +08:00
|
|
|
/*!markdown
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
title: Vertial Align
|
|
|
|
|
---
|
|
|
|
|
|
2020-12-22 14:58:36 +08:00
|
|
|
| Class | Properties |
|
|
|
|
|
| ----------- | ------------------------ |
|
|
|
|
|
| align-baseline | vertical-align: baseline |
|
|
|
|
|
| align-top | vertical-align: top |
|
|
|
|
|
| align-middle | vertical-align: middle |
|
|
|
|
|
| align-bottom | vertical-align: bottom |
|
|
|
|
|
| align-text-top | vertical-align: text-top |
|
|
|
|
|
| align-text-bottom | vertical-align: text-bottom |
|
|
|
|
|
|
2020-12-10 16:49:59 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
2020-11-27 17:29:49 +08:00
|
|
|
@mixin make-vertical-align($prefix: '.') {
|
|
|
|
|
@each $name,
|
|
|
|
|
$value
|
|
|
|
|
in (
|
|
|
|
|
'baseline': baseline,
|
|
|
|
|
'top': top,
|
|
|
|
|
'middle': middle,
|
|
|
|
|
'bottom': bottom,
|
|
|
|
|
'text-top': text-top,
|
|
|
|
|
'text-bottom': text-bottom
|
|
|
|
|
)
|
|
|
|
|
{
|
|
|
|
|
#{$prefix}align-#{$name} {
|
|
|
|
|
vertical-align: $value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include make-vertical-align();
|
|
|
|
|
@each $deivce in map-keys($devices) {
|
|
|
|
|
@include media-device($deivce) {
|
|
|
|
|
@include make-vertical-align('.' + selector-escape($deivce + ':'));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// hover ?
|
