v0.1.0
Esc

    ↑ ↓ ile gez, Enter ile aç

    EN

    Köşe yuvarlaklığı

    Merid'in köşeleri cömert ve tutarlıdır. Büyük yüzeyler daha büyük yuvarlaklık alır ve elemanlar iç içe geçtikçe yuvarlaklık küçülür; böylece iç köşeler dış köşelerle eş merkezli kalır.

    Ölçek

    --mrd-radius-xs6px · Focus halkası, skeleton, satır içi kod
    --mrd-radius-sm8px · Tooltip, küçük kutular
    --mrd-radius-md10px · İkon butonu, menü öğesi, navigasyon linki
    --mrd-radius-lg12px · Buton, input, alert, satır
    --mrd-radius-xl14px · Pencere çerçevesi, popover
    --mrd-radius-2xl16px · Menü, mobil kart
    --mrd-radius-card20px · Kart, panel, dialog
    --mrd-radius-3xl24px · Harekete çağrı bloğu
    --mrd-radius-full999px · Pill, badge, switch, avatar

    İç içe kullanım

    Pratik kural 20 → 14 → 12 → 8. Bir kart --mrd-radius-card (20px) kullanır; içindeki pencere çerçevesi --mrd-radius-xl (14px); onun içindeki buton --mrd-radius-lg (12px); butonun içindeki küçük bir kutu --mrd-radius-sm (8px).

    Yap

    İç içe geçtikçe yuvarlaklığı küçült; iki kenar arasındaki boşluk her yerde eşit görünsün.

    Kaçın

    İçteki elemana container'ıyla aynı yuvarlaklığı verme. İç köşe sıkışmış görünür.

    Pill'ler

    --mrd-radius-full, şekli yüksekliğiyle belirlenen elemanlar içindir: pill'ler, badge'ler, switch'ler ve avatar'lar. Metinli butonlarda kullanma; Merid butonları --mrd-radius-lg kullanır.