diff options
Diffstat (limited to 'style/default.css')
-rw-r--r-- | style/default.css | 98 |
1 files changed, 81 insertions, 17 deletions
diff --git a/style/default.css b/style/default.css index a6614965..9f8b4091 100644 --- a/style/default.css +++ b/style/default.css @@ -479,24 +479,20 @@ nav.navbar.sidebar { /* this is based on https://github.com/flatlogic/awesome-bootstrap-checkbox and "fixes" the style of radio buttons and check boxes. -it only applies if they're in a container that has the checkbox/radio class */ +it only applies if they're in a container that has the checkbox class */ -.checkbox, -.radio { +.checkbox { padding-left: 20px; margin-top: 5px; margin-bottom: 2px; } -.checkbox label, -.radio label { +.checkbox label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; - margin-right: 20px; } -.checkbox label::before, -.radio label::before { +.checkbox label::before { top: 1px; content: ""; display: inline-block; @@ -512,11 +508,7 @@ it only applies if they're in a container that has the checkbox/radio class */ -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } -.radio label::before { - border-radius: 8px; -} -.checkbox label::after, -.radio label::after { +.checkbox label::after { display: inline-block; position: absolute; width: 16px; @@ -530,7 +522,7 @@ it only applies if they're in a container that has the checkbox/radio class */ color: #555555; } .checkbox input[type="checkbox"], -.radio input[type="radio"] { +.checkbox input[type="radio"] { opacity: 0; z-index: 1; top: -3px; @@ -540,20 +532,92 @@ it only applies if they're in a container that has the checkbox/radio class */ .checkbox input[type="checkbox"]:focus + label::before, -.radio input[type="radio"]:focus + label::before { +.checkbox input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox input[type="checkbox"]:checked + label::after, -.radio input[type="radio"]:checked + label::after { +.checkbox input[type="radio"]:checked + label::after { font-family: "Glyphicons Halflings"; content: "\E013"; } + +.radio { + padding-left: 20px; +} +.radio label { + display: inline-block; + vertical-align: middle; + position: relative; + padding-left: 5px; +} +.radio label::before { + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + margin-left: -20px; + border: 1px solid #cccccc; + border-radius: 50%; + background-color: #fff; + -webkit-transition: border 0.15s ease-in-out; + -o-transition: border 0.15s ease-in-out; + transition: border 0.15s ease-in-out; +} +.radio label::after { + display: inline-block; + position: absolute; + content: " "; + width: 11px; + height: 11px; + left: 3px; + top: 3px; + margin-left: -20px; + border-radius: 50%; + background-color: #555555; + -webkit-transform: scale(0, 0); + -ms-transform: scale(0, 0); + -o-transform: scale(0, 0); + transform: scale(0, 0); + -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); +} +.radio input[type="radio"] { + opacity: 0; + z-index: 1; + cursor: pointer; +} +.radio input[type="radio"]:focus + label::before { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} .radio input[type="radio"]:checked + label::after { - content: "\002a"; + -webkit-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1); } +.radio input[type="radio"]:disabled { + cursor: not-allowed; +} +.radio input[type="radio"]:disabled + label { + opacity: 0.65; +} +.radio input[type="radio"]:disabled + label::before { + cursor: not-allowed; +} +.radio.radio-inline { + margin-top: 0; +} + + /* Hack to get ellipsis in containers without absolute width */ /* Use: <table class="slx-ellipsis"><tr><td>my text bla bla</td></tr></table> */ |