From 13f33f9a42f05c7a51149b7887a59f8128f90038 Mon Sep 17 00:00:00 2001 From: Simon Rettberg Date: Fri, 1 Dec 2017 14:13:57 +0100 Subject: [style.css] Try to reduce copy&paste --- style/default.css | 100 +++++++++++++++--------------------------------------- 1 file changed, 27 insertions(+), 73 deletions(-) (limited to 'style') diff --git a/style/default.css b/style/default.css index 9f8b4091..fc8d3af1 100644 --- a/style/default.css +++ b/style/default.css @@ -481,18 +481,21 @@ nav.navbar.sidebar { 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 { +.checkbox, +.radio { padding-left: 20px; margin-top: 5px; margin-bottom: 2px; } -.checkbox label { +.checkbox label, +.radio label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; } -.checkbox label::before { +.checkbox label::before, +.radio label::before { top: 1px; content: ""; display: inline-block; @@ -504,13 +507,16 @@ it only applies if they're in a container that has the checkbox class */ 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 { +.radio label::before { + border-radius: 50%; +} +.checkbox label::after, +.radio label::after { display: inline-block; position: absolute; + content: " "; width: 16px; height: 16px; left: 0; @@ -521,95 +527,45 @@ it only applies if they're in a container that has the checkbox class */ font-size: 11px; color: #555555; } -.checkbox input[type="checkbox"], -.checkbox input[type="radio"] { - opacity: 0; - z-index: 1; - top: -3px; - width: 17px; - height: 17px; -} - - -.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"; -} - - -.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; + top: 4px; border-radius: 50%; + color: inherit; 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"]:checked + label::after { + transform: scale(1, 1); +} +.checkbox input[type="checkbox"], .radio input[type="radio"] { opacity: 0; z-index: 1; - cursor: pointer; + width: 17px; + height: 17px; } +.checkbox input[type="checkbox"]:focus + label::before, .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 { - -webkit-transform: scale(1, 1); - -ms-transform: scale(1, 1); - -o-transform: scale(1, 1); - transform: scale(1, 1); +.checkbox input[type="checkbox"]:checked + label::after { + font-family: "Glyphicons Halflings"; + content: "\E013"; } +.checkbox input[type="checkbox"]:disabled, .radio input[type="radio"]:disabled { cursor: not-allowed; } +.checkbox input[type="checkbox"]:disabled + label, .radio input[type="radio"]:disabled + label { opacity: 0.65; } +.checkbox input[type="checkbox"]:disabled + label::before, .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } @@ -617,8 +573,6 @@ it only applies if they're in a container that has the checkbox class */ margin-top: 0; } - - /* Hack to get ellipsis in containers without absolute width */ /* Use:
my text bla bla |