Bug 1263709 - Remove the advanced styling for radio buttons and checkboxes. ui-r=shorlander, r=kmag
authorBlake Winton <bwinton@latte.ca>
Mon, 11 Apr 2016 15:53:06 -0400
changeset 294797 e50f2538de72132e78f5a26b1d4f0fbf4c820df2
parent 294796 736434eaac6c4cb4c5ac238ebd8f9bafd194c7d4
child 294798 945158dca099946bdac8dcdc3b10986b26fbe443
push id30211
push userkwierso@gmail.com
push dateTue, 26 Apr 2016 00:12:12 +0000
treeherdermozilla-central@cfc7ebe59293 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersshorlander, kmag
bugs1263709
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1263709 - Remove the advanced styling for radio buttons and checkboxes. ui-r=shorlander, r=kmag MozReview-Commit-ID: A9CWD9SPZlP
browser/components/extensions/extension.css
--- a/browser/components/extensions/extension.css
+++ b/browser/components/extensions/extension.css
@@ -133,158 +133,47 @@ button.default.pressed {
 
 button.default.focused {
   border-color: #fff;
 }
 
 /* Radio Buttons */
 .radioItem {
   margin-bottom: 6px;
-  text-align: left;
-}
-
-input[type="radio"] {
-  display: none;
 }
 
 input[type="radio"] + label {
   -moz-user-select: none;
-}
-
-input[type="radio"] + label::before {
-  background-color: #fff;
-  background-position: center;
-  border: 1px solid #b1b1b1;
-  border-radius: 50%;
-  content: "";
-  display: inline-block;
-  height: 16px;
-  margin-right: 6px;
-  vertical-align: text-top;
-  width: 16px;
-}
-
-input[type="radio"]:hover + label::before,
-.radioItem.hover input[type="radio"]:not(active) + label::before {
-  background-color: #fbfbfb;
-  border-color: #b1b1b1;
-}
-
-input[type="radio"]:hover:active + label::before,
-.radioItem.pressed input[type="radio"]:not(active) + label::before {
-  background-color: #ebebeb;
-  border-color: #858585;
-}
-
-input[type="radio"]:checked + label::before {
-  background-color: #0996f8;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==);
-  border-color: #0670cc;
-}
-
-input[type="radio"]:checked:hover + label::before,
-.radioItem.hover input[type="radio"]:checked:not(active) + label::before {
-  background-color: #0670cc;
-  border-color: #005bab;
-}
-
-input[type="radio"]:checked:hover:active + label::before,
-.radioItem.pressed input[type="radio"]:checked:not(active) + label::before {
-  background-color: #005bab;
-  border-color: #004480;
+  text-align: left;
 }
 
 .radioItem.disabled input[type="radio"] + label,
 .radioItem.disabled input[type="radio"]:hover + label,
 .radioItem.disabled input[type="radio"]:hover:active + label {
   color: #999;
   opacity: .5;
 }
 
-.radioItem.focused input[type="radio"] + label::before {
-  border-color: #0996f8;
-  box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
-}
-
-.radioItem.focused input[type="radio"]:checked + label::before {
-  border-color: #fff;
-}
-
 /* Checkboxes */
 .checkboxItem {
   margin-bottom: 6px;
-  text-align: left;
-}
-
-input[type="checkbox"] {
-  display: none;
 }
 
 input[type="checkbox"] + label {
   -moz-user-select: none;
-}
-
-input[type="checkbox"] + label::before {
-  background-color: #fff;
-  background-position: center;
-  border: 1px solid #b1b1b1;
-  content: "";
-  display: inline-block;
-  height: 16px;
-  margin-right: 6px;
-  vertical-align: text-top;
-  width: 16px;
-}
-
-input[type="checkbox"]:hover + label::before,
-.checkboxItem.hover input[type="checkbox"]:not(active) + label::before {
-  background-color: #fbfbfb;
-  border-color: #b1b1b1;
-}
-
-input[type="checkbox"]:hover:active + label::before,
-.checkboxItem.pressed input[type="checkbox"]:not(active) + label::before {
-  background-color: #ebebeb;
-  border-color: #858585;
-}
-
-input[type="checkbox"]:checked + label::before {
-  background-color: #0996f8;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K);
-  border-color: #0670cc;
-}
-
-input[type="checkbox"]:checked:hover + label::before,
-.checkboxItem.hover input[type="checkbox"]:checked:not(active) + label::before {
-  background-color: #0670cc;
-  border-color: #005bab;
-}
-
-input[type="checkbox"]:checked:hover:active + label::before,
-.checkboxItem.pressed input[type="checkbox"]:checked:not(active) + label::before {
-  background-color: #005bab;
-  border-color: #004480;
+  text-align: left;
 }
 
 .checkboxItem.disabled input[type="checkbox"] + label,
 .checkboxItem.disabled input[type="checkbox"]:hover + label,
 .checkboxItem.disabled input[type="checkbox"]:hover:active + label {
   color: #999;
   opacity: .5;
 }
 
-.checkboxItem.focused input[type="checkbox"] + label::before {
-  border-color: #0996f8;
-  box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
-}
-
-.checkboxItem.focused input[type="checkbox"]:checked + label::before {
-  border-color: #fff;
-}
-
 /* Expander Button */
 button.expander {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
   background-position: center;
   background-repeat: no-repeat;
   height: 24px;
   padding: 0;
   width: 24px;
@@ -460,17 +349,17 @@ textarea:focus:hover {
 }
 
 .panel-formElements-item:last-child {
   margin-bottom: 0;
 }
 
 .panel-formElements-item label {
   flex-shrink: 0;
-  margin-right: 6px;
+  margin: 0 6px;
   text-align: right;
 }
 
 .panel-formElements-item input[type="text"],
 .panel-formElements-item select {
   flex-grow: 1;
 }