/* RadioButton * * Styling RadioButton mainly includes: * * 1. Containers * .dijitRadio|.dijitRadioIcon * * 2. RadioButton within ToggleButton * .dijitToggleButton|.dijitToggleButtonChecked * * 3. Checked state * .dijitRadioChecked * .dijitToggleButtonChecked * * 4. Hover state * .dijitRadioHover|.dijitRadioCheckedHover * * 5. Disabled state * .dijitRadioDisabled|.dijitRadioCheckedDisabled */ .flat .dijitRadio, .flat .dijitRadioIcon { /* inside a toggle button */ width: 16px; height: 16px; background: #fff; border: 1px solid #2196f3; border-radius: 50%; position: relative; overflow: visible; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .flat .dijitRadio:after, .flat .dijitRadioIcon:after { content: " "; display: block; width: 0; height: 0; background-color: #2196f3; border-radius: 50%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin: 8px; position: absolute; top: 0; left: 0; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .flat .dijitRadioHover { border-color: #59b0f6; } .flat .dijitRadioChecked:after, .flat .dijitChecked .dijitRadioIcon:after { width: 8px; height: 8px; margin: 3px; opacity: 1; -ms-filter: none; filter: none; } .flat .alt-primary .dijitRadioIcon { border-color: #fff; } .flat .alt-primary .dijitRadioIcon:after { background-color: #fff; } .flat .alt-success .dijitRadioIcon { border-color: #fff; } .flat .alt-success .dijitRadioIcon:after { background-color: #fff; } .flat .alt-info .dijitRadioIcon { border-color: #fff; } .flat .alt-info .dijitRadioIcon:after { background-color: #fff; } .flat .alt-warning .dijitRadioIcon { border-color: #fff; } .flat .alt-warning .dijitRadioIcon:after { background-color: #fff; } .flat .alt-danger .dijitRadioIcon { border-color: #fff; } .flat .alt-danger .dijitRadioIcon:after { background-color: #fff; } .flat .alt-inverse .dijitRadioIcon { border-color: #fff; } .flat .alt-inverse .dijitRadioIcon:after { background-color: #fff; } .flat .dijitRadioDisabled { background-color: #f5f5f5; border-color: #e3e3e3; } .flat .dijitRadioCheckedDisabled { background-color: #f5f5f5; border-color: #6fbbf7; } .flat .dijitRadioCheckedDisabled:after { background-color: #6fbbf7; } .flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon { width: 16px; height: 16px; background: #fff; border: 1px solid #9e9e9e; border-radius: 50%; position: relative; overflow: visible; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after { content: " "; display: block; width: 0; height: 0; background-color: #2196f3; border-radius: 50%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin: 8px; position: absolute; top: 0; left: 0; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon { border-color: #9e9e9e; } .flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after { width: 8px; height: 8px; margin: 3px; opacity: 1; -ms-filter: none; filter: none; }