framework/front/css · yumemi

Animation

pub type Animation {
  Fade
  SlideUp
  Pulse
}

Constructors

```
Fade
```
```
SlideUp
```
```
Pulse
```

BorderEdge

</>

pub type BorderEdge {
  AllEdges
  BottomEdge
}

Constructors

```
AllEdges
```
```
BottomEdge
```

BorderStyle

</>

pub type BorderStyle {
  Solid
  Dashed
  Dotted
}

Constructors

```
Solid
```
```
Dashed
```
```
Dotted
```

BoxSizing

</>

箱の寸法の数え方(box-sizing)。BorderBox は width・min-height に padding と border を含める ── min-height: 48px と padding を持つ入力が 48px のまま出る。

pub type BoxSizing {
  BorderBox
  ContentBox
}

Constructors

```
BorderBox
```
```
ContentBox
```

Breakpoint

</>

pub type Breakpoint {
  SP
  PC
  Tablet
}

Constructors

```
SP
```
```
PC
```
```
Tablet
```

Flow

</>

pub type Flow {
  Stack(gap: Length)
  Row(gap: Length, wrap: Bool)
  Grid(cols: Int, gap: Length)
  GridTracks(cols: List(track.Track), gap: Length)
  Scroller
}

Constructors

```
Stack(gap: Length)
```
```
Row(gap: Length, wrap: Bool)
```
```
Grid(cols: Int, gap: Length)
```

GridTracks(cols: List(track.Track), gap: Length)

```
Scroller
```

FontFamily

</>

pub type FontFamily {
  System
  SansSerif
  Serif
  Monospace
  Named(String)
}

Constructors

```
System
```
```
SansSerif
```
```
Serif
```
```
Monospace
```
```
Named(String)
```

FontWeight

</>

pub type FontWeight {
  Normal
  Medium
  SemiBold
  Bold
}

Constructors

```
Normal
```
```
Medium
```
```
SemiBold
```
```
Bold
```

Img

</>

pub type Img(blob, media) {
  Img(blob: blob, media: media)
}

Constructors

```
Img(blob: blob, media: media)
```

Interaction

</>

pub type Interaction {
  Hover
  Focus
  Disabled
  Current
}

Constructors

```
Hover
```
```
Focus
```
```
Disabled
```
```
Current
```
今いる所(aria-current が false 以外)。ナビの選択中の項目に掛ける。

Length

</>

pub type Length {
  Px(Float)
  Rem(Float)
  Var(name: String)
  Env(edge: SafeArea)
  Dvh(Float)
}

Constructors

```
Px(Float)
```
```
Rem(Float)
```
```
Var(name: String)
```
var(--name)。名は [a-z0-9-] だけを通す ── 他の字を含む名は unset になる (宣言の外へ出る字 ;・}・)・空白を CSS に書かないため)。
```
Env(edge: SafeArea)
```
env(safe-area-inset-<辺>, 0px)。safe area を持たない端末では 0px。
```
Dvh(Float)
```
<n>dvh(動的な viewport の高さに対する割合)。

ListMarker

</>

並びの印(list-style)。いま書けるのは印を消す NoMarker だけ。

pub type ListMarker {
  NoMarker
}

Constructors

```
NoMarker
```

ObjectFit

</>

pub type ObjectFit {
  Cover
  Contain
  Fill
  ScaleDown
  FitNone
}

Constructors

```
Cover
```
```
Contain
```
```
Fill
```
```
ScaleDown
```
```
FitNone
```

OverflowWrap

</>

行の中での折り返し(overflow-wrap)。Anywhere は長い URL のような切れ目の無い語も行の幅で折る(min-content の幅にも効く)。BreakWord は折るが min-content の幅には効かない。WrapNormal は既定(語の切れ目だけで折る)。

pub type OverflowWrap {
  Anywhere
  BreakWord
  WrapNormal
}

Constructors

```
Anywhere
```
```
BreakWord
```
```
WrapNormal
```

OverlayAlign

</>

寄せた Overlay の横の揃え。AlignStart はボタンの始端に、AlignEnd は終端にそろえる。

