Değişkenler

Kullanabileceğiniz birçok scss değişken, oluşturduk. Kullanım için sadece değişkenleri içeren .scss dosyasını import edebilirsiniz.

@import 'gralig/scss/abstracts/_variables.scss';

Başlangıç Değişkenleri

Başlangıç renk değişkenleri için renkler sayfasını kontrol edebilirsiniz.

DeğişkenTipDeğer
$font-sizefont-size1.6rem
$font-size-sfont-size1.4rem
$font-size-lfont-size1.2rem
$font-thinfont-weight300
$font-normalfont-weight400
$font-boldfont-weight600
$font-family-generalfont-family-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
$font-familyfont-family"Catamaran", sans-serif
$space-xxssize0.2rem
$space-xssize0.4rem
$space-ssize0.8rem
$spacesize1.2rem
$space-msize1.6rem
$space-lsize2.4rem
$space-xlsize3.2rem
$space-xxlsize6.4rem
$line-height-ssize1.2
$line-heightsize1.5
$line-height-msize1.6
$line-height-lsize1.7
$border-radiussize0.2rem
$border-radius-fullsize50%
$border-radius-fullsize50%
$transition-defaulttransitionall 0.15s ease-in
$transition-secondarytransitionall 0.3s ease-in
$transparentcolortransparent
$whitecolorhsl(0, 0%, 100%)

Türetilmiş Değişkenler

DeğişkenTipDeğer
$color-backgroundcolor$white
$color-fontcolor$abbey
$color-font-secondarycolor$oslo
$color-font-revertcolor$porcelain
$color-maincolor$abbey
$color-secondarycolor$raven
$color-lightcolor$iron
$color-lightercolor$porcelain
$color-bordercolor$iron
$color-border-darkcolor$raven
$color-input-disabledcolor$porcelain
$color-input-placeholdercolor$mischka
$el-box-shadowcolor0 0 3px 1px rgba($color-main, 0.5)
$el-box-shadow-bluecolor0 0 3px 1px rgba($color-blue, 0.5)
$el-box-shadow-greencolor0 0 3px 1px rgba($color-green, 0.5)
$el-box-shadow-yellowcolor0 0 3px 1px rgba($color-yellow, 0.5)
$el-box-shadow-redcolor0 0 3px 1px rgba($color-red, 0.5)
$p-sizefont-size$font-size
$p-s-sizefont-size$font-size * 0.8125
$p-l-sizefont-size$font-size * 1.125
$el-font-sizefont-size$font-size * 0.8125
$el-font-size-sfont-size$font-size * 0.6875
$el-font-size-lfont-size$font-size * 0.9375
$content-padding-inlinesize$space-xl
$content-padding-blocksize$space-m
$color-bluecolor$summer
$color-blue-lightcolor$summer-light
$color-blue-lightercolor$summer-lighter
$color-blue-darkcolor$summer-dark
$color-blue-darkercolor$summer-darker
$color-greencolor$shamrock
$color-green-lightcolor$shamrock-light
$color-green-lightercolor$shamrock-lighter
$color-green-darkcolor$shamrock-dark
$color-green-darkercolor$shamrock-darker
$color-yellowcolor$tulip
$color-yellow-lightcolor$tulip-light
$color-yellow-lightercolor$tulip-lighter
$color-yellow-darkcolor$tulip-dark
$color-yellow-darkercolor$tulip-darker
$color-redcolor$flame
$color-red-lightcolor$flame-light
$color-red-lightercolor$flame-lighter
$color-red-darkcolor$flame-dark
$color-red-darkercolor$flame-darker

Karanlık Mod Değişkenleri

DeğişkenTipDeğer
$color-font-dtcolor$iron
$color-font-secondary-dtcolor$ghost
$color-font-revert-dtcolor$woodsmoke
$color-background-dtcolor$woodsmoke
$color-main-dtcolor$raven
$color-secondary-dtcolor$oslo
$color-button-font-dtcolor$woodsmoke
$color-border-dtcolor$abbey
$color-border-light-dtcolor$oslo
$color-code-dtcolor$shark
$color-mute-dtcolordarken($abbey, 8%)
$color-alert-dtcolor$oslo
$color-alert-font-dtcolor$shark
$color-card-dtcolor$shark
$color-link-font-dtcolor$oslo
$color-link-hover-dtcolor$ghost
$color-input-disabled-dtcolorrgba($iron, 0.2)
$color-input-placeholder-dtcolor$abbey
🎧☕️❤️& Gralig ile yapıldı. © 2019