framework7/components/radio/radio.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-radio-border-radius:50%;--f7-radio-extra-margin:0px}:root .dark,:root.dark{--f7-radio-inactive-color:#ffffff4d}.ios{--f7-radio-size:22px;--f7-radio-border-width:1px;--f7-radio-inactive-color:#c7c7cc}.md{--f7-radio-size:20px;--f7-radio-border-width:2px;--f7-radio-inactive-color:#6d6d6d}.radio{display:inline-block;position:relative;vertical-align:middle;z-index:1;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb),0.5)}.icon-radio{border-radius:var(--f7-radio-border-radius);box-sizing:border-box;display:block;flex-shrink:0;height:var(--f7-radio-size);position:relative;width:var(--f7-radio-size)}.color-white .icon-radio,.color-white .radio,.icon-radio.color-white,.radio.color-white{--f7-theme-color:#fff}.color-black .icon-radio,.color-black .radio,.icon-radio.color-black,.radio.color-black{--f7-theme-color:#000}.md .icon-radio,.radio .icon-radio{border:var(--f7-radio-border-width) solid var(--f7-radio-inactive-color)}.radio,label.item-radio{cursor:pointer}.radio input[type=checkbox],.radio input[type=radio],label.item-radio input[type=checkbox],label.item-radio input[type=radio]{display:none}label.item-radio{transition-duration:.3s}label.item-radio .item-content .item-media,label.item-radio.item-content .item-media{align-self:center}label.item-radio.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-radio.active-state:after{background-color:initial}.disabled label.item-radio,label.item-radio.disabled{opacity:.55;pointer-events:none}.ios .icon-radio:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;color:var(--f7-radio-active-color,var(--f7-theme-color));content:"radio_ios";display:block;font-feature-settings:"liga";font-size:20px;height:100%;height:calc(var(--f7-radio-size) - var(--f7-radio-border-width)*2);line-height:calc(var(--f7-radio-size) - var(--f7-radio-border-width)*2 + 1px);opacity:0;text-align:center;width:100%;width:calc(var(--f7-radio-size) - var(--f7-radio-border-width)*2)}.ios .radio input[type=radio]:checked~.icon-radio:after,.ios label.item-radio input[type=radio]:checked~* .icon-radio:after,.ios label.item-radio input[type=radio]:checked~.icon-radio:after{opacity:1}.ios .radio input[type=radio]:checked~.icon-radio{border-color:var(--f7-radio-active-color,var(--f7-theme-color))}.ios label.item-radio:not(.item-radio-icon-start) input[type=radio]~.icon-radio{margin-top:-11px;position:absolute;right:calc(var(--f7-safe-area-right) + 10px);top:50%}.ios label.item-radio:not(.item-radio-icon-start) .item-inner{padding-right:calc(var(--f7-safe-area-right) + 36px)}.ios label.item-radio-icon-start>.icon-radio{margin-right:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}.ios label.item-radio.active-state{transition-duration:0s}.md .icon-radio,.md .icon-radio:after{transition-duration:.2s}.md .icon-radio:after{background-color:var(--f7-radio-active-color,var(--f7-theme-color));border-radius:50%;content:"";height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:50%;transform:scale(0);width:10px}.md .radio input[type=radio]:checked~.icon-radio,.md label.item-radio input[type=radio]:checked~* .icon-radio,.md label.item-radio input[type=radio]:checked~.icon-radio{border-color:var(--f7-radio-active-color,var(--f7-theme-color))}.md .radio input[type=radio]:checked~.icon-radio:after,.md label.item-radio input[type=radio]:checked~* .icon-radio:after,.md label.item-radio input[type=radio]:checked~.icon-radio:after{background-color:var(--f7-radio-active-color,var(--f7-theme-color));transform:scale(1)}.md label.item-radio{overflow:hidden;position:relative;z-index:0}.md label.item-radio:not(.item-radio-icon-end)>.icon-radio{margin-right:calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin))}.md label.item-radio-icon-end input[type=radio]~.icon-radio{margin-top:-10px;position:absolute;right:calc(var(--f7-safe-area-right) + 16px);top:50%}.md label.item-radio-icon-end .item-inner{padding-right:calc(var(--f7-safe-area-right) + 52px)}