playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

refactoring our buttons

pull/245/head
connors 11 years ago
parent
eb3145bf1e
commit
ecc391a731
3 changed files with 101 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      dist/ratchet.css
  2. 55
      index.html
  3. 64
      lib/sass/buttons.scss

65
dist/ratchet.css vendored
Unescape View File

@ -631,44 +631,60 @@ select {
vertical-align: top; vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #dddddd; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
} }
[class*="button"].button-filled {
background-color: white;
}
[class*="button"]:active, [class*="button"].active { [class*="button"]:active, [class*="button"].active {
background-color: #ebebeb; background-color: #ccc;
} }
[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active { [class*="button"]:disabled, [class*="button"].disabled {
opacity: .6; opacity: .6;
} }
.button-primary { .button-primary {
color: #428bca;
border: 1px solid #428bca;
}
.button-primary:active, .button-primary.active, .button-primary.button-filled {
color: #fff; color: #fff;
border: 1px solid #428bca;
background-color: #428bca; background-color: #428bca;
} }
.button-primary:active, .button-primary.active {
border: 1px solid #3071a9;
background-color: #3071a9;
}
.button-positive { .button-positive {
color: #5cb85c;
border: 1px solid #5cb85c;
}
.button-positive:active, .button-positive.active, .button-positive.button-filled {
color: #fff; color: #fff;
border: 1px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
} }
.button-positive:active, .button-positive.active {
border: 1px solid #449d44;
background-color: #449d44;
}
.button-negative { .button-negative {
color: #d9534f; color: #fff;
border: 1px solid #d9534f; border: 1px solid #d9534f;
background-color: #d9534f;
} }
.button-negative:active, .button-negative.active, .button-negative.button-filled { .button-negative:active, .button-negative.active {
border: 1px solid #c9302c;
background-color: #c9302c;
}
.button-outlined {
background-color: transparent;
}
.button-outlined.button-primary {
color: #428bca;
}
.button-outlined.button-positive {
color: #5cb85c;
}
.button-outlined.button-negative {
color: #d9534f;
}
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
color: #fff; color: #fff;
background-color: #d9534f;
} }
.button-link { .button-link {
@ -678,9 +694,6 @@ select {
.button-link:active, .button-link.active { .button-link:active, .button-link.active {
color: #3071a9; color: #3071a9;
} }
.button-link.button-filled {
background-color: transparent;
}
.button-block { .button-block {
display: block; display: block;
@ -689,6 +702,12 @@ select {
font-size: 18px; font-size: 18px;
} }
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
.bar-nav [class*="button"] { .bar-nav [class*="button"] {
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -725,12 +744,6 @@ select {
font-size: 16px; font-size: 16px;
} }
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
.popover .button-block { .popover .button-block {
margin-bottom: 5px; margin-bottom: 5px;
} }

55
index.html
Unescape View File

@ -609,22 +609,22 @@ layout: default
<h3 class="component-title">Buttons with badges</h3> <h3 class="component-title">Buttons with badges</h3>
<div class="component-example"> <div class="component-example">
<a class="button">Badge button<span class="badge badge-filled">1</span></a> <a class="button">Badge button<span class="badge">1</span></a>
<a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a> <a class="button-primary">Badge button<span class="badge-primary">1</span></a>
<a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a> <a class="button-positive">Badge button<span class="badge-positive">1</span></a>
<a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a> <a class="button-negative">Badge button<span class="badge-negative">1</span></a>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="button">Badge button<span class="badge badge-filled">1</span></a> <a class="button">Badge button<span class="badge">1</span></a>
<a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a> <a class="button-primary">Badge button<span class="badge-primary">1</span></a>
<a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a> <a class="button-positive">Badge button<span class="badge-positive">1</span></a>
<a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a> <a class="button-negative">Badge button<span class="badge-negative">1</span></a>
<a class="button-filled">Badge button<span class="badge badge-filled">1</span></a> <a class="button-outlined">Badge button<span class="badge">1</span></a>
<a class="button-filled button-primary">Badge button<span class="badge-primary badge-filled">1</span></a> <a class="button-outlined button-primary">Badge button<span class="badge-primary">1</span></a>
<a class="button-filled button-positive">Badge button<span class="badge-positive badge-filled">1</span></a> <a class="button-outlined button-positive">Badge button<span class="badge-positive">1</span></a>
<a class="button-filled button-negative">Badge button<span class="badge-negative badge-filled">1</span></a> <a class="button-outlined button-negative">Badge button<span class="badge-negative">1</span></a>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -638,10 +638,10 @@ layout: default
<a class="button-positive button-block">Block button</a> <a class="button-positive button-block">Block button</a>
<a class="button-negative button-block">Block button</a> <a class="button-negative button-block">Block button</a>
<a class="button-block button-filled">Block button</a> <a class="button-block button-outlined">Block button</a>
<a class="button-primary button-block button-filled">Block button</a> <a class="button-primary button-block button-outlined">Block button</a>
<a class="button-positive button-block button-filled">Block button</a> <a class="button-positive button-block button-outlined">Block button</a>
<a class="button-negative button-block button-filled">Block button</a> <a class="button-negative button-block button-outlined">Block button</a>
</div> </div>
{% highlight html %} {% highlight html %}
@ -650,10 +650,10 @@ layout: default
<a class="button-positive button-block">Block button</a> <a class="button-positive button-block">Block button</a>
<a class="button-negative button-block">Block button</a> <a class="button-negative button-block">Block button</a>
<a class="button-block button-filled">Block button</a> <a class="button-block button-outlined">Block button</a>
<a class="button-primary button-block button-filled">Block button</a> <a class="button-primary button-block button-outlined">Block button</a>
<a class="button-positive button-block button-filled">Block button</a> <a class="button-positive button-block button-outlined">Block button</a>
<a class="button-negative button-block button-filled">Block button</a> <a class="button-negative button-block button-outlined">Block button</a>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -725,10 +725,6 @@ layout: default
<span class="badge-primary">2</span> <span class="badge-primary">2</span>
<span class="badge-positive">3</span> <span class="badge-positive">3</span>
<span class="badge-negative">4</span> <span class="badge-negative">4</span>
<span class="badge badge-filled">1</span>
<span class="badge-primary badge-filled">2</span>
<span class="badge-positive badge-filled">3</span>
<span class="badge-negative badge-filled">4</span>
</div> </div>
@ -737,11 +733,6 @@ layout: default
<span class="badge-primary">2</span> <span class="badge-primary">2</span>
<span class="badge-positive">3</span> <span class="badge-positive">3</span>
<span class="badge-negative">4</span> <span class="badge-negative">4</span>
<span class="badge badge-filled">1</span>
<span class="badge-primary badge-filled">2</span>
<span class="badge-positive badge-filled">3</span>
<span class="badge-negative badge-filled">4</span>
{% endhighlight %} {% endhighlight %}
@ -756,7 +747,7 @@ layout: default
<input type="text" placeholder="Full name"> <input type="text" placeholder="Full name">
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
<textarea rows="5"></textarea> <textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a> <a class="button-positive button-block button-outlined">Choose existing</a>
</form> </form>
</div> </div>
@ -765,7 +756,7 @@ layout: default
<input type="text" placeholder="Full name"> <input type="text" placeholder="Full name">
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
<textarea rows="5"></textarea> <textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a> <a class="button-positive button-block button-outlined">Choose existing</a>
</form> </form>
{% endhighlight %} {% endhighlight %}

64
lib/sass/buttons.scss
Unescape View File

@ -15,23 +15,18 @@
vertical-align: top; vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: $chrome-color; background-color: $chrome-color;
border: $border-default; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
&.button-filled {
background-color: $chrome-color;
}
// Active & filled button styles // Active & filled button styles
&:active, &:active,
&.active { &.active {
background-color: #ebebeb; background-color: #ccc;
} }
// Disabled styles & filled button active styles // Disabled styles & filled button active styles
&:disabled, &:disabled,
&.disabled, &.disabled {
&.button-filled:active {
opacity: .6; opacity: .6;
} }
} }
@ -42,41 +37,63 @@
// Primary button (Default color is blue) // Primary button (Default color is blue)
.button-primary { .button-primary {
color: $primary-color; color: #fff;
border: 1px solid $primary-color; border: 1px solid $primary-color;
background-color: $primary-color;
&:active, &:active,
&.active, &.active {
&.button-filled { border: 1px solid darken($primary-color, 10%);
color: #fff; background-color: darken($primary-color, 10%);
background-color: $primary-color;
} }
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.button-positive { .button-positive {
color: $positive-color; color: #fff;
border: 1px solid $positive-color; border: 1px solid $positive-color;
background-color: $positive-color;
&:active, &:active,
&.active, &.active{
&.button-filled { border: 1px solid darken($positive-color, 10%);
color: #fff; background-color: darken($positive-color, 10%);
background-color: $positive-color;
} }
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.button-negative { .button-negative {
color: $negative-color; color: #fff;
border: 1px solid $negative-color; border: 1px solid $negative-color;
background-color: $negative-color;
&:active, &:active,
&.active, &.active {
&.button-filled { border: 1px solid darken($negative-color, 10%);
background-color: darken($negative-color, 10%);
}
}
// Outline buttons
.button-outlined {
background-color: transparent;
&.button-primary {
color: $primary-color;
}
&.button-positive {
color: $positive-color;
}
&.button-negative {
color: $negative-color;
}
// Active states
&.button-primary:active,
&.button-positive:active,
&.button-negative:active {
color: #fff; color: #fff;
background-color: $negative-color;
} }
} }
// Link button (Buttons that look like links) // Link button (Buttons that look like links)
@ -88,9 +105,6 @@
&.active { &.active {
color: darken($primary-color, 10%); color: darken($primary-color, 10%);
} }
&.button-filled {
background-color: transparent;
}
} }
// Block level buttons (full width buttons) // Block level buttons (full width buttons)

Write Preview
Loading…
Cancel
Save