Make vex button styling more accessible to custom markup (Addresses H…

…ubSpot#5) @gregsabo
HZ-labs · Sep 21, 2013 · 61d713e · 61d713e
1 parent 2b326c6
commit 61d713e
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 193 deletions.
diff --git a/css/vex-theme-default.css b/css/vex-theme-default.css
@@ -448,7 +448,7 @@
   clear: both;
 }
 /* line 90, ../sass/vex-theme-default.sass */
-.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
+.vex.vex-theme-default .vex-dialog-button {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -465,11 +465,11 @@
   padding: 0.75em 2em;
 }
 /* line 102, ../sass/vex-theme-default.sass */
-.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-last {
+.vex.vex-theme-default .vex-dialog-button.vex-last {
   margin-left: 0;
 }
 /* line 105, ../sass/vex-theme-default.sass */
-.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+.vex.vex-theme-default .vex-dialog-button:focus {
   animation: vex-pulse 1.1s infinite;
   -webkit-animation: vex-pulse 1.1s infinite;
   -moz-animation: vex-pulse 1.1s infinite;
@@ -480,7 +480,7 @@
 }
 @media (max-width: 568px) {
   /* line 105, ../sass/vex-theme-default.sass */
-  .vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+  .vex.vex-theme-default .vex-dialog-button:focus {
     animation: none;
     -webkit-animation: none;
     -moz-animation: none;
@@ -490,12 +490,12 @@
   }
 }
 /* line 114, ../sass/vex-theme-default.sass */
-.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
   background: #3288e6;
   color: white;
 }
 /* line 118, ../sass/vex-theme-default.sass */
-.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary {
+.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
   background: #e0e0e0;
   color: #777777;
 }

diff --git a/css/vex-theme-flat-attack.css b/css/vex-theme-flat-attack.css
@@ -344,7 +344,7 @@
   clear: both;
 }
 /* line 114, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
+.vex.vex-theme-flat-attack .vex-dialog-button {
   border: 0;
   margin: 0;
   float: right;
@@ -357,39 +357,39 @@
   font-family: inherit;
 }
 /* line 126, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-last {
+.vex.vex-theme-flat-attack .vex-dialog-button.vex-last {
   margin-left: 0;
 }
 /* line 129, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+.vex.vex-theme-flat-attack .vex-dialog-button:focus {
   outline: none;
 }
 /* line 132, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary {
   background: #666666;
   color: white;
 }
 /* line 136, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary:focus {
+.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary:focus {
   -webkit-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
 }
 /* line 139, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary {
+.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary {
   background: white;
   color: #cccccc;
 }
 /* line 143, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary:focus {
+.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:focus {
   -webkit-box-shadow: inset 0 3px #aaaaaa;
   -moz-box-shadow: inset 0 3px #aaaaaa;
   box-shadow: inset 0 3px #aaaaaa;
   background: #eeeeee;
   color: #777777;
 }
 /* line 148, ../sass/vex-theme-flat-attack.sass */
-.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary:hover, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary:active {
+.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:hover, .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:active {
   color: #777777;
 }
 /* line 16, ../sass/vex-theme-flat-attack.sass */

diff --git a/css/vex-theme-os.css b/css/vex-theme-os.css
@@ -477,7 +477,7 @@
   clear: both;
 }
 /* line 94, ../sass/vex-theme-os.sass */
-.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
+.vex.vex-theme-os .vex-dialog-button {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -494,11 +494,11 @@
   padding: 0.75em 2em;
 }
 /* line 106, ../sass/vex-theme-os.sass */
-.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-last {
+.vex.vex-theme-os .vex-dialog-button.vex-last {
   margin-left: 0;
 }
 /* line 109, ../sass/vex-theme-os.sass */
-.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+.vex.vex-theme-os .vex-dialog-button:focus {
   animation: vex-pulse 1.1s infinite;
   -webkit-animation: vex-pulse 1.1s infinite;
   -moz-animation: vex-pulse 1.1s infinite;
@@ -509,7 +509,7 @@
 }
 @media (max-width: 568px) {
   /* line 109, ../sass/vex-theme-os.sass */
-  .vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+  .vex.vex-theme-os .vex-dialog-button:focus {
     animation: none;
     -webkit-animation: none;
     -moz-animation: none;
@@ -519,12 +519,12 @@
   }
 }
 /* line 118, ../sass/vex-theme-os.sass */
-.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-primary {
   background: #3288e6;
   color: white;
 }
 /* line 122, ../sass/vex-theme-os.sass */
-.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary {
+.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-secondary {
   background: #e0e0e0;
   color: #777777;
 }

diff --git a/css/vex-theme-plain.css b/css/vex-theme-plain.css
@@ -215,7 +215,7 @@
   clear: both;
 }
 /* line 80, ../sass/vex-theme-plain.sass */
-.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
+.vex.vex-theme-plain .vex-dialog-button {
   border: 0;
   float: right;
   margin: 0 0 0 0.5em;
@@ -227,11 +227,11 @@
   padding: 0.75em 2em;
 }
 /* line 91, ../sass/vex-theme-plain.sass */
-.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-last {
+.vex.vex-theme-plain .vex-dialog-button.vex-last {
   margin-left: 0;
 }
 /* line 94, ../sass/vex-theme-plain.sass */
-.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+.vex.vex-theme-plain .vex-dialog-button:focus {
   animation: vex-pulse 1.1s infinite;
   -webkit-animation: vex-pulse 1.1s infinite;
   -moz-animation: vex-pulse 1.1s infinite;
@@ -242,7 +242,7 @@
 }
 @media (max-width: 568px) {
   /* line 94, ../sass/vex-theme-plain.sass */
-  .vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+  .vex.vex-theme-plain .vex-dialog-button:focus {
     animation: none;
     -webkit-animation: none;
     -moz-animation: none;
@@ -252,12 +252,12 @@
   }
 }
 /* line 103, ../sass/vex-theme-plain.sass */
-.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {
   background: #3288e6;
   color: white;
 }
 /* line 107, ../sass/vex-theme-plain.sass */
-.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary {
+.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary {
   background: #e0e0e0;
   color: #777777;
 }

diff --git a/css/vex-theme-wireframe.css b/css/vex-theme-wireframe.css
@@ -216,7 +216,7 @@
   clear: both;
 }
 /* line 80, ../sass/vex-theme-wireframe.sass */
-.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
+.vex.vex-theme-wireframe .vex-dialog-button {
   border: 0;
   float: right;
   margin: 0 0 0 0.5em;
@@ -228,11 +228,11 @@
   padding: 0.75em 2em;
 }
 /* line 91, ../sass/vex-theme-wireframe.sass */
-.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-last {
+.vex.vex-theme-wireframe .vex-dialog-button.vex-last {
   margin-left: 0;
 }
 /* line 94, ../sass/vex-theme-wireframe.sass */
-.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+.vex.vex-theme-wireframe .vex-dialog-button:focus {
   animation: vex-pulse 1.1s infinite;
   -webkit-animation: vex-pulse 1.1s infinite;
   -moz-animation: vex-pulse 1.1s infinite;
@@ -243,7 +243,7 @@
 }
 @media (max-width: 568px) {
   /* line 94, ../sass/vex-theme-wireframe.sass */
-  .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
+  .vex.vex-theme-wireframe .vex-dialog-button:focus {
     animation: none;
     -webkit-animation: none;
     -moz-animation: none;
@@ -253,13 +253,13 @@
   }
 }
 /* line 103, ../sass/vex-theme-wireframe.sass */
-.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary {
   background: black;
   color: white;
   border: 2px solid transparent;
 }
 /* line 108, ../sass/vex-theme-wireframe.sass */
-.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-secondary {
+.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-secondary {
   background: white;
   color: black;
   border: 2px solid black;

diff --git a/css/vex.css b/css/vex.css
@@ -291,13 +291,14 @@
 .vex-dialog-form {
   margin: 0;
 }
-/* line 51, ../sass/vex.sass */
-.vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
+
+/* line 49, ../sass/vex.sass */
+.vex-dialog-button {
   -webkit-appearance: none;
   cursor: pointer;
 }
 
-/* line 55, ../sass/vex.sass */
+/* line 53, ../sass/vex.sass */
 .vex-loading-spinner {
   animation: vex-rotation 0.7s linear infinite;
   -webkit-animation: vex-rotation 0.7s linear infinite;

diff --git a/sass/vex-theme-default.sass b/sass/vex-theme-default.sass
@@ -87,37 +87,37 @@ $blue: #3288e6
         .vex-dialog-buttons
             +pie-clearfix()
 
-            .vex-dialog-button
-                +border-radius(3px)
-                border: 0
-                float: right
-                margin: 0 0 0 .5em
-                font-family: inherit
-                text-transform: uppercase
-                letter-spacing: .1em
-                font-size: .8em
-                line-height: 1em
-                padding: .75em 2em
-
-                &.vex-last
-                    margin-left: 0
-
-                &:focus
-                    +vex-animation(vex-pulse 1.1s infinite)
-                    outline: none
-
-                    // vex-pulse uses -webkit-filter which
-                    // doesn't play so nice in mobile webkit
-                    @media (max-width: 568px)
-                        +vex-animation(none)
-
-                &.vex-dialog-button-primary
-                    background: $blue
-                    color: #fff
-
-                &.vex-dialog-button-secondary
-                    background: #e0e0e0
-                    color: #777
+    .vex-dialog-button
+        +border-radius(3px)
+        border: 0
+        float: right
+        margin: 0 0 0 .5em
+        font-family: inherit
+        text-transform: uppercase
+        letter-spacing: .1em
+        font-size: .8em
+        line-height: 1em
+        padding: .75em 2em
+
+        &.vex-last
+            margin-left: 0
+
+        &:focus
+            +vex-animation(vex-pulse 1.1s infinite)
+            outline: none
+
+            // vex-pulse uses -webkit-filter which
+            // doesn't play so nice in mobile webkit
+            @media (max-width: 568px)
+                +vex-animation(none)
+
+        &.vex-dialog-button-primary
+            background: $blue
+            color: #fff
+
+        &.vex-dialog-button-secondary
+            background: #e0e0e0
+            color: #777
 
 .vex-loading-spinner.vex-theme-default
     +box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3))