summaryrefslogtreecommitdiffstats
path: root/style
diff options
context:
space:
mode:
authorSimon Rettberg2017-12-01 14:13:57 +0100
committerSimon Rettberg2017-12-01 14:13:57 +0100
commit13f33f9a42f05c7a51149b7887a59f8128f90038 (patch)
tree15b9df0a9776a9beab211e809d7a279f9662245c /style
parent[inc/User] Fix permission compat to old system (diff)
downloadslx-admin-13f33f9a42f05c7a51149b7887a59f8128f90038.tar.gz
slx-admin-13f33f9a42f05c7a51149b7887a59f8128f90038.tar.xz
slx-admin-13f33f9a42f05c7a51149b7887a59f8128f90038.zip
[style.css] Try to reduce copy&paste
Diffstat (limited to 'style')
-rw-r--r--style/default.css100
1 files changed, 27 insertions, 73 deletions
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: <table class="slx-ellipsis"><tr><td>my text bla bla</td></tr></table> */