mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-17 05:21:36 +03:00
250 lines
6.5 KiB
SCSS
250 lines
6.5 KiB
SCSS
//
|
|
// 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);
|
|
|
|
&.btn-sm {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
&.btn-lg {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
|
|
// 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;
|
|
font-size: 0; // hack to stop space after button
|
|
white-space: nowrap;
|
|
|
|
button {
|
|
font-size: 11px; // hack to restore font size
|
|
@include border-right-radius(0);
|
|
}
|
|
|
|
// This is the additional dropdown arrow, to the right of the button.
|
|
.options {
|
|
display: inline-block;
|
|
position:relative;
|
|
width: 35px;
|
|
height: 35px;
|
|
margin-left: -1px;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: #e5e5e5;
|
|
border-radius: 0 2px 2px 0;
|
|
border-left: 0;
|
|
box-shadow:
|
|
rgba(0,0,0,0.02) 0 1px 0 inset,
|
|
rgba(0,0,0,0.02) -1px 0 0 inset,
|
|
rgba(0,0,0,0.02) 0 -1px 0 inset;
|
|
|
|
@include icon($i-chevron-down, 9px) {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 50%;
|
|
margin-top: -3px;
|
|
margin-right: -5px;
|
|
@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);
|
|
};
|
|
|
|
@include transition(background-color 0.3s linear);
|
|
|
|
// Keep the arrow spun when the associated menu is open
|
|
&.active:before {
|
|
@include transform(rotate(360deg));
|
|
}
|
|
|
|
&.up.active:before {
|
|
margin-top:-4px;
|
|
@include transform(rotate(540deg));
|
|
}
|
|
|
|
// Spin the arrow on hover and while menu is open
|
|
&:hover,
|
|
&:focus {
|
|
will-change: box-shadow, background;
|
|
box-shadow: none;
|
|
background: #f8f8f8;
|
|
@include icon($i-chevron-down) {
|
|
will-change: transform;
|
|
@include transform(rotate(360deg));
|
|
};
|
|
}
|
|
|
|
// If it has a class of "up" spin it an extra 180degress to point up
|
|
&.up:hover,
|
|
&.up:focus {
|
|
@include icon($i-chevron-down) {
|
|
margin-top:-4px;
|
|
@include transform(rotate(540deg));
|
|
@include transition-property(transform);
|
|
@include transition-duration(0.6);
|
|
@include transition-timing-function(ease);
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// The Splitbuttons
|
|
// --------------------------------------------------
|
|
|
|
// The default splitbutton
|
|
.splitbutton {
|
|
@extend %splitbtn;
|
|
.options {
|
|
color:#777;
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow:
|
|
rgba(0,0,0,0.07) 0 1px 0 inset,
|
|
rgba(0,0,0,0.07) -1px 0 0 inset,
|
|
rgba(0,0,0,0.07) 0 -1px 0 inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// For save/next/continue/confirm actions
|
|
.splitbutton-save {
|
|
@extend %splitbtn;
|
|
.options {
|
|
background: darken($blue, 5%);
|
|
&:hover,
|
|
&.active,
|
|
&:focus {
|
|
background: darken($blue, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// For actions which add something
|
|
.splitbutton-add {
|
|
@extend %splitbtn;
|
|
.options {
|
|
background: darken($green, 6%);
|
|
&:hover,
|
|
&:focus {
|
|
background: darken($green, 8%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// For actions which delete something
|
|
.splitbutton-delete {
|
|
@extend %splitbtn;
|
|
.options {
|
|
background: darken($red, 6%);
|
|
&:hover,
|
|
&:focus {
|
|
background: darken($red, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alternative style with more visual attention,
|
|
// but no extra semantic meaning
|
|
.splitbutton-alt {
|
|
@extend %splitbtn;
|
|
.options {
|
|
background: lighten($darkgrey, 4%);
|
|
&:hover,
|
|
&:focus {
|
|
background: $darkgrey;
|
|
}
|
|
}
|
|
} |