Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Button updates to match existing styles

Browse source
This commit is contained in:
John O'Nolan 2014-08-06 00:39:19 +03:00
parent 8799ded351
commit a470c46543
4 changed files with 197 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
ghost/admin/assets/sass/components/splitbuttons.scss
View file

@ -2,6 +2,92 @@
// Base Splitbutton
// --------------------------------------------------
.splitbtn {
position: relative;
display: inline-block;
vertical-align: middle;
.btn {
position: relative;
float: left;
// Prevent double border between buttons
+ .btn { margin-left: -1px; }
// Make sure the hovered element is always on
// top so overlap from .btn + btn. invisible
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
}
// Flatten out the right side
.btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Flatten out the left side
.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
@include border-left-radius(0);
// This is the additional dropdown arrow, to the right of the button.
.options {
text-align: center;
color: #fff;
@include icon($i-chevron-down, 9px) {
margin-top: -3px;
@include transition(margin-top 0.3s ease);
/* Transition of transform properties are split out due to a
defect in the vendor prefixing of transform transitions.
See: http://github.com/thoughtbot/bourbon/pull/86 */
@include transition-property(transform);
@include transition-duration(0.3);
@include transition-timing-function(ease);
}
}
// Keep the arrow spun when the associated menu is open
&.active .options:before {
@include transform(rotate(-360deg));
}
&.up.active .options:before {
margin-top:-4px;
@include transform(rotate(540deg));
}
// Spin the arrow on hover and while menu is open
&:hover .options:before,
&:focus .options:before {
will-change: transform;
@include transform(rotate(-360deg));
}
// If it has a class of "up" spin it an extra 180degress to point up
&.up:hover .options:before,
&.up:focus .options:before {
margin-top:-4px;
@include transform(rotate(540deg));
@include transition-property(transform);
@include transition-duration(0.6);
@include transition-timing-function(ease);
}
}
}
%splitbtn {
display: inline-block;
position: relative;

43
ghost/admin/assets/sass/patterns/buttons.scss
View file

@ -9,11 +9,14 @@
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
padding: 6px 12px;
font-size: 1.4rem;
padding: 9px 14px;
font-size: 1.1rem;
line-height: 1.428571429;
font-weight: normal;
font-weight: 300;
text-align: center;
text-transform: uppercase;
text-shadow: none;
letter-spacing: 1px;
vertical-align: middle;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
@ -61,6 +64,7 @@
color: $color;
background-color: $background;
border-color: $border;
@include transition(background 0.2s ease, border-color 0.2s ease);
&:hover,
&:focus,
@ -96,17 +100,21 @@
}
.btn-default {
@include button-style($darkgrey, #fff, lighten($midgrey, 30%));
font-weight: normal;
@include button-style(#666, #fff, lighten($midgrey, 40%));
}
.btn-primary {
.btn-alt {
@include button-style(#fff, #A1ADB3, darken(#A1ADB3, 5%));
}
.btn-blue {
@include button-style(#fff, $blue, darken($blue, 5%));
}
// Success appears as green
.btn-success {
.btn-green {
@include button-style(#fff, $green, darken($green, 5%));
}
// Danger and error appear as red
.btn-danger {
.btn-red {
@include button-style(#fff, $red, darken($red, 5%));
}
@ -132,6 +140,7 @@
&:hover,
&:focus,
&:active {
color: $blue;
border-color: transparent;
}
&:hover,
@ -150,19 +159,31 @@
}
// Minor buttons
// -------------------------
// Add this class to buttons with a small/insignificant action
// for example a "cancel" button. Style is de-emphasised.
.btn-minor {
text-transform: none;
letter-spacing: 0;
font-size: 1.2rem;
padding: 8px 14px;
}
// Button Sizes
// --------------------------------------------------
.btn-lg {
padding: 10px 16px;
font-size: 1.8rem;
padding: 12px 18px;
font-size: 1.4rem;
line-height: 1.33;
border-radius: 4px;
}
.btn-sm {
padding: 5px 10px;
font-size: 1.2rem;
padding: 7px 10px;
font-size: 1rem;
line-height: 1.5;
border-radius: 2px;
}

51
ghost/admin/docs/button-test.html Normal file
View file

@ -0,0 +1,51 @@
---
layout: default
title: Ghost UI · Making publishing beautiful.
---
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<h2>Home</h2>
</header>
<section class="page-content">
<h2 id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default btn-minor">Cancel</button>
<button type="button" class="btn btn-alt">Alt</button>
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-red">Red</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<br>
<div class="bs-example">
<button type="button" class="button">Default</button>
<button type="button" class="button-dark">Dark</button>
<button type="button" class="button-save">Save</button>
<button type="button" class="button-add">Add</button>
<button type="button" class="button-delete">Delete</button>
<button type="button" class="button-info">Info</button>
<button type="button" class="button-back">Back</button>
</div>
<div>
<h2>Splitbuttons</h2>
<section class="splitbutton-save">
<button type="button" data-ember-action="153" class="button-save js-publish-button">Save Draft</button>
<button class="options up">
<span class="hidden">Post Settings</span>
</button>
</section>
<div class="splitbtn">
<button type="button" class="btn btn-blue">Action</button>
<button type="button" class="btn btn-blue dropdown-toggle up" data-toggle="dropdown">
<i class="options"></i>
<span class="sr-only">Toggle Settings Menu</span>
</button>
</div>
</div>
</section>

56
ghost/admin/docs/buttons.html
View file

@ -17,23 +17,23 @@ title: Ghost UI &middot; Making publishing beautiful.
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-red">Red</button>
<button type="button" class="btn btn-link">Link</button>
</div>
{% highlight html %}
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Provides extra visual weight and identifies the Blue action in a set of buttons -->
<button type="button" class="btn btn-blue">Blue</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Indicates a Greenful or positive action -->
<button type="button" class="btn btn-green">Green</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Indicates a Redous or potentially negative action -->
<button type="button" class="btn btn-red">Red</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
@ -43,29 +43,29 @@ title: Ghost UI &middot; Making publishing beautiful.
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-blue btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-blue">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-blue btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
</div>
{% highlight html %}
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-blue btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-blue">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-blue btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
{% endhighlight %}
@ -73,12 +73,12 @@ title: Ghost UI &middot; Making publishing beautiful.
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-blue btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div>
</div>
{% highlight html %}
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-blue btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
{% endhighlight %}
@ -89,23 +89,23 @@ title: Ghost UI &middot; Making publishing beautiful.
<h3>Button element</h3>
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
<p class="bs-example">
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-blue btn-lg active">Blue button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
</p>
{% highlight html %}
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-blue btn-lg active">Blue button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
{% endhighlight %}
<h3>Anchor element</h3>
<p>Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-example">
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
<a href="#" class="btn btn-blue btn-lg active" role="button">Blue link</a>
<a href="#" class="btn btn-link btn-lg active" role="button">Link</a>
</p>
{% highlight html %}
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
<a href="#" class="btn btn-blue btn-lg active" role="button">Blue link</a>
<a href="#" class="btn btn-link btn-lg active" role="button">Link</a>
{% endhighlight %}
@ -115,15 +115,15 @@ title: Ghost UI &middot; Making publishing beautiful.
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-example">
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-blue btn-lg" disabled="disabled">Blue button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</p>
{% highlight html %}
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-lg btn-blue" disabled="disabled">Blue button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-Red">
<h4>Cross-browser compatibility</h4>
<p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
</div>
@ -131,11 +131,11 @@ title: Ghost UI &middot; Making publishing beautiful.
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-example">
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-blue btn-lg disabled" role="button">Blue link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
</p>
{% highlight html %}
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-blue btn-lg disabled" role="button">Blue link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
{% endhighlight %}
<p>