Skip to content

radius.scss

Raphaël Balet edited this page May 18, 2025 · 1 revision

Variables

partially taken from the Material design

:root {
  --radius-smallest: 4px; // Extra small : Menu, Snackbars, Text fields
  --radius-smaller: 8px; // Small : Chips, Rich tooltip
  --radius-small: 10px; // Medium : Cards, Small FABs
  --radius: 16px; // Large : FABs, Navigation drawers
  --radius-big: 20px;
  --radius-bigger: 28px; // Extra large : Dialogs, Large FABs, Search view (full-screen), Time picker, Time input
  --radius-rounded: 50px;
  --radius-circle: 100%; // @TODO remove in favor of --full
  --radius-full: 100%; // Full : Badge, Buttons, Sliders, Switches, Search bards
}

Clone this wiki locally