pub type OverlayAlign {
  AlignStart
  AlignEnd
}

Constructors

```
AlignStart
```
```
AlignEnd
```

OverlaySide

</>

寄せた Overlay をボタンのどちら側に開くか。

pub type OverlaySide {
  Below
  Above
}

Constructors

```
Below
```
```
Above
```

Pin

</>

pub type Pin {
  Top
  Bottom
  BottomFlush
  NoPin
  Overlay
  AnchoredOverlay(side: OverlaySide, align: OverlayAlign)
}

Constructors

```
Top
```
```
Bottom
```
```
BottomFlush
```
画面の下端に着く棒(position: sticky; bottom: 0)。safe area(iPhone の下端のバー)の分は棒の内側の下の余白(padding-bottom: env(safe-area-inset-bottom, 0px)) で持つ ── 棒の地は画面の下端まで届き、中身はバーに重ならない。Bottom は bottom: env(safe-area-inset-bottom) で浮いて止まる(出力は変えない)。
```
NoPin
```
```
Overlay
```
```
AnchoredOverlay(side: OverlaySide, align: OverlayAlign)
```
開いた el.opener の下か上へ寄せて開く Overlay(CSS anchor positioning)。支えの無い browser では Overlay と同じく中央に開く。backdrop は暗くしない。

Ratio

</>

pub type Ratio {
  Ratio(width: Float, height: Float)
}

Constructors

```
Ratio(width: Float, height: Float)
```

SafeArea

</>

safe area の 4 辺(env(safe-area-inset-*))。

pub type SafeArea {
  SafeTop
  SafeRight
  SafeBottom
  SafeLeft
}

Constructors

```
SafeTop
```
```
SafeRight
```
```
SafeBottom
```
```
SafeLeft
```

SpaceProperty

</>

pub type SpaceProperty {
  Margin
  Padding
  Gap
  Width
  Height
  Radius
  MinWidth
  MinHeight
  MaxWidth
}

Constructors

```
Margin
```
```
Padding
```
```
Gap
```
```
Width
```
```
Height
```
```
Radius
```
```
MinWidth
```
```
MinHeight
```
```
MaxWidth
```

Style

</>

pub type Style {
  Color(value: String)
  Background(value: String)
  Border(
    edge: BorderEdge,
    width: Length,
    style: BorderStyle,
    color: String,
  )
  Outline(width: Length, offset: Length, color: String)
  Crop(fit: ObjectFit, ratio: Ratio)
  Sizing(box: BoxSizing)
  Marker(marker: ListMarker)
  Decoration(line: TextDecoration)
  Wrap(wrap: OverflowWrap)
  Space(property: SpaceProperty, value: Length)
  Text(
    family: FontFamily,
    size: Length,
    weight: FontWeight,
    line_height: Length,
  )
  Flow(flow: Flow)
  State(state: Interaction, styles: List(Style))
  Responsive(at: Breakpoint, styles: List(Style))
  Animation(animation: Animation)
}

Constructors

```
Color(value: String)
```
```
Background(value: String)
```

Border(
  edge: BorderEdge,
  width: Length,
  style: BorderStyle,
  color: String,
)

Outline(width: Length, offset: Length, color: String)

```
Crop(fit: ObjectFit, ratio: Ratio)
```
```
Sizing(box: BoxSizing)
```
```
Marker(marker: ListMarker)
```
```
Decoration(line: TextDecoration)
```
```
Wrap(wrap: OverflowWrap)
```

Space(property: SpaceProperty, value: Length)

Text(
  family: FontFamily,
  size: Length,
  weight: FontWeight,
  line_height: Length,
)

```
Flow(flow: Flow)
```

State(state: Interaction, styles: List(Style))

Responsive(at: Breakpoint, styles: List(Style))

```
Animation(animation: Animation)
```

TextDecoration

</>

文字の飾り(text-decoration)。

pub type TextDecoration {
  NoDecoration
  Underline
}

Constructors

```
NoDecoration
```
```
Underline
```