From 3978b99207a77cd7170a9b8f17e9a2a441136656 Mon Sep 17 00:00:00 2001 From: Simon Rettberg Date: Tue, 6 Sep 2016 15:38:39 +0200 Subject: CSS: Make the checkbox style fix global --- style/default.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) (limited to 'style') diff --git a/style/default.css b/style/default.css index a5450742..06833121 100644 --- a/style/default.css +++ b/style/default.css @@ -494,4 +494,65 @@ nav.navbar.sidebar { .slx-smallsubmenu a { color: #fff; -} \ No newline at end of file +} + +/* 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 class */ + +.checkbox { + padding-left: 20px; +} +.checkbox label { + display: inline-block; + vertical-align: middle; + position: relative; + padding-left: 5px; +} +.checkbox label::before { + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + margin-left: -20px; + border: 1px solid #cccccc; + border-radius: 3px; + background-color: #fff; + -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + -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; +} +.checkbox label::after { + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 0; + margin-left: -20px; + padding-left: 3px; + padding-top: 1px; + font-size: 11px; + color: #555555; +} +.checkbox input[type="checkbox"], +.checkbox input[type="radio"] { + opacity: 0; + z-index: 1; + top: -6px; +} + + +.checkbox input[type="checkbox"]: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, +.checkbox input[type="radio"]:checked + label::after { + font-family: "Glyphicons Halflings"; + content: "\E013"; +} -- cgit v1.2.3-55-g7522