mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -05:00
Merge pull request #4441 from PaulAdamDavis/cleanup-sass-components
Refactor component styles
This commit is contained in:
John O'Nolan
commit
1cdafae8d9
14 changed files with 673 additions and 573 deletions
|
|
@ -1,83 +1,98 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Badges
|
||||
//
|
||||
// Badges are numbers that sit inside buttons or text, for
|
||||
// things like an unread count.
|
||||
//
|
||||
// * Base Class
|
||||
// * Hover state, but only for links
|
||||
// * Colours
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Base Class
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base class
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 0 0 1px #777; // Fix due to our smaller than default button sizes
|
||||
font-size: 1rem;
|
||||
font-weight: inherit;
|
||||
color: #FFF;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: #777;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 0 0 1px #777; // Fix due to our smaller than default button sizes
|
||||
font-size: 1rem;
|
||||
font-weight: inherit;
|
||||
color: #FFF;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: #777;
|
||||
border-radius: 10px;
|
||||
|
||||
// Empty badges collapse automatically (not available in IE8)
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
// Empty badges collapse automatically (not available in IE8)
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn & {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.btn-xs & {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
// Quick fix for badges in buttons
|
||||
.btn & {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Account for badges in text tags
|
||||
p & {
|
||||
padding: 0px 4px 3px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.btn-xs & {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
// Account for badges in navs
|
||||
a.list-group-item.active > &,
|
||||
.nav-pills > .active > a > & {
|
||||
color: #428BCA;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 0 1px #FFF;
|
||||
}
|
||||
.nav-pills > li > a > & {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.nav-item & {
|
||||
margin-top: -5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
// Account for badges in text tags
|
||||
p & {
|
||||
padding: 0px 4px 3px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
// Account for badges in navs
|
||||
.nav-pills > li > a > & {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.nav-item & {
|
||||
margin-top: -5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}//.badge
|
||||
|
||||
|
||||
//
|
||||
// Hover state, but only for links
|
||||
// --------------------------------------------------
|
||||
|
||||
a.badge {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Colours
|
||||
// --------------------------------------------------
|
||||
|
||||
.badge.badge-blue {
|
||||
background-color: $blue;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
background-color: $blue;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
|
||||
.badge.badge-green {
|
||||
background-color: $green;
|
||||
box-shadow: 0 0 0 1px $green;
|
||||
background-color: $green;
|
||||
box-shadow: 0 0 0 1px $green;
|
||||
}
|
||||
|
||||
.badge.badge-red {
|
||||
background-color: $red;
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
background-color: $red;
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
}
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Dropdown menus
|
||||
//
|
||||
// Styles for the dropdown component
|
||||
//
|
||||
// * Base Styles
|
||||
// * States
|
||||
// * Open & Close
|
||||
// * Dropdown triangles placeholder styles
|
||||
// * Dropdown triangles classes
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Base Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Dropdown arrow/caret
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
border-top: 4px solid;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
// The dropdown wrapper (div)
|
||||
// The dropdown wrapper <div>
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -25,31 +25,32 @@
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
// The dropdown menu <ul>
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
|
||||
float: left;
|
||||
min-width: 220px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
list-style: none;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
|
||||
background-color: #fff;
|
||||
border: darken($lightgrey, 15%) 1px solid;
|
||||
border-radius: 2px;
|
||||
box-shadow: rgba(0,0,0,0.175) 0 2px 6px;
|
||||
background-clip: padding-box;
|
||||
|
||||
list-style: none;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
|
||||
// Aligns the dropdown menu to right
|
||||
//
|
||||
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
|
||||
&.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
|
@ -70,11 +71,13 @@
|
|||
width: 100%;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
|
||||
font-weight: normal;
|
||||
line-height: 1.9em;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
white-space: nowrap;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +85,12 @@
|
|||
font-size: 0.9em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}//.dropdown-menu
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
// --------------------------------------------------
|
||||
|
||||
// Hover/Focus state
|
||||
.dropdown-menu > li > a,
|
||||
|
|
@ -109,20 +117,21 @@
|
|||
}
|
||||
|
||||
// Disabled state
|
||||
//
|
||||
// Gray out text and ensure the hover/focus state remains gray
|
||||
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > button {
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
// Nuke hover/focus effects
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > button {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
|
@ -132,8 +141,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Open & Close
|
||||
// --------------------------------------------------
|
||||
|
||||
// Open state for the dropdown
|
||||
.open {
|
||||
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
|
|
@ -152,108 +167,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
right: 0;
|
||||
}
|
||||
// With v3, we enabled auto-flipping if you have a dropdown within a right
|
||||
// aligned nav component. To enable the undoing of that, we provide an override
|
||||
// to restore the default dropdown menu alignment.
|
||||
//
|
||||
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
|
||||
// `.pull-right` nav component.
|
||||
.dropdown-menu-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.428571429;
|
||||
color: #777;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Backdrop to catch body clicks on mobile, etc.
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 990;
|
||||
}
|
||||
|
||||
// Right aligned dropdowns
|
||||
.pull-right > .dropdown-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
//
|
||||
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
||||
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
||||
|
||||
.dropup,
|
||||
.navbar-fixed-bottom .dropdown {
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid;
|
||||
content: "";
|
||||
}
|
||||
// Different positioning for bottom up menu
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Component alignment
|
||||
//
|
||||
// Reiterate per navbar.less and the modified component alignment there.
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-right {
|
||||
.dropdown-menu {
|
||||
right: 0; left: auto;
|
||||
}
|
||||
// Necessary for overrides of the default right aligned menu.
|
||||
// Will remove come v4 in all likelihood.
|
||||
.dropdown-menu-left {
|
||||
left: 0; right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Dropdown triangles
|
||||
// Dropdown triangles placeholder styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Placeholders
|
||||
%dropdown-triangle {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
} // :before
|
||||
}//&:before
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
} // :after
|
||||
}//&:after
|
||||
}
|
||||
|
||||
%dropdown-triangle-top {
|
||||
|
|
@ -287,7 +217,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: Make the values here use the $dropdown_triangle var
|
||||
%dropdown-triangle-left {
|
||||
&:before {
|
||||
left: ($dropdown_triangle / 2 + 2);
|
||||
|
|
@ -307,7 +236,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Usable classes
|
||||
//
|
||||
// Dropdown triangles classes
|
||||
// --------------------------------------------------
|
||||
|
||||
.dropdown-triangle-top {
|
||||
@extend %dropdown-triangle;
|
||||
@extend %dropdown-triangle-top;
|
||||
|
|
@ -337,4 +269,4 @@
|
|||
@extend %dropdown-triangle;
|
||||
@extend %dropdown-triangle-bottom;
|
||||
@extend %dropdown-triangle-right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,29 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Modals
|
||||
//
|
||||
// Styles for the modal component
|
||||
//
|
||||
// * Outer Container
|
||||
// * Inner Container
|
||||
// * Content
|
||||
// * Modifiers
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Outer Container
|
||||
// --------------------------------------------------
|
||||
|
||||
#modal-container { // TODO: This should probably not be an ID
|
||||
.modal-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1040;
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
z-index: 1040;
|
||||
transition: all 0.15s linear 0s;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
|
@ -33,48 +45,44 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 1030;
|
||||
background: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
%modal {
|
||||
|
||||
//
|
||||
// Inner Container
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
z-index: 1050;
|
||||
width: 450px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
z-index: 1050;
|
||||
pointer-events: auto;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: auto;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-left: 0;
|
||||
};
|
||||
|
||||
button {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Uploaders
|
||||
.image-uploader,
|
||||
.pre-image-uploader {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
@extend %modal;
|
||||
}
|
||||
}//.modal
|
||||
|
||||
.modal-action {
|
||||
@extend %modal;
|
||||
@extend .modal;
|
||||
padding: 60px 0 30px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
|
@ -82,6 +90,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
padding: 18px;
|
||||
|
|
@ -94,20 +106,22 @@
|
|||
position: absolute;
|
||||
top: 19px;
|
||||
right: 19px;
|
||||
z-index: 9999;
|
||||
width: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
z-index: 9999;
|
||||
|
||||
@include icon($i-close, 1.4rem, $midgrey) {
|
||||
transition: color 0.3s linear;
|
||||
};
|
||||
|
||||
&:hover:before {
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.modal-content
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -126,11 +140,16 @@
|
|||
|
||||
.modal-footer {
|
||||
margin-top: 20px;
|
||||
|
||||
.reject-button-class {
|
||||
@extend .btn;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Modifiers
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-style-wide {
|
||||
width: 550px;
|
||||
|
||||
|
|
@ -141,11 +160,4 @@
|
|||
|
||||
.modal-style-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Fixes for specific modals
|
||||
.invite-new-user {
|
||||
.btn-green {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,19 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Global Navigation
|
||||
//
|
||||
// Styles for the main top bar & mobile navigation
|
||||
//
|
||||
// * Main wrapper
|
||||
// * Ghost branding
|
||||
// * Nav Items
|
||||
// * User Menu
|
||||
// * Mobile
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Main wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
// The main wrapper, sets position and bg colour.
|
||||
.global-nav {
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
|
|
@ -23,47 +34,13 @@
|
|||
body.settings-menu-expanded & {
|
||||
transform: translate3d(-350px, 0px, 0px);
|
||||
}
|
||||
|
||||
.thing,
|
||||
.thing2 {
|
||||
display: none; // hide until mobile
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for each item
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 60px;
|
||||
padding-right: 10px;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 200;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
// Pill shaped background
|
||||
.nav-label {
|
||||
height: 33px;
|
||||
margin-top: 14px;
|
||||
padding: 10px 12px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.5s, background 0.5s;
|
||||
}
|
||||
.nav-item.active .nav-label,
|
||||
.nav-item:focus .nav-label,
|
||||
.nav-item:hover .nav-label,
|
||||
.nav-item:active .nav-label {
|
||||
color: #fff;
|
||||
background: darken($darkgrey, 9%);
|
||||
transition: color 0.1s, background 0.1s;
|
||||
}
|
||||
|
||||
//
|
||||
// Ghost branding
|
||||
// --------------------------------------------------
|
||||
|
||||
.ghost-logo {
|
||||
width: 60px;
|
||||
padding-right: 0;
|
||||
|
|
@ -87,6 +64,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Nav Items
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper for each item <a>
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 60px;
|
||||
padding-right: 10px;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 200;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
// What looks like the actual button <div>
|
||||
.nav-label {
|
||||
height: 33px;
|
||||
margin-top: 14px;
|
||||
padding: 10px 12px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.5s, background 0.5s;
|
||||
}
|
||||
.nav-item.active .nav-label,
|
||||
.nav-item:focus .nav-label,
|
||||
.nav-item:hover .nav-label,
|
||||
.nav-item:active .nav-label {
|
||||
color: #fff;
|
||||
background: darken($darkgrey, 9%);
|
||||
transition: color 0.1s, background 0.1s;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// User Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
// Right hand dropdown
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
|
|
@ -167,7 +187,6 @@
|
|||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}//.user-menu
|
||||
|
||||
|
||||
|
|
@ -192,10 +211,6 @@
|
|||
transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
|
||||
.thing, .thing2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.global-nav-expanded & {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
|
|
@ -223,7 +238,9 @@
|
|||
color: #fff !important;
|
||||
background: darken($darkgrey, 4%);
|
||||
|
||||
i { color: #fff; }
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.nav-item:hover .nav-label {
|
||||
color: rgba(255,255,255,0.9);
|
||||
|
|
@ -237,7 +254,9 @@
|
|||
line-height: 44px;
|
||||
text-align: left;
|
||||
|
||||
span { display: inline; }
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// Drop it to the bottom of the menu
|
||||
|
|
@ -277,6 +296,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Hide the user-menu icons
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -304,8 +324,6 @@
|
|||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}//.user-menu
|
||||
|
||||
body.global-nav-expanded & {
|
||||
|
|
@ -322,4 +340,4 @@
|
|||
}//.nav-cover
|
||||
}//body.global-nav-expanded
|
||||
|
||||
}
|
||||
}//@media (max-width: 900px)
|
||||
|
|
@ -1,24 +1,19 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Notifications
|
||||
//
|
||||
// Styles for notifications
|
||||
//
|
||||
// * Wrapper
|
||||
// * Base Notification
|
||||
// * Individual Notifications
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper
|
||||
.notifications {
|
||||
|
||||
@media (min-width: 401px) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 980;
|
||||
width: 300px;
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
|
||||
// This selector ends up being `body.settings-menu-expanded .notifications`
|
||||
body.settings-menu-expanded & {
|
||||
transform: translate3d(350px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -32,12 +27,22 @@
|
|||
transform: translate3d(100%, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: What is this? Docs plz.
|
||||
.js-bb-notification {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@media (min-width: 401px) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 980;
|
||||
width: 300px;
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
|
||||
// This selector ends up being `body.settings-menu-expanded .notifications`
|
||||
body.settings-menu-expanded & {
|
||||
transform: translate3d(350px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}//.notifications
|
||||
|
||||
|
||||
//
|
||||
// Base Notification
|
||||
|
|
@ -55,6 +60,7 @@
|
|||
color: rgba(255,255,255,0.8);
|
||||
background: rgba(0,0,0,0.1);
|
||||
};
|
||||
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
max-height: 253px;
|
||||
|
|
@ -83,13 +89,14 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
width: 34px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
@include icon-after($i-close) {
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 1px;
|
||||
};
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -99,7 +106,7 @@
|
|||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}//%notification
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -129,7 +136,6 @@
|
|||
background: $red;
|
||||
}
|
||||
|
||||
|
||||
.notification-warn {
|
||||
@extend %notification;
|
||||
@include icon($i-info);
|
||||
|
|
|
|||
|
|
@ -1,112 +1,128 @@
|
|||
// ------------------------------------------------------------
|
||||
// Pagination
|
||||
//
|
||||
// Pagination (multiple pages)
|
||||
// Styles for the main top bar & mobile navigation
|
||||
//
|
||||
// * Pagination
|
||||
// * Sizing
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Pagination
|
||||
// --------------------------------------------------
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 20px 0;
|
||||
border-radius: $border-radius;
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 20px 0;
|
||||
border-radius: $border-radius;
|
||||
|
||||
> li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
> a,
|
||||
> span {
|
||||
position: relative;
|
||||
float: left; // Collapse white-space
|
||||
padding: 6px 12px;
|
||||
line-height: 1.42857143;
|
||||
text-decoration: none;
|
||||
color: $blue;
|
||||
background-color: #fff;
|
||||
border: 1px solid $lightbrown;
|
||||
margin-left: -1px;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
> li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
|
||||
> li > a,
|
||||
> li > span {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #2A6496;
|
||||
background-color: #EEE;
|
||||
}
|
||||
}
|
||||
> a,
|
||||
> span {
|
||||
position: relative;
|
||||
float: left; // Collapse white-space
|
||||
padding: 6px 12px;
|
||||
line-height: 1.42857143;
|
||||
text-decoration: none;
|
||||
color: $blue;
|
||||
background-color: #fff;
|
||||
border: 1px solid $lightbrown;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
background-color: #428BCA;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
> span,
|
||||
> span:hover,
|
||||
> span:focus,
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
color: #777;
|
||||
background-color: #FFF;
|
||||
border-color: #DDD;
|
||||
cursor: not-allowed;
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li > a,
|
||||
> li > span {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #2A6496;
|
||||
background-color: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
background-color: #428BCA;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
> span,
|
||||
> span:hover,
|
||||
> span:focus,
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
color: #777;
|
||||
background-color: #FFF;
|
||||
border-color: #DDD;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}//.pagination
|
||||
|
||||
//
|
||||
// Sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.pagination-lg {
|
||||
@include pagination-size(10px, 16px, 18px, 6px);
|
||||
@include pagination-size(10px, 16px, 18px, 6px);
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-sm {
|
||||
@include pagination-size(5px, 10px, 12px, 3px);
|
||||
@include pagination-size(5px, 10px, 12px, 3px);
|
||||
}
|
||||
|
|
@ -1,3 +1,16 @@
|
|||
// ------------------------------------------------------------
|
||||
// Popovers
|
||||
//
|
||||
// Styles for the popover component
|
||||
//
|
||||
// * Popovers
|
||||
// * Triangles placeholder styles
|
||||
// * Triangles classes
|
||||
// * Open/close
|
||||
// * Positioning
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Popovers
|
||||
// --------------------------------------------------
|
||||
|
|
@ -33,10 +46,9 @@
|
|||
}
|
||||
|
||||
//
|
||||
// Popover triangles
|
||||
// Triangles placeholder styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Placeholders
|
||||
%popover-triangle {
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
@ -45,25 +57,27 @@
|
|||
} // :before
|
||||
}
|
||||
|
||||
// The triangle itself
|
||||
%popover-triangle-vertical-top {
|
||||
&:before {
|
||||
@include triangle($popover_triangle, $darkgrey, up, shallow);
|
||||
top: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-vertical-bottom {
|
||||
&:before {
|
||||
@include triangle($popover_triangle, $darkgrey, down, shallow);
|
||||
bottom: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-horizontal-left {
|
||||
&:before {
|
||||
@include triangle($popover_triangle, $darkgrey, left, shallow);
|
||||
left: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-horizontal-right {
|
||||
&:before {
|
||||
@include triangle($popover_triangle, $darkgrey, right, shallow);
|
||||
|
|
@ -71,35 +85,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Triangle positions
|
||||
%popover-triangle-vertical-center {
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -($popover_triangle / 2);
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-vertical-left {
|
||||
&:before {
|
||||
left: $popover_triangle;
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-vertical-right {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: $popover_triangle;
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-horizontal-center {
|
||||
&:before {
|
||||
top: 50%;
|
||||
margin-top: -$popover_triangle;
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-horizontal-top {
|
||||
&:before {
|
||||
top: $popover_triangle;
|
||||
}
|
||||
}
|
||||
|
||||
%popover-triangle-horizontal-bottom {
|
||||
&:before {
|
||||
top: auto;
|
||||
|
|
@ -107,89 +125,100 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Usable classes
|
||||
|
||||
//
|
||||
// Triangles classes
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover-triangle-top {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-top;
|
||||
@extend %popover-triangle-vertical-center;
|
||||
transform-origin: top center;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-top;
|
||||
@extend %popover-triangle-vertical-center;
|
||||
}
|
||||
.popover-triangle-top-left {
|
||||
transform-origin: top left;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-top;
|
||||
@extend %popover-triangle-vertical-left;
|
||||
}
|
||||
.popover-triangle-top-right {
|
||||
transform-origin: top right;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-top;
|
||||
@extend %popover-triangle-vertical-right;
|
||||
}
|
||||
.popover-triangle-bottom {
|
||||
transform-origin: bottom center;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-bottom;
|
||||
@extend %popover-triangle-vertical-center;
|
||||
}
|
||||
.popover-triangle-bottom-left {
|
||||
transform-origin: bottom left;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-bottom;
|
||||
@extend %popover-triangle-vertical-left;
|
||||
}
|
||||
.popover-triangle-bottom-right {
|
||||
transform-origin: bottom right;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-bottom;
|
||||
@extend %popover-triangle-vertical-right;
|
||||
}
|
||||
.popover-triangle-left {
|
||||
transform-origin: left center;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-left;
|
||||
@extend %popover-triangle-horizontal-center;
|
||||
}
|
||||
.popover-triangle-left-top {
|
||||
transform-origin: left top;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-left;
|
||||
@extend %popover-triangle-horizontal-top;
|
||||
}
|
||||
.popover-triangle-left-bottom {
|
||||
transform-origin: left bottom;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-left;
|
||||
@extend %popover-triangle-horizontal-bottom;
|
||||
}
|
||||
.popover-triangle-right {
|
||||
transform-origin: right center;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-right;
|
||||
@extend %popover-triangle-horizontal-center;
|
||||
}
|
||||
.popover-triangle-right-top {
|
||||
transform-origin: right top;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-right;
|
||||
@extend %popover-triangle-horizontal-top;
|
||||
}
|
||||
.popover-triangle-right-bottom {
|
||||
transform-origin: right bottom;
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-right;
|
||||
@extend %popover-triangle-horizontal-bottom;
|
||||
}
|
||||
|
||||
// Show/hide popover
|
||||
// Position relative to the position of the triangle
|
||||
// So... `popover-triangle-left-top` opens on the right of the button
|
||||
// because the triangle is on the top left, poitning to the top right of the button
|
||||
.popover-triangle-top-left {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-top;
|
||||
@extend %popover-triangle-vertical-left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.popover-triangle-top-right {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-top;
|
||||
@extend %popover-triangle-vertical-right;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.popover-triangle-bottom {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-bottom;
|
||||
@extend %popover-triangle-vertical-center;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.popover-triangle-bottom-left {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-bottom;
|
||||
@extend %popover-triangle-vertical-left;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.popover-triangle-bottom-right {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-vertical-bottom;
|
||||
@extend %popover-triangle-vertical-right;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
.popover-triangle-left {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-left;
|
||||
@extend %popover-triangle-horizontal-center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.popover-triangle-left-top {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-left;
|
||||
@extend %popover-triangle-horizontal-top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.popover-triangle-left-bottom {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-left;
|
||||
@extend %popover-triangle-horizontal-bottom;
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
.popover-triangle-right {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-right;
|
||||
@extend %popover-triangle-horizontal-center;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.popover-triangle-right-top {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-right;
|
||||
@extend %popover-triangle-horizontal-top;
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
.popover-triangle-right-bottom {
|
||||
@extend %popover-triangle;
|
||||
@extend %popover-triangle-horizontal-right;
|
||||
@extend %popover-triangle-horizontal-bottom;
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// |------| |-----------------|
|
||||
// |Button| < Popover content |
|
||||
// |------| | Lorem ipsum dol |
|
||||
// |-----------------|
|
||||
// Open/close
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -201,65 +230,91 @@
|
|||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.closed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}//.popover
|
||||
|
||||
.popover-item.popover-triangle-bottom {
|
||||
bottom: calc(100% + 16px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.popover-item.popover-triangle-bottom-left {
|
||||
bottom: calc(100% + 16px);
|
||||
left: 0;
|
||||
}
|
||||
.popover-item.popover-triangle-bottom-right {
|
||||
bottom: calc(100% + 16px);
|
||||
right: 0;
|
||||
}
|
||||
.popover-item.popover-triangle-top {
|
||||
top: calc(100% + 16px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.popover-item.popover-triangle-top-left {
|
||||
top: calc(100% + 16px);
|
||||
left: 0;
|
||||
}
|
||||
.popover-item.popover-triangle-top-right {
|
||||
top: calc(100% + 16px);
|
||||
right: 0;
|
||||
}
|
||||
.popover-item.popover-triangle-left {
|
||||
left: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.popover-item.popover-triangle-left-top {
|
||||
left: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-($popover_triangle * 2));
|
||||
}
|
||||
.popover-item.popover-triangle-left-bottom {
|
||||
left: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
|
||||
}
|
||||
.popover-item.popover-triangle-right {
|
||||
right: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.popover-item.popover-triangle-right-top {
|
||||
right: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-($popover_triangle * 2));
|
||||
}
|
||||
.popover-item.popover-triangle-right-bottom {
|
||||
right: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
|
||||
}
|
||||
}//.popover
|
||||
|
||||
//
|
||||
// Positioning
|
||||
// --------------------------------------------------
|
||||
// Position relative to the position of the triangle
|
||||
// So... `popover-triangle-left-top` opens on the right
|
||||
// of the button because the triangle is on the top left,
|
||||
// pointing to the top right of the button
|
||||
//
|
||||
// |------| |-----------------|
|
||||
// |Button| < Popover content |
|
||||
// |------| | Lorem ipsum dol |
|
||||
// |-----------------|
|
||||
|
||||
.popover-item.popover-triangle-bottom {
|
||||
bottom: calc(100% + 16px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-bottom-left {
|
||||
bottom: calc(100% + 16px);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-bottom-right {
|
||||
bottom: calc(100% + 16px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-top {
|
||||
top: calc(100% + 16px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-top-left {
|
||||
top: calc(100% + 16px);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-top-right {
|
||||
top: calc(100% + 16px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-left {
|
||||
left: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-left-top {
|
||||
left: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-($popover_triangle * 2));
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-left-bottom {
|
||||
left: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-right {
|
||||
right: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-right-top {
|
||||
right: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(-($popover_triangle * 2));
|
||||
}
|
||||
|
||||
.popover-item.popover-triangle-right-bottom {
|
||||
right: calc(100% + 16px);
|
||||
top: 50%;
|
||||
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
|
||||
}
|
||||
|
|
@ -1,18 +1,28 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Settings Menu
|
||||
//
|
||||
// Styles for the settings menu component
|
||||
//
|
||||
// * Wrapper
|
||||
// * Header
|
||||
// * Content
|
||||
// * Content Cover
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Wrapper
|
||||
.settings-menu-container {
|
||||
background: $lightestgrey;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $lightestgrey;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
overflow: hidden;
|
||||
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
transform: translate3d(60px, 0px, 0px);
|
||||
|
||||
|
|
@ -20,6 +30,7 @@
|
|||
body.settings-menu-expanded & {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
|
||||
.settings-menu-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -38,16 +49,21 @@
|
|||
&.settings-menu-pane-out-left {
|
||||
transform: translate3d(-100%, 0px, 0px);
|
||||
}
|
||||
|
||||
&.settings-menu-pane-out-right {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
}
|
||||
|
||||
&.settings-menu-pane-in {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.settings-menu-pane
|
||||
}//.settings-menu-container
|
||||
|
||||
//
|
||||
// Header
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-menu-header {
|
||||
position: relative;
|
||||
padding: 19px 24px;
|
||||
|
|
@ -65,9 +81,7 @@
|
|||
&:before {
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.settings-menu-header.subview {
|
||||
|
|
@ -82,9 +96,7 @@
|
|||
&:before {
|
||||
left: 19px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.settings-menu-header-action {
|
||||
|
|
@ -107,12 +119,13 @@
|
|||
&:before {
|
||||
color: $midgrey;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-menu-content {
|
||||
padding: 0 24px 24px;
|
||||
|
||||
|
|
@ -124,7 +137,6 @@
|
|||
input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -145,7 +157,6 @@
|
|||
.word-count {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}//.settings-menu-content
|
||||
|
||||
|
||||
|
|
@ -153,7 +164,7 @@
|
|||
// Content Cover
|
||||
// --------------------------------------------------
|
||||
// A transparent div that goes over the content, used
|
||||
// to listen for clicks to close the right outlet
|
||||
// to listen for clicks to close the settings menu
|
||||
|
||||
body.settings-menu-expanded {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
// ------------------------------------------------------------
|
||||
// Splitbuttons
|
||||
//
|
||||
// Base Splitbutton
|
||||
// Styles for splitbuttons (button + toggle for a popover)
|
||||
//
|
||||
// * Default
|
||||
// * Base Placeholder Styles
|
||||
// * Variation Classes
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Default
|
||||
// --------------------------------------------------
|
||||
|
||||
.splitbtn {
|
||||
|
|
@ -12,7 +23,9 @@
|
|||
float: left;
|
||||
|
||||
// Prevent double border between buttons
|
||||
+ .btn { margin-left: -1px; }
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
// Make sure the hovered element is always on
|
||||
// top so overlap from .btn + btn. invisible
|
||||
|
|
@ -20,17 +33,18 @@
|
|||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Flatten out the right side
|
||||
.btn:first-child {
|
||||
margin-left: 0;
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Flatten out the left side
|
||||
|
|
@ -44,12 +58,12 @@
|
|||
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;
|
||||
|
|
@ -60,23 +74,28 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.up .options:before {
|
||||
transform: rotate(-360deg);
|
||||
transition: transform 0.6s ease, top 0.6s ease;
|
||||
}
|
||||
|
||||
&.up:hover .options:before,
|
||||
&.up.open .options:before {
|
||||
transform: rotate(540deg);
|
||||
top: -1px;
|
||||
transform: rotate(540deg);
|
||||
transition: transform 0.3s ease, top 0.3s ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}//.splitbtn
|
||||
|
||||
|
||||
//
|
||||
// Base Placeholder Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
%splitbtn {
|
||||
display: inline-block;
|
||||
|
|
@ -107,6 +126,7 @@
|
|||
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;
|
||||
transition: background-color 0.3s linear;
|
||||
|
||||
@include icon($i-chevron-down, 9px) {
|
||||
position: absolute;
|
||||
|
|
@ -115,16 +135,11 @@
|
|||
margin-top: -3px;
|
||||
margin-right: -5px;
|
||||
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 */
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3;
|
||||
transition-timing-function: ease;
|
||||
};
|
||||
|
||||
transition: background-color 0.3s linear;
|
||||
|
||||
// Keep the arrow spun when the associated menu is open
|
||||
&.active:before {
|
||||
transform: rotate(360deg);
|
||||
|
|
@ -158,19 +173,21 @@
|
|||
transition-timing-function: ease;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.options
|
||||
}//%splitbtn
|
||||
|
||||
|
||||
//
|
||||
// The Splitbuttons
|
||||
// Variation Classes
|
||||
// --------------------------------------------------
|
||||
|
||||
// The default splitbutton
|
||||
.splitbutton {
|
||||
@extend %splitbtn;
|
||||
|
||||
.options {
|
||||
color:#777;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow:
|
||||
|
|
@ -184,8 +201,10 @@
|
|||
// For save/next/continue/confirm actions
|
||||
.splitbutton-save {
|
||||
@extend %splitbtn;
|
||||
|
||||
.options {
|
||||
background: darken($blue, 5%);
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus {
|
||||
|
|
@ -197,8 +216,10 @@
|
|||
// For actions which add something
|
||||
.splitbutton-add {
|
||||
@extend %splitbtn;
|
||||
|
||||
.options {
|
||||
background: darken($green, 6%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken($green, 8%);
|
||||
|
|
@ -209,8 +230,10 @@
|
|||
// For actions which delete something
|
||||
.splitbutton-delete {
|
||||
@extend %splitbtn;
|
||||
|
||||
.options {
|
||||
background: darken($red, 6%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken($red, 10%);
|
||||
|
|
@ -222,8 +245,10 @@
|
|||
// but no extra semantic meaning
|
||||
.splitbutton-alt {
|
||||
@extend %splitbtn;
|
||||
|
||||
.options {
|
||||
background: lighten($darkgrey, 4%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $darkgrey;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
// ------------------------------------------------------------
|
||||
// Image Uploader
|
||||
//
|
||||
// Styles for the image uploader
|
||||
//
|
||||
// * Image Uploader
|
||||
// * Pre Image Uploader
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Image Uploader
|
||||
// --------------------------------------------------
|
||||
|
|
@ -22,9 +32,11 @@
|
|||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.media {
|
||||
@include icon($i-image, 60px, darken($lightbrown, 3%)) {
|
||||
display: inline-block;
|
||||
|
|
@ -46,20 +58,20 @@
|
|||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.image-webcam {
|
||||
@include icon($i-camera, 12px);
|
||||
@include icon($i-camera, 12px);
|
||||
}
|
||||
|
||||
.image-url {
|
||||
@include icon($i-link, 12px);
|
||||
@include icon($i-link, 12px);
|
||||
}
|
||||
|
||||
.image-upload {
|
||||
@include icon($i-image, 12px);
|
||||
@include icon($i-image, 12px);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
|
|
@ -68,12 +80,14 @@
|
|||
z-index: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
margin: 0 0 0 10px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
&.main{
|
||||
|
||||
&.main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
|
|
@ -83,13 +97,14 @@
|
|||
font-size: 23px;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
|
||||
&.right {
|
||||
right: 9999px;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.url{
|
||||
&.url {
|
||||
font: -webkit-small-control;
|
||||
width: 276px;
|
||||
vertical-align: middle;
|
||||
|
|
@ -137,8 +152,7 @@
|
|||
background: $red;
|
||||
}
|
||||
}
|
||||
|
||||
} // .image-uploader
|
||||
}//.image-uploader
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -199,5 +213,4 @@
|
|||
background: $red;
|
||||
}
|
||||
}
|
||||
|
||||
} // .pre-image-uploader
|
||||
}//.pre-image-uploader
|
||||
|
|
@ -245,11 +245,8 @@ a.user-list-item {
|
|||
|
||||
}//.form-group
|
||||
|
||||
.button-add {
|
||||
.btn-green {
|
||||
width: 100%;
|
||||
padding: 0.85rem 1.9rem;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
}//.invite-new-user
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="modal-container" class="js-modal-container" {{action "closeModal"}}>
|
||||
<div class="modal-container js-modal-container" {{action "closeModal"}}>
|
||||
<article {{bind-attr class="klass :js-modal"}}>
|
||||
<section class="modal-content" {{action bubbles=false preventDefault=false}}>
|
||||
{{#if title}}<header class="modal-header"><h1>{{title}}</h1></header>{{/if}}
|
||||
|
|
|
|||
|
|
@ -459,7 +459,7 @@ CasperTest.begin('Publish menu - delete post', 7, function testDeleteModal(test)
|
|||
casper.waitForOpaque('.js-publish-splitbutton .open');
|
||||
casper.thenClick('.js-publish-splitbutton li:nth-child(4) a');
|
||||
|
||||
casper.waitUntilVisible('#modal-container', function onSuccess() {
|
||||
casper.waitUntilVisible('.modal-container', function onSuccess() {
|
||||
test.assertSelectorHasText(
|
||||
'.modal-content .modal-header',
|
||||
'Are you sure you want to delete this post?',
|
||||
|
|
@ -468,7 +468,7 @@ CasperTest.begin('Publish menu - delete post', 7, function testDeleteModal(test)
|
|||
|
||||
casper.thenClick('.js-button-reject');
|
||||
|
||||
casper.waitWhileVisible('#modal-container', function onSuccess() {
|
||||
casper.waitWhileVisible('.modal-container', function onSuccess() {
|
||||
test.assert(true, 'clicking cancel should close the delete post modal');
|
||||
});
|
||||
|
||||
|
|
@ -477,7 +477,7 @@ CasperTest.begin('Publish menu - delete post', 7, function testDeleteModal(test)
|
|||
casper.waitForOpaque('.js-publish-splitbutton .open');
|
||||
casper.thenClick('.js-publish-splitbutton li:nth-child(4) a');
|
||||
|
||||
casper.waitForSelector('#modal-container .modal-content', function onSuccess() {
|
||||
casper.waitForSelector('.modal-container .modal-content', function onSuccess() {
|
||||
test.assertExists('.modal-content .js-button-accept', 'delete button exists');
|
||||
|
||||
// Delete the post
|
||||
|
|
@ -600,7 +600,7 @@ CasperTest.begin('Markdown help modal', 5, function suite(test) {
|
|||
// open markdown help modal
|
||||
casper.thenClick('a.markdown-help');
|
||||
|
||||
casper.waitUntilVisible('#modal-container', function onSuccess() {
|
||||
casper.waitUntilVisible('.modal-container', function onSuccess() {
|
||||
test.assertSelectorHasText(
|
||||
'.modal-content .modal-header',
|
||||
'Markdown Help',
|
||||
|
|
@ -611,7 +611,7 @@ CasperTest.begin('Markdown help modal', 5, function suite(test) {
|
|||
|
||||
casper.thenClick('.modal-content .close');
|
||||
|
||||
casper.waitWhileVisible('#modal-container', function onSuccess() {
|
||||
casper.waitWhileVisible('.modal-container', function onSuccess() {
|
||||
test.assert(true, 'clicking close should remove the markdown help modal');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ CasperTest.begin('General settings pane is correct', 8, function suite(test) {
|
|||
|
||||
function assertImageUploaderModalThenClose() {
|
||||
test.assertSelectorHasText('.description', 'Add image');
|
||||
casper.click('#modal-container .js-button-accept');
|
||||
casper.click('.modal-container .js-button-accept');
|
||||
casper.waitForSelector('.notification-success', function onSuccess() {
|
||||
test.assert(true, 'Got success notification');
|
||||
}, casper.failOnTimeout(test, 'No success notification'));
|
||||
|
|
@ -65,7 +65,7 @@ CasperTest.begin('General settings pane is correct', 8, function suite(test) {
|
|||
casper.click('.js-modal-logo');
|
||||
});
|
||||
|
||||
casper.waitForSelector('#modal-container .modal-content .js-drop-zone .description',
|
||||
casper.waitForSelector('.modal-container .modal-content .js-drop-zone .description',
|
||||
assertImageUploaderModalThenClose, casper.failOnTimeout(test, 'No upload logo modal container appeared'));
|
||||
|
||||
// Test Blog Cover Upload Button
|
||||
|
|
@ -73,7 +73,7 @@ CasperTest.begin('General settings pane is correct', 8, function suite(test) {
|
|||
casper.click('.js-modal-cover');
|
||||
});
|
||||
|
||||
casper.waitForSelector('#modal-container .modal-content .js-drop-zone .description',
|
||||
casper.waitForSelector('.modal-container .modal-content .js-drop-zone .description',
|
||||
assertImageUploaderModalThenClose, casper.failOnTimeout(test, 'No upload cover modal container appeared'));
|
||||
|
||||
function handleSettingsRequest(requestData) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue