Merge pull request #109 from Tripwire/feature/no-tripwire-classes

fix(button): removed 'tripwire' from styles and markup and tweaked st…
Tripwire · Jul 27, 2017 · d7e4e39 · d7e4e39
2 parents f02996d + ed55773
commit d7e4e39
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/semantic/src/themes/tripwire/elements/button.overrides b/semantic/src/themes/tripwire/elements/button.overrides
@@ -3,46 +3,47 @@
 *******************************/
 
 
-.ui.tripwire.button {
+.ui.button {
   color: @grey;
   border: 2px solid #A6A8AB;
   background: @white;
   border-radius: 0px;
 }
 
-.ui.tripwire.button:active,
-.ui.tripwire.active.button:active {
+.ui.button:active,
+.ui.active.button:active {
   border-color: @blue;
   color: @white;
   background: @blue;
 }
-.ui.tripwire.active.button {
+.ui.active.button {
   border-color: @blue;
   color: @white;
   background: @blue;
 }
 
-.ui.tripwire.button:focus,
-.ui.tripwire.button:hover {
+.ui.button:focus,
+.ui.button:hover {
   border-color: @blue;
   color: @blue;
+  background: @white;
 }
-.ui.tripwire.button:active {
+.ui.button:active {
   border-color: @blue;
   color: @white;
   background: @blue;
 }
-.ui.tripwire.active.button {
+.ui.active.button {
   border-color: @blue;
   color: @white;
   background: @blue;
 }
-.ui.tripwire.active.button:hover {
+.ui.active.button:hover {
   border-color: @blue;
   color: @white;
   background: @blue;
 }
-.ui.tripwire.active.button:active {
+.ui.active.button:active {
   border-color: @blue;
   color: @white;
   background: @blue;
@@ -150,6 +151,7 @@
 .ui.icon.button {
   color: @grey;
   background: transparent;
+  border: 0;
 }
 .ui.icon.button:hover {
   color: @blue;

diff --git a/src/components/suir/button/Button.examples.md b/src/components/suir/button/Button.examples.md
@@ -1,32 +1,32 @@
 ## Generic
 
     const Button = require('semantic-ui-react').Button;
-    <Button className='tripwire'>Test button</Button>
+    <Button className=''>Test button</Button>
 
 ## Disabled Button
 
     const Button = require('semantic-ui-react').Button;
-    <Button className='tripwire' disabled >Some Copy </Button>
+    <Button className='' disabled >Some Copy </Button>
 
 ## Active Button
 
     const Button = require('semantic-ui-react').Button;
-    <Button className='tripwire' active>
+    <Button className='' active>
         Some Copy
     </Button>
 
 ## Positive Button
 
     const Button = require('semantic-ui-react').Button;
-    <Button positive className='tripwire'>
+    <Button positive className=''>
       <i className='icon_check' style={{marginRight: '10px'}} />
         Positive
       </Button>
 
 ## Negative Button
 
     const Button = require('semantic-ui-react').Button;
-    <Button negative className='tripwire'>
+    <Button negative className=''>
     <i className='icon_close' style={{marginRight: '10px'}} />
     Negative
     </Button>

diff --git a/src/components/suir/popup/Popup.examples.md b/src/components/suir/popup/Popup.examples.md
@@ -2,19 +2,19 @@
     const Button = require('semantic-ui-react').Button;
     <div>
         <Popup
-          trigger={<Button className='tripwire'>Popup Neutral</Button>}
+          trigger={<Button className=''>Popup Neutral</Button>}
           content='Neutral Popup Content'
           className='grey'
           positioning='bottom left' />
         <br /><br />
         <Popup
-            trigger={<Button className='tripwire'>Popup Critical</Button>}
+            trigger={<Button className=''>Popup Critical</Button>}
             content='Critical Popup Content'
             className='red'
             positioning='top right'/>
         <br /><br />
         <Popup
-            trigger={<Button className='tripwire'>Popup Warning</Button>}
+            trigger={<Button className=''>Popup Warning</Button>}
             content='Warning Popup Content'
             className='yellow'
             positioning='bottom left' />