Permalink
Browse files

Animation `keyframes` need to appear outside of `screen` rules

Plus a few comment corrections
  • Loading branch information...
philwareham committed Oct 14, 2016
1 parent 824894d commit 76c75b2244df3c3d82bfec178f24442a08c13069
@@ -625,18 +625,6 @@ button {
/*
* Flash the alert message using CSS animation.
*/
- @keyframes messageflash {
- 0% {
- opacity: 0;
- }
- 75% {
- opacity: 0.5;
- }
- 50%,
- 100% {
- opacity: 1;
- }
- }
.messageflash {
animation: messageflash 1s;
}
@@ -4019,9 +4007,7 @@ button {
*
* Example HTML:
*
- * <a class="ui-button ui-button-text-only">
- * <span class="ui-button-text">Button</span>
- * </a>
+ * <a class="ui-button ui-corner-all ui-widget">Button</a>
*/
.ui-button {
display: inline-block;
@@ -4086,9 +4072,10 @@ button {
*
* Example HTML:
*
- * <a class="ui-button ui-button-icon-only">
- * <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
- * <span class="ui-button-text">Button one icon, no text</span>
+ * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only">
+ * <span class="ui-button-icon ui-icon ui-icon-gear"></span>
+ * <span class="ui-button-icon-space"> </span>
+ * Button one icon, no text
* </a>
*/
.ui-button-icon-only {
@@ -4170,18 +4157,16 @@ button {
*
* Example HTML:
*
- * <input class="ui-helper-hidden-accessible" id="check" type="checkbox">
- * <label for="check" class="ui-button ui-button-text-only ui-state-active">
- * <span class="ui-button-text">Toggle</span>
- * </label>
+ * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox">
+ * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label>
*/
- label.ui-state-active.ui-button {
+ .ui-checkboxradio-checked.ui-button {
background-color: #fff8dd;
}
- label.ui-state-active.ui-button:hover {
+ .ui-checkboxradio-checked.ui-button:hover {
background-color: #fffdf7;
}
- label.ui-state-active.ui-button:active {
+ .ui-checkboxradio-checked.ui-button:active {
background-color: #fff0b4;
}
/* Controlgroup
@@ -5217,6 +5202,22 @@ button {
}
}
+/* ==========================================================================
+ Animation `keyframes` need to appear outside of `screen` rules
+ ========================================================================== */
+@keyframes messageflash {
+ 0% {
+ opacity: 0;
+ }
+ 75% {
+ opacity: 0.5;
+ }
+ 50%,
+ 100% {
+ opacity: 1;
+ }
+}
+
/* ==========================================================================
Styling and layout for print media
========================================================================== */

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -625,18 +625,6 @@ button {
/*
* Flash the alert message using CSS animation.
*/
- @keyframes messageflash {
- 0% {
- opacity: 0;
- }
- 75% {
- opacity: 0.5;
- }
- 50%,
- 100% {
- opacity: 1;
- }
- }
.messageflash {
animation: messageflash 1s;
}
@@ -4613,9 +4601,7 @@ button {
*
* Example HTML:
*
- * <a class="ui-button ui-button-text-only">
- * <span class="ui-button-text">Button</span>
- * </a>
+ * <a class="ui-button ui-corner-all ui-widget">Button</a>
*/
.ui-button {
background-color: #dddddd;
@@ -4687,9 +4673,10 @@ button {
*
* Example HTML:
*
- * <a class="ui-button ui-button-icon-only">
- * <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
- * <span class="ui-button-text">Button one icon, no text</span>
+ * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only">
+ * <span class="ui-button-icon ui-icon ui-icon-gear"></span>
+ * <span class="ui-button-icon-space"> </span>
+ * Button one icon, no text
* </a>
*/
.ui-button-icon-only {
@@ -4786,22 +4773,20 @@ button {
*
* Example HTML:
*
- * <input class="ui-helper-hidden-accessible" id="check" type="checkbox">
- * <label for="check" class="ui-button ui-button-text-only ui-state-active">
- * <span class="ui-button-text">Toggle</span>
- * </label>
+ * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox">
+ * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label>
*/
- label.ui-state-active.ui-button {
+ .ui-checkboxradio-checked.ui-button {
background-color: #cce0ff;
background-image: linear-gradient(#e6f0ff, #cce0ff);
border-color: #96bfff;
}
- label.ui-state-active.ui-button:hover {
+ .ui-checkboxradio-checked.ui-button:hover {
background-color: #d6e6ff;
background-image: linear-gradient(#f5f9ff, #d6e6ff);
border-color: #4a91ff;
}
- label.ui-state-active.ui-button:active {
+ .ui-checkboxradio-checked.ui-button:active {
background-color: #b3d1ff;
background-image: linear-gradient(#cde1ff, #b3d1ff);
border-color: #4a91ff;
@@ -6170,6 +6155,22 @@ button {
}
}
+/* ==========================================================================
+ Animation `keyframes` need to appear outside of `screen` rules
+ ========================================================================== */
+@keyframes messageflash {
+ 0% {
+ opacity: 0;
+ }
+ 75% {
+ opacity: 0.5;
+ }
+ 50%,
+ 100% {
+ opacity: 1;
+ }
+}
+
/* ==========================================================================
Styling and layout for print media
========================================================================== */

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -623,18 +623,6 @@ button {
/*
* Flash the alert message using CSS animation.
*/
- @keyframes messageflash {
- 0% {
- opacity: 0;
- }
- 75% {
- opacity: 0.5;
- }
- 50%,
- 100% {
- opacity: 1;
- }
- }
.messageflash {
animation: messageflash 1s;
}
@@ -4577,9 +4565,7 @@ button {
*
* Example HTML:
*
- * <a class="ui-button ui-button-text-only">
- * <span class="ui-button-text">Button</span>
- * </a>
+ * <a class="ui-button ui-corner-all ui-widget">Button</a>
*/
.ui-button {
background-color: #5ba4e5;
@@ -4643,9 +4629,10 @@ button {
*
* Example HTML:
*
- * <a class="ui-button ui-button-icon-only">
- * <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
- * <span class="ui-button-text">Button one icon, no text</span>
+ * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only">
+ * <span class="ui-button-icon ui-icon ui-icon-gear"></span>
+ * <span class="ui-button-icon-space"> </span>
+ * Button one icon, no text
* </a>
*/
.ui-button-icon-only {
@@ -4742,21 +4729,19 @@ button {
*
* Example HTML:
*
- * <input class="ui-helper-hidden-accessible" id="check" type="checkbox">
- * <label for="check" class="ui-button ui-button-text-only ui-state-active">
- * <span class="ui-button-text">Toggle</span>
- * </label>
+ * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox">
+ * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label>
*/
- label.ui-state-active.ui-button {
+ .ui-checkboxradio-checked.ui-button {
background-color: #9dc8ef;
border-color: #6faee7;
}
- label.ui-state-active.ui-button:hover {
+ .ui-checkboxradio-checked.ui-button:hover {
background-color: #a6cdf0;
background-image: linear-gradient(#aacff1, #a6cdf0);
border-color: #2d89dd;
}
- label.ui-state-active.ui-button:active {
+ .ui-checkboxradio-checked.ui-button:active {
background-color: #87bceb;
border-color: #2d89dd;
}
@@ -6111,6 +6096,22 @@ button {
}
}
+/* ==========================================================================
+ Animation `keyframes` need to appear outside of `screen` rules
+ ========================================================================== */
+@keyframes messageflash {
+ 0% {
+ opacity: 0;
+ }
+ 75% {
+ opacity: 0.5;
+ }
+ 50%,
+ 100% {
+ opacity: 1;
+ }
+}
+
/* ==========================================================================
Styling and layout for print media
========================================================================== */

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 76c75b2

Please sign in to comment.