Radio theme

Overview
API
Theme
Examples

NbRadioComponent

NameTheme VariableDefault ValueDescription
radio-width1.25rem
radio-height1.25rem
radio-border-stylesolid
radio-border-width1px
radio-text-font-familytext-subtitle-2-font-familyOpen Sans, sans-serif
radio-text-font-sizetext-subtitle-2-font-size0.8125rem
radio-text-font-weighttext-subtitle-2-font-weight600
radio-text-line-heighttext-subtitle-2-line-height1.5rem
radio-outline-coloroutline-colorrgba(143, 155, 179, 0.16)
radio-outline-widthoutline-width0.375rem
radio-basic-text-colortext-basic-color#222b45
radio-basic-border-colorcolor-basic-transparent-default-border#8f9bb3
radio-basic-background-colorcolor-basic-transparent-defaultrgba(143, 155, 179, 0.08)
radio-basic-checked-background-colorrgba(0, 0, 0, 0)
radio-basic-checked-border-colorcolor-primary-default-border#3366ff
radio-basic-inner-circle-colorcolor-primary-default#3366ff
radio-basic-focus-border-colorcolor-primary-transparent-focus-border#3366ff
radio-basic-focus-inner-circle-colorcolor-primary-focus#274bdb
radio-basic-hover-background-colorcolor-primary-transparent-hoverrgba(51, 102, 255, 0.16)
radio-basic-hover-border-colorcolor-primary-transparent-hover-border#3366ff
radio-basic-hover-inner-circle-colorcolor-primary-hover#598bff
radio-basic-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-basic-active-border-colorcolor-primary-transparent-active-border#3366ff
radio-basic-active-inner-circle-colorcolor-primary-active#274bdb
radio-basic-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
radio-basic-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-basic-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
radio-basic-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-basic-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-basic-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-primary-text-colortext-basic-color#222b45
radio-primary-border-colorcolor-primary-transparent-default-border#3366ff
radio-primary-background-colorcolor-primary-transparent-defaultrgba(51, 102, 255, 0.08)
radio-primary-checked-background-colorrgba(0, 0, 0, 0)
radio-primary-checked-border-colorcolor-primary-default-border#3366ff
radio-primary-inner-circle-colorcolor-primary-default#3366ff
radio-primary-focus-border-colorcolor-primary-transparent-focus-border#3366ff
radio-primary-focus-inner-circle-colorcolor-primary-focus#274bdb
radio-primary-hover-background-colorcolor-primary-transparent-hoverrgba(51, 102, 255, 0.16)
radio-primary-hover-border-colorcolor-primary-transparent-hover-border#3366ff
radio-primary-hover-inner-circle-colorcolor-primary-hover#598bff
radio-primary-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-primary-active-border-colorcolor-primary-transparent-active-border#3366ff
radio-primary-active-inner-circle-colorcolor-primary-active#274bdb
radio-primary-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
radio-primary-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-primary-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
radio-primary-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-primary-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-primary-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-success-text-colortext-basic-color#222b45
radio-success-border-colorcolor-success-transparent-default-border#00d68f
radio-success-background-colorcolor-success-transparent-defaultrgba(0, 214, 143, 0.08)
radio-success-checked-background-colorrgba(0, 0, 0, 0)
radio-success-checked-border-colorcolor-success-default-border#00d68f
radio-success-inner-circle-colorcolor-success-default#00d68f
radio-success-focus-border-colorcolor-success-transparent-focus-border#00d68f
radio-success-focus-inner-circle-colorcolor-success-focus#00b887
radio-success-hover-background-colorcolor-success-transparent-hoverrgba(0, 214, 143, 0.16)
radio-success-hover-border-colorcolor-success-transparent-hover-border#00d68f
radio-success-hover-inner-circle-colorcolor-success-hover#2ce69b
radio-success-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-success-active-border-colorcolor-success-transparent-active-border#00d68f
radio-success-active-inner-circle-colorcolor-success-active#00b887
radio-success-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
radio-success-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-success-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
radio-success-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-success-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-success-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-info-text-colortext-basic-color#222b45
radio-info-border-colorcolor-info-transparent-default-border#0095ff
radio-info-background-colorcolor-info-transparent-defaultrgba(0, 149, 255, 0.08)
radio-info-checked-background-colorrgba(0, 0, 0, 0)
radio-info-checked-border-colorcolor-info-default-border#0095ff
radio-info-inner-circle-colorcolor-info-default#0095ff
radio-info-focus-border-colorcolor-info-transparent-focus-border#0095ff
radio-info-focus-inner-circle-colorcolor-info-focus#006fd6
radio-info-hover-background-colorcolor-info-transparent-hoverrgba(0, 149, 255, 0.16)
radio-info-hover-border-colorcolor-info-transparent-hover-border#0095ff
radio-info-hover-inner-circle-colorcolor-info-hover#42aaff
radio-info-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-info-active-border-colorcolor-info-transparent-active-border#0095ff
radio-info-active-inner-circle-colorcolor-info-active#006fd6
radio-info-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
radio-info-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-info-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
radio-info-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-info-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-info-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-warning-text-colortext-basic-color#222b45
radio-warning-border-colorcolor-warning-transparent-default-border#ffaa00
radio-warning-background-colorcolor-warning-transparent-defaultrgba(255, 170, 0, 0.08)
radio-warning-checked-background-colorrgba(0, 0, 0, 0)
radio-warning-checked-border-colorcolor-warning-default-border#ffaa00
radio-warning-inner-circle-colorcolor-warning-default#ffaa00
radio-warning-focus-border-colorcolor-warning-transparent-focus-border#ffaa00
radio-warning-focus-inner-circle-colorcolor-warning-focus#db8b00
radio-warning-hover-background-colorcolor-warning-transparent-hoverrgba(255, 170, 0, 0.16)
radio-warning-hover-border-colorcolor-warning-transparent-hover-border#ffaa00
radio-warning-hover-inner-circle-colorcolor-warning-hover#ffc94d
radio-warning-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-warning-active-border-colorcolor-warning-transparent-active-border#ffaa00
radio-warning-active-inner-circle-colorcolor-warning-active#db8b00
radio-warning-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
radio-warning-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-warning-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
radio-warning-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-warning-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-warning-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-danger-text-colortext-basic-color#222b45
radio-danger-border-colorcolor-danger-transparent-default-border#ff3d71
radio-danger-background-colorcolor-danger-transparent-defaultrgba(255, 61, 113, 0.08)
radio-danger-checked-background-colorrgba(0, 0, 0, 0)
radio-danger-checked-border-colorcolor-danger-default-border#ff3d71
radio-danger-inner-circle-colorcolor-danger-default#ff3d71
radio-danger-focus-border-colorcolor-danger-transparent-focus-border#ff3d71
radio-danger-focus-inner-circle-colorcolor-danger-focus#db2c66
radio-danger-hover-background-colorcolor-danger-transparent-hoverrgba(255, 61, 113, 0.16)
radio-danger-hover-border-colorcolor-danger-transparent-hover-border#ff3d71
radio-danger-hover-inner-circle-colorcolor-danger-hover#ff708d
radio-danger-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-danger-active-border-colorcolor-danger-transparent-active-border#ff3d71
radio-danger-active-inner-circle-colorcolor-danger-active#db2c66
radio-danger-disabled-background-colorcolor-basic-transparent-disabledrgba(143, 155, 179, 0.16)
radio-danger-disabled-border-colorcolor-basic-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-danger-disabled-text-colortext-disabled-colorrgba(143, 155, 179, 0.48)
radio-danger-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-danger-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-danger-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-control-text-colortext-control-color#ffffff
radio-control-background-colorcolor-control-transparent-defaultrgba(255, 255, 255, 0.08)
radio-control-border-colorcolor-control-transparent-default-border#ffffff
radio-control-checked-background-colorrgba(0, 0, 0, 0)
radio-control-checked-border-colorcolor-control-default-border#ffffff
radio-control-inner-circle-colorcolor-control-default#ffffff
radio-control-focus-border-colorcolor-control-transparent-focus-border#ffffff
radio-control-focus-inner-circle-colorcolor-control-focus#edf1f7
radio-control-hover-background-colorcolor-control-transparent-hoverrgba(255, 255, 255, 0.16)
radio-control-hover-border-colorcolor-control-transparent-hover-border#ffffff
radio-control-hover-inner-circle-colorcolor-control-hover#f7f9fc
radio-control-hover-checked-background-colorrgba(0, 0, 0, 0)
radio-control-active-border-colorcolor-control-transparent-active-border#ffffff
radio-control-active-inner-circle-colorcolor-control-active#edf1f7
radio-control-disabled-background-colorcolor-control-transparent-disabledrgba(143, 155, 179, 0.16)
radio-control-disabled-border-colorcolor-control-transparent-disabled-borderrgba(143, 155, 179, 0.24)
radio-control-disabled-text-colorcolor-basic-100#ffffff
radio-control-disabled-checked-background-colorrgba(0, 0, 0, 0)
radio-control-disabled-checked-border-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
radio-control-disabled-checked-inner-circle-colorcolor-basic-transparent-600rgba(143, 155, 179, 0.48)
Toggle
Previous page
Select
Next page

Need some help or found an issue?

Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.