mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
Convert Sass to Myth
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
d64a8b7b34
commit
057aee408d
68 changed files with 4959 additions and 6180 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -9,7 +9,6 @@
|
|||
/bower_components
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
|
|
|
|||
19
Brocfile.js
19
Brocfile.js
|
|
@ -17,18 +17,23 @@ app = new EmberApp({
|
|||
outputPaths: {
|
||||
app: {
|
||||
js: assetLocation('ghost.js')
|
||||
// css: see config/environment.js (sassOptions)
|
||||
},
|
||||
vendor: {
|
||||
js: assetLocation('vendor.js'),
|
||||
css: assetLocation('vendor.css')
|
||||
}
|
||||
},
|
||||
mythOptions: {
|
||||
source: './app/styles/app.css',
|
||||
inputFile: 'app.css',
|
||||
browsers: 'last 2 versions',
|
||||
outputFile: 'ghost.css'
|
||||
},
|
||||
hinting: false,
|
||||
fingerprint: disabled,
|
||||
sourcemaps: disabled // see https://github.com/ember-cli/ember-cli/issues/2912
|
||||
fingerprint: disabled
|
||||
});
|
||||
|
||||
// 'dem Scripts
|
||||
app.import('bower_components/loader.js/loader.js');
|
||||
app.import('bower_components/jquery/dist/jquery.js');
|
||||
app.import('bower_components/ic-ajax/dist/globals/main.js');
|
||||
|
|
@ -50,11 +55,8 @@ app.import('bower_components/nprogress/nprogress.js');
|
|||
app.import('bower_components/ember-simple-auth/simple-auth.js');
|
||||
app.import('bower_components/ember-simple-auth/simple-auth-oauth2.js');
|
||||
app.import('bower_components/google-caja/html-css-sanitizer-bundle.js');
|
||||
app.import('bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.js');
|
||||
app.import('bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.js');
|
||||
app.import('bower_components/codemirror/lib/codemirror.js');
|
||||
app.import('bower_components/codemirror/lib/codemirror.css');
|
||||
app.import('bower_components/codemirror/theme/xq-light.css');
|
||||
app.import('bower_components/codemirror/mode/htmlmixed/htmlmixed.js');
|
||||
app.import('bower_components/codemirror/mode/xml/xml.js');
|
||||
app.import('bower_components/codemirror/mode/css/css.js');
|
||||
|
|
@ -62,4 +64,9 @@ app.import('bower_components/codemirror/mode/javascript/javascript.js');
|
|||
app.import('bower_components/xregexp/xregexp-all.js');
|
||||
app.import('bower_components/password-generator/lib/password-generator.js');
|
||||
|
||||
// 'dem Styles
|
||||
app.import('bower_components/nprogress/nprogress.css');
|
||||
app.import('bower_components/codemirror/lib/codemirror.css');
|
||||
app.import('bower_components/codemirror/theme/xq-light.css');
|
||||
|
||||
module.exports = app.toTree();
|
||||
|
|
|
|||
|
|
@ -3,36 +3,17 @@
|
|||
Ember.js application used as a client-side admin for the [Ghost](http://ghost.org) blogging platform. This readme is a work in progress guide aimed at explaining the specific nuances of the Ghost Ember app to contributors whose main focus is on this side of things.
|
||||
|
||||
|
||||
## Architecture
|
||||
## CSS
|
||||
|
||||
ToDo: Explain the basic Ember app structure.
|
||||
|
||||
```
|
||||
client/
|
||||
├── assets/
|
||||
│ ├── ghost.css
|
||||
│ └── ghost.min.css
|
||||
├── things/
|
||||
│ ├── things.js
|
||||
│ └── things.min.js
|
||||
└── things/
|
||||
├── things.js
|
||||
└── things.js
|
||||
```
|
||||
|
||||
## SASS
|
||||
|
||||
All CSS is written in SASS and compiled using grunt. We do not follow any strict CSS framework, however our general style is pretty similar to BEM.
|
||||
We use pure CSS, which is pre-processed for backwards compatibility by [Myth](http://myth.io). We do not follow any strict CSS framework, however our general style is pretty similar to BEM.
|
||||
|
||||
Styles are primarily broken up into 4 main categories:
|
||||
|
||||
* **Helpers** - are pure-sass files. Variables/mixins/things which are generally never compiled to actual CSS, and are simply used to aid development.
|
||||
* **Patterns** - are base level visual styles for HTML elements (eg. Buttons)
|
||||
* **Components** - are groups of patterns used to create a UI component (eg. Modals)
|
||||
* **Layouts** - are groups of components used to create application screens (eg. Settings)
|
||||
* **Lib** - is where we store styles for 3rd party components.
|
||||
|
||||
All of these separate files are subsequently imported and compiled in `screen.scss`.
|
||||
All of these separate files are subsequently imported and compiled in `app.css`.
|
||||
|
||||
|
||||
## Front End Standards
|
||||
|
|
@ -45,5 +26,5 @@ All of these separate files are subsequently imported and compiled in `screen.sc
|
|||
* End all lines with a semi-colon.
|
||||
* For multiple, comma-separated selectors, place each selector on its own line.
|
||||
* Use js- prefixed classes for JavaScript hooks into the DOM, and never use these in CSS as per [Slightly Obtrusive JavaSript](http://ozmm.org/posts/slightly_obtrusive_javascript.html)
|
||||
* Avoid SASS over-nesting. Never nest more than 3 levels deep.
|
||||
* Use comments to explain "why" not "what" (Eg. This requires a z-index in order to appear above mobile navigation. Not: This is a thing which is always on top!)
|
||||
* Avoid over-nesting CSS. Never nest more than 3 levels deep.
|
||||
* Use comments to explain "why" not "what" (Good: This requires a z-index in order to appear above mobile navigation. Bad: This is a thing which is always on top!)
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>2</title>
|
||||
<link rel="stylesheet" href="../../../built/assets/ghost.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="gh-viewport">
|
||||
|
||||
<nav class="gh-nav">
|
||||
<header class="gh-nav-menu">
|
||||
<div class="gh-nav-menu-icon" style="background-image: url(https://s3.amazonaws.com/f.cl.ly/items/3I0g431b2b3q00253K1V/d16dc430c9c4f5c09d6ca09be3e5c72fdb21c1ac.png)"></div>
|
||||
<div class="gh-nav-menu-details">
|
||||
<div class="gh-nav-menu-details-blog">Ghost</div>
|
||||
<div class="gh-nav-menu-details-user">John O'Nolan</div>
|
||||
</div>
|
||||
<i class="icon-arrow"></i>
|
||||
</header>
|
||||
<section class="gh-nav-body">
|
||||
<section class="gh-nav-search">
|
||||
<input class="gh-nav-search-input gh-input" type="text" placeholder="Search">
|
||||
<button class="gh-nav-search-button"><i class="icon-search"></i><span class="sr-only">Search</span></button>
|
||||
</section>
|
||||
<ul class="gh-nav-list gh-nav-main">
|
||||
<li><a href="#"><i class="icon-dash"></i>Dashboard</a></li>
|
||||
<li><a href="#"><i class="icon-team"></i>Team</a></li>
|
||||
<li class="current"><a href="#"><i class="icon-content"></i>Content</a></li>
|
||||
<li><a href="#"><i class="icon-user"></i>My Posts</a></li>
|
||||
<li><a href="#"><i class="icon-idea"></i>Ideas</a></li>
|
||||
</ul>
|
||||
<ul class="gh-nav-list gh-nav-settings">
|
||||
<li class="gh-nav-list-h">Settings</li>
|
||||
<li><a href="#"><i class="icon-settings"></i>General</a></li>
|
||||
<li><a href="#"><i class="icon-design"></i>Design</a></li>
|
||||
<li><a href="#"><i class="icon-compass"></i>Navigation</a></li>
|
||||
<li><a href="#"><i class="icon-tag"></i>Tags</a></li>
|
||||
<li><a href="#"><i class="icon-code"></i>Code Injection</a></li>
|
||||
<li><a href="#"><i class="icon-apps"></i>Apps</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="gh-nav-footer">
|
||||
foot
|
||||
</footer>
|
||||
</nav>
|
||||
|
||||
<main class="gh-main">
|
||||
<p>Just a year ago we launched our **Ghost(Pro)** hosted platform to allow people to easily deploy and run Ghost blogs.</p>
|
||||
|
||||
<p>We’ve come a long way.</p>
|
||||
|
||||
<p>From the very beginning, during the [Kickstarter Campaign](https://www.kickstarter.com/projects/johnonolan/ghost-just-a-blogging-platform), we put forward the idea of a hosted platform for an Open Source project as a means to make it both sustainable and profitable.</p>
|
||||
|
||||
<p>At that point it was really just a theory and a dream. No Open Source project had ever done anything quite like it before.</p>
|
||||
|
||||
<p>**Today, the Ghost Foundation turns over $350,000 and, even more significantly: is profitable.**</p>
|
||||
|
||||
<p>2014 was a pretty incredible year. It’s surreal to look back at just how far we’ve come. 2015 is set to be even bigger, and we’ve got a lot of plans.</p>
|
||||
|
||||
<p>## A Bigger Focus on Transparency</p>
|
||||
|
||||
<p>For the last year we’ve realised that a lot of things we’re passionate about are symptoms of something larger. Ghost is Open Source because we believe in free and open software which is available to everyone to use, hack and redistribute as they see fit. Ghost is not-for-profit because we believe in building an incredible company which is dedicated to its users, rather than creating wealth for its founders.</p>
|
||||
|
||||
<p>We’ve realised the larger umbrella that embodies all of these elements that ties them all together is quite simple: Transparency.</p>
|
||||
|
||||
<p>What we’re really excited about is building a company with integrity that’s completely open about what it does and why.</p>
|
||||
|
||||
<p>This year we’re going to place a much bigger focus on being even more aggressive about the number of things which we open up to the public. We’ve learned a lot from our friends over at [Buffer](http://bufferapp.com) and we’re going to be taking a leaf out of their book in several ways.</p>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scrollbars</title>
|
||||
<link rel="stylesheet" href="../assets/css/ghost.min.css">
|
||||
</head>
|
||||
<body class="manage">
|
||||
|
||||
<div id="container">
|
||||
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
|
||||
<nav class="global-nav" role="navigation">
|
||||
<a class="nav-item ghost-logo" href="/" title="/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-ghost"></i><span>Visit blog</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class=" nav-item nav-content active" href="/ghost/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-content"></i> Content
|
||||
</div>
|
||||
</a>
|
||||
<a class=" nav-item nav-new" href="/ghost/editor/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-add"></i> New Post
|
||||
</div>
|
||||
</a>
|
||||
<a class=" nav-item nav-settings" href="/ghost/settings/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-settings2"></i> Settings
|
||||
</div>
|
||||
</a>
|
||||
<div class="nav-item user-menu" data-href="#">
|
||||
<div class=" nav-label">
|
||||
<div class="image">
|
||||
<img src="../../../core/shared/img/user-image.png" alt="<script id='metamorph-30-start' type='text/x-placeholder'></script>
|
||||
Paul Davis
|
||||
<script id='metamorph-30-end' type='text/x-placeholder'></script>
|
||||
's profile picture">
|
||||
</div>
|
||||
<div class="name">
|
||||
aul Davis <i class="icon-chevron-down"></i>
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" ghost-popover fade-in dropdown">
|
||||
<ul class="dropdown-menu dropdown-triangle-top-right" role="menu">
|
||||
<li role="presentation"><a class=" dropdown-item user-menu-profile" href="/ghost/settings/users/paul-davis/" tabindex="-1">Your Profile</a></li>
|
||||
<li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/">Help / Support</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="presentation"><a class=" dropdown-item user-menu-signout" href="/ghost/signout/" tabindex="-1">Sign Out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main id="gh-main" class="viewport" role="main">
|
||||
<aside class=" notifications top"></aside>
|
||||
<aside class=" notifications bottom"></aside>
|
||||
<section class=" content-view-container">
|
||||
<header class="page-header">
|
||||
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||||
<h2 class="page-title">Content</h2>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
<a class=" btn btn-green" href="/ghost/editor/" title="New Post"><span class="hidden">New Post</span></a>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="content-list-content">
|
||||
<div class="nano">
|
||||
<div class="nano-content">
|
||||
<ol class="posts-list">
|
||||
<li>
|
||||
<a class="permalink" href="">
|
||||
<h3 class="entry-title">Lorem Ipsum</h3>
|
||||
<section class="entry-meta">
|
||||
<span class="status">
|
||||
<span class="draft">Draft</span>
|
||||
</span>
|
||||
</section>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</section>
|
||||
<section class="content-preview js-content-preview" style="padding: 0;">
|
||||
|
||||
<div class="nano">
|
||||
<div class="nano-content">
|
||||
|
||||
<header class="post-preview-header" style="padding: 15px 15px 0 15px;">
|
||||
<button type="button" class="btn btn-default btn-back">Back</button>
|
||||
<button type="button" class="unfeatured" title="Feature this post">
|
||||
<span class="hidden">Star</span>
|
||||
</button>
|
||||
<small>
|
||||
<span class="status">Published</span>
|
||||
<span class="normal">by</span>
|
||||
<span class="author">Test User</span>
|
||||
</small>
|
||||
<section class="post-controls">
|
||||
<a class=" btn btn-default post-edit" href="/ghost/editor/34/"><i class="icon-pen"></i> Edit</a>
|
||||
</section>
|
||||
</header>
|
||||
<section class=" content-preview-content" style="padding: 15px;">
|
||||
<div class="wrapper">
|
||||
<h1>Lorem Ipsum</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nesciunt consectetur ipsa sapiente recusandae suscipit excepturi asperiores ex dolores laborum rerum vero nam non amet corrupti dignissimos eum odit ut quae iure, ad ratione neque. Ea minima minus aspernatur ut, nulla quam accusantium laboriosam libero vel quos repellendus repellat eius!</p>
|
||||
<p>Totam excepturi necessitatibus porro aperiam commodi quaerat blanditiis numquam sint minus placeat esse quas iste nulla doloremque eum voluptate ipsa enim ab ullam laboriosam dignissimos, quo voluptates soluta laudantium vero. Fuga assumenda quidem officiis eius, unde blanditiis! Quod eum, itaque quis, ea nobis ipsa delectus, sit modi nesciunt, harum cupiditate.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam, eum, ea provident neque blanditiis omnis quae quidem iusto est pariatur odio inventore magni voluptatem aut facere sint animi nam, maxime ex perferendis reprehenderit. Assumenda ex, vitae totam quia ea obcaecati rem veniam adipisci dolores. Eaque reiciendis, numquam itaque deserunt.</p>
|
||||
<p>Nihil ut eaque sit doloribus repellendus accusantium officiis, aliquam error minima fuga, in, consequatur ipsum blanditiis facilis enim quia nostrum numquam dignissimos neque ab magni rerum amet maiores exercitationem! Omnis tenetur, molestias cumque laudantium praesentium suscipit alias maxime tempora facere cum libero tempore architecto blanditiis, ullam nihil, voluptatem voluptatum! Itaque.</p>
|
||||
<p>Dolor magnam nobis tenetur impedit fugit cum debitis voluptatem delectus quisquam itaque quis placeat, odit eligendi qui, asperiores consectetur porro maiores sequi atque dolorem. Quam unde odio, aperiam, eius expedita laudantium illo quisquam, eaque rerum quaerat blanditiis facilis delectus. Blanditiis quae illo et similique velit aut fugiat atque harum adipisci.</p>
|
||||
<p>Temporibus expedita pariatur laboriosam nesciunt dicta, in eligendi veniam corporis veritatis aliquam esse quia quaerat eius unde sequi earum explicabo doloremque. Cupiditate numquam officia distinctio iure minus, iusto error voluptatum sed, molestiae asperiores reiciendis dolorum eos unde corporis explicabo maiores recusandae atque. Consectetur culpa quo earum laboriosam ratione fugiat assumenda!</p>
|
||||
<p>Ducimus sapiente minima ipsa magni aliquid consectetur corrupti ab a quos vel. Nihil optio cum, iure iusto ut sed qui hic odit. Cupiditate quos, explicabo sunt commodi magnam nam debitis pariatur in ratione. Asperiores quaerat impedit officia iusto quae molestias, nam consectetur eum aspernatur quas. Necessitatibus quam est id hic.</p>
|
||||
<p>Repudiandae deleniti minima perspiciatis quam cupiditate placeat quibusdam aspernatur, esse, libero, eveniet, fugit eaque nesciunt voluptatum. Illum tempora modi odio officiis odit exercitationem eos quis tenetur vero inventore fugit soluta voluptatibus saepe numquam, nemo, rerum atque quo cumque asperiores cum officia nisi sint animi! Eum est sed eligendi. Iure, aspernatur.</p>
|
||||
<p>Cumque deleniti ut esse sit laudantium voluptate totam, fuga consectetur architecto ad eveniet magnam in similique hic dignissimos minus modi temporibus laboriosam sapiente ab dolorum molestias quia. Velit officiis doloremque, vel magnam pariatur possimus beatae eligendi animi molestiae? Laboriosam reprehenderit veniam id fugiat suscipit animi nemo molestias cupiditate, pariatur corporis.</p>
|
||||
<p>Iste, nobis inventore, modi, atque harum eius necessitatibus voluptates nam deserunt aspernatur maiores similique vero sapiente vel doloribus quaerat deleniti et magnam sunt quae numquam, mollitia eveniet magni. Sequi rerum sit quaerat obcaecati molestias. Dolores voluptatibus sed quam adipisci ratione, necessitatibus asperiores commodi quasi cupiditate debitis in sit aliquam ex.</p>
|
||||
<p>Eum aliquam soluta accusantium amet neque pariatur velit in quaerat esse hic nam quibusdam aspernatur quae, iusto, sapiente, at voluptas harum eos. Quas eaque pariatur beatae accusantium fugit, explicabo nulla inventore ducimus minus facilis, impedit. Sequi vel repellat modi delectus quis sit, at suscipit, impedit ipsa quibusdam itaque ullam. Qui.</p>
|
||||
<p>Illo deserunt sunt commodi. Facere nemo quam delectus quo ad molestiae qui corporis dolorem, dignissimos consectetur iste repellendus animi suscipit sunt sequi, debitis reprehenderit illum repudiandae ipsam laborum fuga, quisquam atque aut unde. Culpa accusantium molestias quidem rerum tempore illo, quam a sit fuga molestiae beatae unde asperiores, deserunt sed.</p>
|
||||
<p>Accusantium porro nisi nihil corporis, quidem quam nostrum alias debitis distinctio magnam est illo quis veritatis recusandae totam beatae praesentium rem repellat corrupti, commodi minima similique nemo. Quos natus, distinctio culpa eius fugit asperiores corrupti ipsa aperiam, voluptate provident nisi voluptatum eligendi omnis quaerat similique consequuntur ad tempora deserunt unde!</p>
|
||||
<p>Tenetur culpa, natus aliquid molestiae odit architecto, velit amet, numquam necessitatibus non aut sunt nesciunt quas, odio cum illum provident quis repudiandae ea maxime rerum quidem autem laudantium sapiente. Molestiae ullam voluptatum facere magni optio tempora quos recusandae. Autem alias corporis saepe sit beatae illo, veniam voluptatem minima, adipisci nobis!</p>
|
||||
<p>Veniam ad, accusamus hic, facilis commodi natus eum cupiditate libero ratione perspiciatis tempora consequuntur vitae dignissimos optio error voluptatum totam quis dolores molestiae, animi excepturi debitis explicabo dolor? Dolorem eveniet cum ab facere eum praesentium ipsa quam itaque. Consequuntur distinctio magnam libero eveniet eum ratione itaque. Molestiae debitis dolorum voluptatem?</p>
|
||||
<p>Perferendis ut quia iusto illo, consequatur vitae obcaecati assumenda totam in molestiae modi eos rem sunt odio soluta qui at dicta, a aut deserunt voluptates nesciunt! Alias natus et dolores veniam fuga modi quo dolorem numquam! Quisquam inventore esse facere amet qui ducimus repudiandae natus mollitia consequatur ab libero, adipisci.</p>
|
||||
<p>Perspiciatis error ad odit earum excepturi, cumque, mollitia molestias blanditiis impedit consectetur commodi autem architecto nihil, cupiditate nobis laborum vero voluptatibus. Sit repellat autem dicta, mollitia, cum aliquid minima provident, officia quidem molestias est. Esse iusto optio saepe, dolores debitis culpa dolor quis praesentium consectetur. Quae iusto, fugiat labore! Placeat?</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="../../../core/shared/lib/nanoscroller/nanoscroller.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function debounce(fn, delay) {
|
||||
var timer = null;
|
||||
return function () {
|
||||
var context = this, args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
$(function(){
|
||||
|
||||
// Duplicate the post 40 times (for brevity of HTML)
|
||||
// Not required in any way
|
||||
var list = $(".posts-list li:first");
|
||||
for (var i = 0; i < 40; i++){list.clone().appendTo('.posts-list');}
|
||||
// Duplicate the post 40 times (for brevity of HTML)
|
||||
|
||||
|
||||
|
||||
$(".nano").nanoScroller({
|
||||
iOSNativeScrolling: true
|
||||
});
|
||||
|
||||
$(".nano").on("mouseenter", function(){
|
||||
var nano = $(this);
|
||||
nano.addClass("nanoShowScrollBar");
|
||||
setTimeout(function(){
|
||||
nano.removeClass("nanoShowScrollBar");
|
||||
}, 850);
|
||||
});
|
||||
|
||||
$(".nano-content").scroll(function() {
|
||||
var nano = $(this).parent(".nano");
|
||||
nano.addClass("nanoShowScrollBar");
|
||||
clearTimeout($.data(this, 'scrollTimer'));
|
||||
$.data(this, 'scrollTimer', setTimeout(function() {
|
||||
nano.removeClass("nanoShowScrollBar");
|
||||
}, 850));
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
app/styles/app.css
Normal file
43
app/styles/app.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* Stop: Normalize.
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "../../bower_components/normalize.css/normalize.css";
|
||||
|
||||
|
||||
/* Patterns: Groups of Styles
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "patterns/global.css";
|
||||
@import "patterns/_shame.css";
|
||||
@import "patterns/icons.css";
|
||||
@import "patterns/forms.css";
|
||||
@import "patterns/buttons.css";
|
||||
@import "patterns/labels.css";
|
||||
@import "patterns/tables.css";
|
||||
@import "patterns/navlist.css";
|
||||
|
||||
|
||||
/* Components: Groups of Patterns
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "components/modals.css";
|
||||
@import "components/notifications.css";
|
||||
@import "components/uploader.css";
|
||||
@import "components/splitbuttons.css";
|
||||
@import "components/dropdowns.css";
|
||||
@import "components/pagination.css";
|
||||
@import "components/badges.css";
|
||||
@import "components/popovers.css";
|
||||
@import "components/settings-menu.css";
|
||||
|
||||
|
||||
/* Layouts: Groups of Components
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "layouts/main.css";
|
||||
@import "layouts/setup.css";
|
||||
@import "layouts/auth.css";
|
||||
@import "layouts/content.css";
|
||||
@import "layouts/editor.css";
|
||||
@import "layouts/settings.css";
|
||||
@import "layouts/users.css";
|
||||
@import "layouts/user.css";
|
||||
@import "layouts/about.css";
|
||||
@import "layouts/tags.css";
|
||||
@import "layouts/error.css";
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
//
|
||||
// Modules: Mixins, variables, and utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "modules/variables";
|
||||
@import "modules/icons";
|
||||
@import "modules/animations";
|
||||
|
||||
|
||||
//
|
||||
// Libraries: Code by other Homies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "../../../../bower_components/normalize-scss/_normalize"; // via Bower
|
||||
@import "vendor/nprogress";
|
||||
@import "vendor/nanoscroller";
|
||||
|
||||
|
||||
//
|
||||
// Patterns: Groups of Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "patterns/global";
|
||||
@import "patterns/_shame"; // TODO: Remove
|
||||
@import "patterns/forms";
|
||||
@import "patterns/buttons";
|
||||
@import "patterns/labels";
|
||||
@import "patterns/tables";
|
||||
@import "patterns/navlist";
|
||||
|
||||
|
||||
//
|
||||
// Components: Groups of Patterns
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "components/modals";
|
||||
@import "components/notifications";
|
||||
@import "components/uploader";
|
||||
@import "components/splitbuttons";
|
||||
@import "components/dropdowns";
|
||||
@import "components/pagination";
|
||||
@import "components/badges";
|
||||
@import "components/popovers";
|
||||
@import "components/settings-menu";
|
||||
|
||||
|
||||
//
|
||||
// Layouts: Groups of Components
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "layouts/main";
|
||||
@import "layouts/setup";
|
||||
@import "layouts/auth";
|
||||
@import "layouts/content";
|
||||
@import "layouts/editor";
|
||||
@import "layouts/settings";
|
||||
@import "layouts/users";
|
||||
@import "layouts/user";
|
||||
@import "layouts/about";
|
||||
@import "layouts/tags";
|
||||
@import "layouts/error";
|
||||
74
app/styles/components/badges.css
Normal file
74
app/styles/components/badges.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/* Badges
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 0 0 1px #777;
|
||||
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;
|
||||
}
|
||||
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.btn-xs .badge {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
p .badge {
|
||||
padding: 0px 4px 3px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.nav-pills > li > a > .badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.nav-item .badge {
|
||||
margin-top: -5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
a.badge:hover,
|
||||
a.badge:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Colour variations
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.badge.badge-blue {
|
||||
background-color: var(--blue);
|
||||
box-shadow: 0 0 0 1px var(--blue);
|
||||
}
|
||||
|
||||
.badge.badge-green {
|
||||
background-color: var(--green);
|
||||
box-shadow: 0 0 0 1px var(--green);
|
||||
}
|
||||
|
||||
.badge.badge-red {
|
||||
background-color: var(--red);
|
||||
box-shadow: 0 0 0 1px var(--red);
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// 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
|
||||
// --------------------------------------------------
|
||||
|
||||
.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;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Colours
|
||||
// --------------------------------------------------
|
||||
|
||||
.badge.badge-blue {
|
||||
background-color: $blue;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
|
||||
.badge.badge-green {
|
||||
background-color: $green;
|
||||
box-shadow: 0 0 0 1px $green;
|
||||
}
|
||||
|
||||
.badge.badge-red {
|
||||
background-color: $red;
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
}
|
||||
126
app/styles/components/dropdowns.css
Normal file
126
app/styles/components/dropdowns.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/* Dropdowns
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropdown-toggle:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
float: left;
|
||||
min-width: 220px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
background-color: #fff;
|
||||
border: color(var(--lightgrey) lightness(-15%)) 1px solid;
|
||||
border-radius: 4px;
|
||||
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;
|
||||
}
|
||||
|
||||
.dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
background: color(var(--lightgrey) lightness(-5%));
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a,
|
||||
.dropdown-menu > li > button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 1.9em;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.dropdown-menu i {
|
||||
font-size: 0.9em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* States
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Hover/Focus */
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus,
|
||||
.dropdown-menu > li > button:hover,
|
||||
.dropdown-menu > li > button:focus {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus,
|
||||
.dropdown-menu > .active > button,
|
||||
.dropdown-menu > .active > button:hover,
|
||||
.dropdown-menu > .active > button:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
.dropdown-menu > .disabled > a:focus,
|
||||
.dropdown-menu > .disabled > button,
|
||||
.dropdown-menu > .disabled > button:hover,
|
||||
.dropdown-menu > .disabled > button:focus {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
.dropdown-menu > .disabled > a:focus,
|
||||
.dropdown-menu > .disabled > button:hover,
|
||||
.dropdown-menu > .disabled > button:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
/* Open / Close
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.open > a {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.closed > .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Dropdown menus
|
||||
//
|
||||
// Styles for the dropdown component
|
||||
//
|
||||
// * Base Styles
|
||||
// * States
|
||||
// * Open & Close
|
||||
// * Dropdown triangles placeholder styles
|
||||
// * Dropdown triangles classes
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Base Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// The dropdown wrapper <div>
|
||||
.dropdown {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
// Prevent the focus on the dropdown toggle when closing dropdowns
|
||||
.dropdown-toggle:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// The dropdown menu <ul>
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
float: left;
|
||||
min-width: 220px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
|
||||
background-color: #fff;
|
||||
border: darken($lightgrey, 15%) 1px solid;
|
||||
border-radius: 4px;
|
||||
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
|
||||
&.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
background: darken($lightgrey, 5%);
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
> li > a,
|
||||
> li > button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
|
||||
font-weight: normal;
|
||||
line-height: 1.9em;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.9em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}//.dropdown-menu
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
// --------------------------------------------------
|
||||
|
||||
// Hover/Focus state
|
||||
.dropdown-menu > li > a,
|
||||
.dropdown-menu > li > button {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > button {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: #428bca;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
background-color: transparent;
|
||||
background-image: none; // Remove CSS gradient
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Open & Close
|
||||
// --------------------------------------------------
|
||||
|
||||
// Open state for the dropdown
|
||||
.open {
|
||||
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Closed state for the dropdown
|
||||
.closed {
|
||||
> .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Dropdown triangles placeholder styles
|
||||
// --------------------------------------------------
|
||||
|
||||
%dropdown-triangle {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
}//&:before
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}//&:after
|
||||
}
|
||||
|
||||
%dropdown-triangle-center {
|
||||
&:before {
|
||||
left: 50%;
|
||||
margin-left: -(8px / 2);
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
margin-left: -(8px / 2 + 2);
|
||||
}
|
||||
}
|
||||
|
||||
%dropdown-triangle-left {
|
||||
&:before {
|
||||
left: (8px / 2 + 2);
|
||||
}
|
||||
&:after {
|
||||
left: (8px / 2);
|
||||
}
|
||||
}
|
||||
%dropdown-triangle-right {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: (8px / 2 + 2);
|
||||
}
|
||||
&:after {
|
||||
left: auto;
|
||||
right: (8px / 2);
|
||||
}
|
||||
}
|
||||
220
app/styles/components/modals.css
Normal file
220
app/styles/components/modals.css
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
/* Modals
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Full screen container
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1040;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
transition: all 0.15s linear 0s;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
|
||||
/* The modal
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal,
|
||||
.modal-action {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
z-index: 1050;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.modal,
|
||||
.modal-action {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal button,
|
||||
.modal-action button {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.modal .image-uploader,
|
||||
.modal .pre-image-uploader,
|
||||
.modal-action .image-uploader,
|
||||
.modal-action .pre-image-uploader {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-action {
|
||||
padding: 60px 0 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.modal-action {
|
||||
padding: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Modal content
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
padding: 18px;
|
||||
background-clip: padding-box;
|
||||
background-color: #fff;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 6px;
|
||||
}
|
||||
|
||||
.modal-content .close {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 19px;
|
||||
z-index: 9999;
|
||||
width: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.modal-header h1 {
|
||||
display: inline-block;
|
||||
margin: 0 25px 0 0;
|
||||
font-size: 1.85em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-body .red {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.modal-body > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal-body > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal-footer button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* Modifiers
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-style-wide {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.modal-style-wide {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-style-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Login styles */
|
||||
.modal-body .login-form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-body .login-form .password-wrap input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.modal-body .login-form {
|
||||
margin: 0 auto;
|
||||
max-width: 264px;
|
||||
}
|
||||
.modal-body .login-form .password-wrap {
|
||||
width: 100%;
|
||||
margin: 0 auto 1em;
|
||||
}
|
||||
.modal-body .login-form .btn {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.modal-body .login-form {
|
||||
display: flex;
|
||||
}
|
||||
.modal-body .login-form .password-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Open States
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-container.open,
|
||||
.modal-container.open > .modal,
|
||||
.modal-container.open > .modal-action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-background.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Animations
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-container.fade-out {
|
||||
animation-duration: 0.08s;
|
||||
}
|
||||
|
||||
.modal-background.fade-out {
|
||||
animation-duration: 0.15s;
|
||||
}
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Modals
|
||||
//
|
||||
// Styles for the modal component
|
||||
//
|
||||
// * Outer Container
|
||||
// * Inner Container
|
||||
// * Content
|
||||
// * Modifiers
|
||||
// * Open States
|
||||
// * Animations
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Outer Container
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1040;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
transition: all 0.15s linear 0s;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
background: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inner Container
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal,
|
||||
.modal-action {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
z-index: 1050;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
pointer-events: auto;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
padding: 10px;
|
||||
};
|
||||
|
||||
button {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.image-uploader,
|
||||
.pre-image-uploader {
|
||||
margin: 0;
|
||||
}
|
||||
}//.modal
|
||||
|
||||
.modal-action {
|
||||
padding: 60px 0 30px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
padding: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
padding: 18px;
|
||||
background-clip: padding-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: rgba(0,0,0,0.2) 0 0 0 6px;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 19px;
|
||||
z-index: 9999;
|
||||
width: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}//.modal-content
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
margin: 0 25px 0 0;
|
||||
font-size: 1.85em;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
|
||||
.red {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// Remove bottom margin from whatever the first/last direct descendent is
|
||||
// Normalizes any global styles
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-top: 20px;
|
||||
text-align: right; // Used instead of floats as they invert the order
|
||||
|
||||
button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Modifiers
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-style-wide {
|
||||
width: 550px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-style-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Modal login styles
|
||||
.modal-body .login-form {
|
||||
display: block; // Override inherited `display: table-cell;`
|
||||
|
||||
.password-wrap {
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
margin: 0 auto;
|
||||
max-width: 264px;
|
||||
|
||||
.password-wrap {
|
||||
width: 100%;
|
||||
margin: 0 auto 1em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
display: flex;
|
||||
|
||||
.password-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Open States
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-container.open,
|
||||
.modal-container.open > .modal,
|
||||
.modal-container.open > .modal-action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-background.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animations
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-container.fade-out {
|
||||
animation-duration: 0.08s;
|
||||
}
|
||||
|
||||
.modal-background.fade-out {
|
||||
// animation-delay: 0.06s;
|
||||
animation-duration: 0.15s;
|
||||
}
|
||||
2
app/styles/components/notifications.css
Normal file
2
app/styles/components/notifications.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/* Notifications
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Notifications
|
||||
//
|
||||
// Styles for notifications
|
||||
//
|
||||
// * Wrappers
|
||||
// * Base Notification
|
||||
// * Individual Notifications
|
||||
// ------------------------------------------------------------
|
||||
111
app/styles/components/pagination.css
Normal file
111
app/styles/components/pagination.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/* Pagination
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 20px 0;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.pagination > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pagination > li > a,
|
||||
.pagination > li > span {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 6px 12px;
|
||||
line-height: 1.42857143;
|
||||
text-decoration: none;
|
||||
color: var(--blue);
|
||||
background-color: #fff;
|
||||
border: 1px solid #e1e1e1;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.pagination > li:first-child > a,
|
||||
.pagination > li:first-child > span {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.pagination > li:last-child > a,
|
||||
.pagination > li:last-child > span {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.pagination > li > a:hover,
|
||||
.pagination > li > a:focus,
|
||||
.pagination > li > span:hover,
|
||||
.pagination > li > span:focus {
|
||||
color: #2A6496;
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > a:hover,
|
||||
.pagination > .active > a:focus,
|
||||
.pagination > .active > span,
|
||||
.pagination > .active > span:hover,
|
||||
.pagination > .active > span:focus {
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
background-color: #428BCA;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pagination > .disabled > span,
|
||||
.pagination > .disabled > span:hover,
|
||||
.pagination > .disabled > span:focus,
|
||||
.pagination > .disabled > a,
|
||||
.pagination > .disabled > a:hover,
|
||||
.pagination > .disabled > a:focus {
|
||||
color: #777;
|
||||
background-color: #FFF;
|
||||
border-color: #DDD;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
/* Sizing
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.pagination-lg > li > a,
|
||||
.pagination-lg > li > span {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pagination-lg > li:first-child > a,
|
||||
.pagination-lg > li:first-child > span {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
.pagination-lg > li:last-child > a,
|
||||
.pagination-lg > li:last-child > span {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.pagination-sm > li > a,
|
||||
.pagination-sm > li > span {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-sm > li:first-child > a,
|
||||
.pagination-sm > li:first-child > span {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination-sm > li:last-child > a,
|
||||
.pagination-sm > li:last-child > span {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Pagination
|
||||
//
|
||||
// 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;
|
||||
|
||||
> 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 #e1e1e1;
|
||||
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 > 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
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.pagination-lg {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-sm {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
59
app/styles/components/popovers.css
Normal file
59
app/styles/components/popovers.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* Popovers
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.popover-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 11px 26px 13px 16px;
|
||||
background: var(--darkgrey);
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2rem;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.popover-desc {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
margin-top: 11px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.popover-body b {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.popover-body > *:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Open / Close
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.popover {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popover .popover-item {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.popover .popover-item.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.popover .popover-item.closed {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Popovers
|
||||
//
|
||||
// Styles for the popover component
|
||||
//
|
||||
// * Popovers
|
||||
// * Open/close
|
||||
// * Positioning
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Popovers
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 11px 26px 13px 16px;
|
||||
background: $darkgrey;
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2rem;
|
||||
color: $midgrey;
|
||||
}
|
||||
.popover-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
}
|
||||
.popover-desc {
|
||||
margin-top: -4px;
|
||||
}
|
||||
.popover-body {
|
||||
margin-top: 11px;
|
||||
line-height: 1.7;
|
||||
b {
|
||||
color: #fff;
|
||||
}
|
||||
> *:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Open/close
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.popover-item {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.closed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}//.popover
|
||||
187
app/styles/components/settings-menu.css
Normal file
187
app/styles/components/settings-menu.css
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/* Settings Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Container
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-menu-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 500;
|
||||
width: 350px;
|
||||
border-left: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transform: translate3d(350px, 0px, 0px);
|
||||
}
|
||||
|
||||
body.settings-menu-expanded .settings-menu-container {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
|
||||
.settings-menu-container .settings-menu-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
opacity: 1;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.settings-menu-container .settings-menu-pane {
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-menu-container .settings-menu-pane.settings-menu-pane-out-left {
|
||||
transform: translate3d(-100%, 0px, 0px);
|
||||
}
|
||||
|
||||
.settings-menu-container .settings-menu-pane.settings-menu-pane-out-right {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
}
|
||||
|
||||
.settings-menu-container .settings-menu-pane.settings-menu-pane-in {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
|
||||
|
||||
/* Header
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-menu-header {
|
||||
position: relative;
|
||||
padding: 19px 24px;
|
||||
}
|
||||
|
||||
.settings-menu-header h4 {
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settings-menu-header .close {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.settings-menu-header .close:before {
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.settings-menu-header.subview h4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-menu-header.subview .back {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.settings-menu-header.subview .back:before {
|
||||
left: 19px;
|
||||
}
|
||||
|
||||
.settings-menu-header-action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 7px;
|
||||
width: 45px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settings-menu-header-action:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--midbrown);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.settings-menu-header-action:hover:before {
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
|
||||
/* Content
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-menu-content {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
|
||||
.settings-menu-content .image-uploader {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
margin: 0 0 1.6rem 0;
|
||||
}
|
||||
|
||||
.settings-menu-content .image-uploader.image-uploader-url {
|
||||
padding: 35px 45px;
|
||||
}
|
||||
|
||||
.settings-menu-content textarea {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
.settings-menu-content .tag-delete-button {
|
||||
padding-left: 0;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.settings-menu-content .tag-delete-button:before {
|
||||
margin-right: 4px;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-menu-content .tag-delete-button:hover,
|
||||
.settings-menu-content .tag-delete-button:hover:before {
|
||||
color: color(var(--red) lightness(-10%));
|
||||
}
|
||||
|
||||
.settings-menu-content .nav-list {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.settings-menu-content .pre-image-uploader {
|
||||
width: auto;
|
||||
min-height: 50px;
|
||||
max-height: 250px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.settings-menu-content .word-count {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ghost-url-preview {
|
||||
width: 98%;
|
||||
/* Preview never wider than input */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/* Background
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
body.settings-menu-expanded .content-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 600;
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transform: translate3d(-350px, 0px, 0px);
|
||||
/* Not off the screen, to give a parallax effect */
|
||||
}
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Settings Menu
|
||||
//
|
||||
// Styles for the settings menu component
|
||||
//
|
||||
// * Wrapper
|
||||
// * Header
|
||||
// * Content
|
||||
// * Content Cover
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-menu-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 500;
|
||||
width: 350px;
|
||||
border-left: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
transform: translate3d(350px, 0px, 0px);
|
||||
|
||||
// This selector ends up being `body.settings-menu-expanded .settings-menu-container`
|
||||
body.settings-menu-expanded & {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
|
||||
.settings-menu-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
opacity: 1;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-menu-header.subview {
|
||||
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back {
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
left: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-menu-header-action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 7px;
|
||||
width: 45px;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: $midbrown;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&:before {
|
||||
color: $midgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-menu-content {
|
||||
padding: 0 24px 24px;
|
||||
|
||||
.image-uploader {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
margin: 0 0 1.6rem 0;
|
||||
|
||||
&.image-uploader-url {
|
||||
padding: 35px 45px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
.tag-delete-button {
|
||||
padding-left: 0;
|
||||
color: $red;
|
||||
|
||||
&:before {
|
||||
margin-right: 4px;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&, &:before {
|
||||
color: darken($red, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.pre-image-uploader {
|
||||
width: auto;
|
||||
min-height: 50px;
|
||||
max-height: 250px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
font-weight: bold;
|
||||
}
|
||||
}//.settings-menu-content
|
||||
|
||||
.ghost-url-preview {
|
||||
width: 98%; // Preview never wider than input
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Content Cover
|
||||
// --------------------------------------------------
|
||||
// A transparent div that goes over the content, used
|
||||
// to listen for clicks to close the settings menu
|
||||
|
||||
body.settings-menu-expanded {
|
||||
|
||||
.content-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 600;
|
||||
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
|
||||
transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect
|
||||
}//.editor-cover
|
||||
|
||||
}//body.settings-menu-expanded
|
||||
61
app/styles/components/splitbuttons.css
Normal file
61
app/styles/components/splitbuttons.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/* Splitbuttons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.splitbtn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
/* Flatten out the right side */
|
||||
/* Flatten out the left side */
|
||||
}
|
||||
|
||||
.splitbtn .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
/* Prevent double border between buttons */
|
||||
/* Make sure the hovered element is always on
|
||||
// top so overlap from .btn + btn. invisible */
|
||||
}
|
||||
|
||||
.splitbtn .btn + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.splitbtn .btn:hover,
|
||||
.splitbtn .btn:focus,
|
||||
.splitbtn .btn:active,
|
||||
.splitbtn .btn.active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.splitbtn .btn:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.splitbtn .btn:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.splitbtn .dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
/* This is the additional dropdown arrow, to the right of the button. */
|
||||
}
|
||||
|
||||
.splitbtn .dropdown-toggle.btn-sm {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.splitbtn .dropdown-toggle.btn-lg {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.splitbtn .dropdown-toggle .options {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Splitbuttons
|
||||
//
|
||||
// Styles for splitbuttons (button + toggle for a popover)
|
||||
//
|
||||
// * Default
|
||||
// * Base Placeholder Styles
|
||||
// * Variation Classes
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Default
|
||||
// --------------------------------------------------
|
||||
|
||||
.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) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Flatten out the left side
|
||||
.dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}//.splitbtn
|
||||
178
app/styles/components/uploader.css
Normal file
178
app/styles/components/uploader.css
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
/* Image Uploader
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.image-uploader {
|
||||
margin: 1.6em 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 55px 60px;
|
||||
border: #e1e1e1 3px dashed;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
color: var(--brown);
|
||||
background: #F9F8F5;
|
||||
}
|
||||
|
||||
.image-uploader a {
|
||||
color: var(--brown);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.image-uploader a:hover {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.image-uploader .description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.image-uploader .image-upload {
|
||||
line-height: 12px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: var(--brown);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.image-uploader .image-upload:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-uploader .btn-green {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.image-uploader .btn-blue {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.image-uploader input.main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transform-origin: right;
|
||||
transform: scale(14);
|
||||
font-size: 23px;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-uploader input.main.right {
|
||||
right: 9999px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.image-uploader input.url {
|
||||
font: -webkit-small-control;
|
||||
vertical-align: middle;
|
||||
padding: 9px 7px;
|
||||
margin: 10px 0;
|
||||
outline: 0;
|
||||
font-size: 1.1em;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.image-uploader input.url + .btn.btn-blue {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.image-uploader .progress {
|
||||
position: relative;
|
||||
margin: -19px 0 44px 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
border-radius: 12px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset;
|
||||
}
|
||||
|
||||
.image-uploader .fileupload-loading {
|
||||
display: block;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 28px;
|
||||
margin: -28px auto 0;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.image-uploader .failed {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.image-uploader .bar {
|
||||
height: 12px;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.image-uploader .bar.fail {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
|
||||
/* Pre-Image-Uploader // TODO: RENAME
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.pre-image-uploader {
|
||||
margin: 1.6em 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
color: var(--brown);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
min-height: 46px;
|
||||
}
|
||||
|
||||
.pre-image-uploader input {
|
||||
position: absolute;
|
||||
left: 9999px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pre-image-uploader a {
|
||||
z-index: 10000;
|
||||
color: var(--brown);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pre-image-uploader a:hover {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.pre-image-uploader img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.pre-image-uploader .image-cancel {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 8px;
|
||||
z-index: 300;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
line-height: 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 1px;
|
||||
}
|
||||
|
||||
.pre-image-uploader .image-cancel:hover {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: var(--red);
|
||||
}
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Image Uploader
|
||||
//
|
||||
// Styles for the image uploader
|
||||
//
|
||||
// * Image Uploader
|
||||
// * Pre Image Uploader
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Image Uploader
|
||||
// --------------------------------------------------
|
||||
|
||||
.image-uploader {
|
||||
margin: 1.6em 0;;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
padding: 55px 60px;
|
||||
border: #e1e1e1 3px dashed;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
color: $brown;
|
||||
background: #F9F8F5;
|
||||
|
||||
a {
|
||||
color: $brown;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.image-upload {
|
||||
line-height: 12px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: $brown;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
display: inline-block;
|
||||
position:relative;
|
||||
z-index: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
&.main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transform-origin: right;
|
||||
transform: scale(14);
|
||||
font-size: 23px;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
|
||||
&.right {
|
||||
right: 9999px;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.url {
|
||||
font: -webkit-small-control;
|
||||
vertical-align: middle;
|
||||
padding: 9px 7px;
|
||||
margin: 10px 0;
|
||||
outline: 0;
|
||||
font-size: 1.1em;
|
||||
background: #fff;
|
||||
|
||||
+ .btn.btn-blue {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
margin: -19px 0 44px 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
border-radius: 12px;
|
||||
box-shadow: (rgba(0,0,0,0.1) 0 1px 2px inset);
|
||||
}
|
||||
|
||||
.fileupload-loading {
|
||||
display: block;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 28px;
|
||||
margin: -28px auto 0;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.failed {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 12px;
|
||||
background: $blue;
|
||||
|
||||
&.fail {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
}//.image-uploader
|
||||
|
||||
|
||||
//
|
||||
// Pre Image Uploader
|
||||
// --------------------------------------------------
|
||||
// TODO: Find a better name for this.
|
||||
|
||||
.pre-image-uploader {
|
||||
margin: 1.6em 0;;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
color: $brown;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 2px;
|
||||
min-height: 46px;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
left: 9999px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
z-index: 10000;
|
||||
color: $brown;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.image-cancel {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 8px;
|
||||
z-index: 300;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
line-height: 0;
|
||||
border-radius: $border-radius;
|
||||
background: rgba(0,0,0,0.6);
|
||||
box-shadow: rgba(255,255,255,0.2) 0 0 0 1px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
}//.pre-image-uploader
|
||||
219
app/styles/layouts/about.css
Normal file
219
app/styles/layouts/about.css
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
/* About /ghost/settings/about/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-about h1 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.settings-content .settings-about {
|
||||
padding: 25px 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.about-ghost-intro h1 {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -21px;
|
||||
}
|
||||
|
||||
.about-ghost-intro .ghost_logo {
|
||||
content: "Ghost";
|
||||
}
|
||||
|
||||
.about-ghost-intro .version {
|
||||
font-weight: 300;
|
||||
font-size: 1.8rem;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -9px;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.about-ghost-intro h1 + p {
|
||||
margin-top: 1px;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.about-environment-help {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.about-environment dl {
|
||||
color: var(--midgrey);
|
||||
margin: 2px 0 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.about-environment dt, .about-environment dd {
|
||||
width: auto;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-environment dt {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.about-environment .about-environment-detail {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.about-help {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.about-help {
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-help .btn {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 32px;
|
||||
background: #A1ADB3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.about-help .btn:hover {
|
||||
background: color(#A1ADB3 lightness(-10%));
|
||||
}
|
||||
|
||||
.about-help .btn:nth-child(1) {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
.about-environment-help {
|
||||
max-width: 430px;
|
||||
}
|
||||
.about-environment {
|
||||
float: left;
|
||||
width: calc(100% - 190px);
|
||||
}
|
||||
.about-help {
|
||||
float: right;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Contributors
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.top-contributors {
|
||||
padding-left: 0;
|
||||
max-width: 660px;
|
||||
}
|
||||
|
||||
.top-contributors li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.top-contributors li a {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.top-contributors li a {
|
||||
margin-right: 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.top-contributors li a {
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-contributors li a:before {
|
||||
opacity: 0;
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
top: -27px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--darkgrey);
|
||||
color: #fff;
|
||||
padding: 2px 6px 3px;
|
||||
border-radius: var(--border-radius);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
font-size: 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-contributors li a:after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.top-contributors li a:hover:before,
|
||||
.top-contributors li a:hover:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.top-contributors li a img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.about-credits {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.about-credits h1 {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.about-contributors-info {
|
||||
margin-top: -12px;
|
||||
margin-bottom: 22px;
|
||||
font-size: 1.6rem;
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.about-get-involved {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
max-width: 290px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-copyright {
|
||||
margin-top: 62px;
|
||||
}
|
||||
|
||||
.about-copyright a:link,
|
||||
.about-copyright a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.about-copyright a:hover,
|
||||
.about-copyright a:focus,
|
||||
.about-copyright a:active {
|
||||
text-decoration: none;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
|
@ -1,260 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// About Ghost
|
||||
// Slug: /ghost/settings/about
|
||||
//
|
||||
// Styles for the About Ghost page, detailing environment & top
|
||||
// contributors.
|
||||
//
|
||||
// * Wrapper
|
||||
// * Logo & Version
|
||||
// * Environment & Get Involved
|
||||
// * Contributors
|
||||
// * Credits & Copyright
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-about {
|
||||
h1 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.settings-content .settings-about {
|
||||
padding: 25px 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Logo & Version
|
||||
// --------------------------------------------------
|
||||
|
||||
.about-ghost-intro {
|
||||
h1 {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -21px;
|
||||
}
|
||||
|
||||
.ghost_logo {
|
||||
content: "Ghost";
|
||||
}
|
||||
|
||||
.version {
|
||||
font-weight: 300;
|
||||
font-size: 1.8rem;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -9px;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
h1 + p {
|
||||
margin-top: 1px;
|
||||
color: $midgrey;
|
||||
}
|
||||
}//.about-ghost-intro
|
||||
|
||||
// Special case to hide the desktop page header, because
|
||||
// in this instance the Ghost logo replaces it.
|
||||
@media (min-width: 901px) {
|
||||
.settings-view-about .settings-view-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Environment & Get Involved
|
||||
// --------------------------------------------------
|
||||
|
||||
.about-environment-help {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.about-environment {
|
||||
dl {
|
||||
color: $midgrey;
|
||||
margin: 2px 0 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
dt, dd {
|
||||
width: auto;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.about-environment-detail {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.about-help {
|
||||
padding-top: 8px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 32px;
|
||||
background: #A1ADB3;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: darken(#A1ADB3, 10%);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
}
|
||||
}//.about-help
|
||||
|
||||
@media (min-width: 501px) {
|
||||
.about-environment-help {
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.about-environment {
|
||||
float: left;
|
||||
width: calc(100% - 190px);
|
||||
}
|
||||
|
||||
.about-help {
|
||||
float: right;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Contributors
|
||||
// --------------------------------------------------
|
||||
|
||||
.top-contributors {
|
||||
padding-left: 0;
|
||||
max-width: 660px;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
width: 10%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 601px) {
|
||||
margin-right: 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 0;
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
top: -27px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: $darkgrey;
|
||||
color: #fff;
|
||||
padding: 2px 6px 3px;
|
||||
border-radius: $border-radius;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
font-size: 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before,
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}//a
|
||||
}//li
|
||||
}//.top-contributors
|
||||
|
||||
|
||||
//
|
||||
// Credits & Copyright
|
||||
// --------------------------------------------------
|
||||
|
||||
.about-credits {
|
||||
margin-top: 45px;
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-contributors-info {
|
||||
margin-top: -12px;
|
||||
margin-bottom: 22px;
|
||||
font-size: 1.6rem;
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.about-get-involved {
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
max-width: 290px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-copyright {
|
||||
margin-top: 62px;
|
||||
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}//.about-copyright
|
||||
306
app/styles/layouts/auth.css
Normal file
306
app/styles/layouts/auth.css
Normal file
|
|
@ -0,0 +1,306 @@
|
|||
/* Authentication /ghost/[signin/signup/forgotten/reset]
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.ghost-login,
|
||||
.ghost-signup,
|
||||
.ghost-forgotten,
|
||||
.ghost-reset {
|
||||
color: var(--midgrey);
|
||||
background: var(--darkgrey);
|
||||
}
|
||||
|
||||
.ghost-login main,
|
||||
.ghost-signup main,
|
||||
.ghost-forgotten main,
|
||||
.ghost-reset main {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.ghost-login input,
|
||||
.ghost-signup input,
|
||||
.ghost-forgotten input,
|
||||
.ghost-reset input {
|
||||
line-height: 1.4em;
|
||||
font-size: 1.1em;
|
||||
font-weight: 200;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: color(var(--darkgrey) lightness(+10%));
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
transition: background ease 0.25s;
|
||||
}
|
||||
|
||||
.ghost-login input:focus,
|
||||
.ghost-signup input:focus,
|
||||
.ghost-forgotten input:focus,
|
||||
.ghost-reset input:focus {
|
||||
border: none;
|
||||
background: color(var(--darkgrey) lightness(+15%));
|
||||
}
|
||||
|
||||
.ghost-login input:-webkit-autofill,
|
||||
.ghost-signup input:-webkit-autofill,
|
||||
.ghost-forgotten input:-webkit-autofill,
|
||||
.ghost-reset input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px var(--lightgrey) inset !important;
|
||||
}
|
||||
|
||||
.login-box,
|
||||
.signup-box,
|
||||
.forgotten-box,
|
||||
.reset-box {
|
||||
display: table;
|
||||
max-width: 530px;
|
||||
height: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.login-box,
|
||||
.signup-box,
|
||||
.forgotten-box,
|
||||
.reset-box {
|
||||
max-width: 264px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Sign in
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.login-form {
|
||||
max-width: 530px;
|
||||
color: color(var(--midgrey) lightness(+15%));
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.login-form {
|
||||
max-width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form .email-wrap,
|
||||
.login-form .password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 5px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.login-form .email-wrap,
|
||||
.login-form .password-wrap {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form .email-wrap {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.login-form .email-wrap {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form .email,
|
||||
.login-form .password {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
padding: 8px 0 8px 8px;
|
||||
width: 216px;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.login-form .email,
|
||||
.login-form .password {
|
||||
width: 264px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 631px) {
|
||||
.login-form .email {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.login-form .password {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form button {
|
||||
width: 85px;
|
||||
height: 37px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.login-form button {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form .meta {
|
||||
clear: both;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.login-form .forgotten-link {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.25rem;
|
||||
color: color(var(--midgrey) lightness(-10%));
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.login-form a {
|
||||
color: color(var(--midgrey) lightness(-10%));
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.login-form a:hover {
|
||||
color: color(var(--midgrey) lightness(+5%));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* Signup / Reset Password
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.signup-form,
|
||||
.reset-form {
|
||||
max-width: 280px;
|
||||
color: color(var(--midgrey) lightness(+15%));
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.signup-form,
|
||||
.reset-form {
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-form .password-wrap,
|
||||
.reset-form .password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
background: color(var(--darkgrey) lightness(+10%));
|
||||
float: left;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.signup-form input,
|
||||
.reset-form input {
|
||||
width: 280px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.signup-form input,
|
||||
.reset-form input {
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-form .name-wrap,
|
||||
.reset-form .name-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-form .name,
|
||||
.reset-form .name {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-form .email-wrap,
|
||||
.reset-form .email-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-form .email,
|
||||
.reset-form .email {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-form .password-wrap,
|
||||
.reset-form .password-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-form .password,
|
||||
.reset-form .password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signup-form button,
|
||||
.reset-form button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em 1.37em;
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset;
|
||||
}
|
||||
|
||||
|
||||
/* Forgotten password
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.forgotten-form {
|
||||
max-width: 280px;
|
||||
color: color(var(--midgrey) lightness(+15%));
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.forgotten-form .email-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forgotten-form .email {
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.forgotten-form button {
|
||||
width: 100%;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.private-login h1 {
|
||||
margin-bottom: 2rem;
|
||||
text-indent: 0;
|
||||
}
|
||||
.private-login .form-group {
|
||||
margin: 0;
|
||||
}
|
||||
.private-login input[type="password"] {
|
||||
padding: 9px 7px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.private-login-button {
|
||||
padding: 9px 1.8em;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
|
@ -1,292 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Authentication
|
||||
// Slug: /ghost/[signin/signup/forgotten/reset]
|
||||
//
|
||||
// Styles for the authentication pages
|
||||
//
|
||||
// * Auth colours & wrappers
|
||||
// * Sign In
|
||||
// * Signup & Reset
|
||||
// * Forgot Password
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Auth colours & wrappers
|
||||
// --------------------------------------------------
|
||||
|
||||
.ghost-login,
|
||||
.ghost-signup,
|
||||
.ghost-forgotten,
|
||||
.ghost-reset {
|
||||
color: $midgrey;
|
||||
background: $darkgrey;
|
||||
|
||||
main {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: 1.4em;
|
||||
font-size: 1.1em;
|
||||
font-weight: 200;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: lighten($darkgrey, 10%);
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
transition: background ease 0.25s;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
background: lighten($darkgrey, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
// Changes the default Webkit yellow autofill colour to grey
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
|
||||
}
|
||||
}//.ghost-login, .ghost-signup, .ghost-forgotten, .ghost-reset
|
||||
|
||||
.login-box,
|
||||
.signup-box,
|
||||
.forgotten-box,
|
||||
.reset-box {
|
||||
display: table;
|
||||
max-width: 530px;
|
||||
height: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
max-width: 264px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sign In
|
||||
// Slug: /ghost/signin/
|
||||
// --------------------------------------------------
|
||||
|
||||
.login-form {
|
||||
max-width: 530px;
|
||||
color: lighten($midgrey, 15%);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
max-width: 264px;
|
||||
}
|
||||
|
||||
.email-wrap,
|
||||
.password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 5px 0;
|
||||
float: left;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
margin-right: 3px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.email,
|
||||
.password {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
padding: 8px 0 8px 8px;
|
||||
width: 216px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
width: 264px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 631px) {
|
||||
.email {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.password {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 85px;
|
||||
height: 37px;
|
||||
margin-left: 10px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
clear: both;
|
||||
color: $midgrey;
|
||||
}
|
||||
|
||||
.forgotten-link {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.25rem;
|
||||
color: darken($midgrey, 10%);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($midgrey, 10%);
|
||||
font-size: 0.9em;
|
||||
|
||||
&:hover {
|
||||
color: lighten($midgrey, 5%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}//.login-form
|
||||
|
||||
|
||||
//
|
||||
// Signup & Reset
|
||||
// Slug: /ghost/signup
|
||||
// Slug: /ghost/reset/t0k3n
|
||||
// --------------------------------------------------
|
||||
|
||||
.signup-form,
|
||||
.reset-form {
|
||||
max-width: 280px;
|
||||
color: lighten($midgrey, 15%);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
width: 264px;
|
||||
}
|
||||
|
||||
.password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
background: lighten($darkgrey, 10%);
|
||||
float: left;
|
||||
display: table;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 280px;
|
||||
padding: 8px 10px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.name {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.email {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.password-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em 1.37em;
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
}
|
||||
}//.signup-form, .reset-form
|
||||
|
||||
|
||||
//
|
||||
// Forgot Password
|
||||
// Slug: /ghost/forgotten
|
||||
// --------------------------------------------------
|
||||
|
||||
.forgotten-form {
|
||||
max-width: 280px;
|
||||
color: lighten($midgrey, 15%);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
.email-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.email {
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 37px;
|
||||
}
|
||||
}//.forgotten-form
|
||||
|
||||
|
||||
//
|
||||
// Private Blog Login
|
||||
// Slug: /private/
|
||||
// --------------------------------------------------
|
||||
|
||||
.private-login {
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
text-indent: 0;
|
||||
}
|
||||
.form-group {
|
||||
margin: 0;
|
||||
}
|
||||
input[type="password"] {
|
||||
padding: 9px 7px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.private-login-button {
|
||||
padding: 9px 1.8em;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
}
|
||||
371
app/styles/layouts/content.css
Normal file
371
app/styles/layouts/content.css
Normal file
|
|
@ -0,0 +1,371 @@
|
|||
/* Content /ghost/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Show/Hide on Mobile // TODO: What the fuck does that mean?
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.content-list.show-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-list.show-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-preview.show-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-preview.show-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Content List (Left pane)
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.content-list {
|
||||
width: 33%;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.content-list {
|
||||
width: auto;
|
||||
right: 0;
|
||||
z-index: 500;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-list .content-list-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.content-list .entry-title {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.content-list .entry-meta {
|
||||
margin-top: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.content-list .avatar {
|
||||
float: left;
|
||||
margin-right: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 18px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-list .avatar img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.content-list .status,
|
||||
.content-list .author {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 300;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
.content-list .avatar:hover + .author + .status {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.content-list .avatar:hover + .author {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-list .author {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
left: 56px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.content-list .status .draft {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.content-list .status .scheduled {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.content-list ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-top: #e1e1e1 1px solid;
|
||||
}
|
||||
|
||||
.content-list li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: #e1e1e1 1px solid;
|
||||
}
|
||||
|
||||
.content-list li a {
|
||||
display: block;
|
||||
padding: 19px 20px 22px 24px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.content-list li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.content-list li a {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.content-list li a {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.content-list li a:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.content-list .active {
|
||||
background: color(#e1e1e1 lightness(+9%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Preview (Right pane)
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.content-preview {
|
||||
width: 67%;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.content-preview {
|
||||
width: 100%;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.content-preview .unfeatured {
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.content-preview .featured {
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.content-preview .post-published-by .status a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content-preview .post-published-by .status a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.content-preview .normal {
|
||||
text-transform: none;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.content-preview .content-preview-content {
|
||||
padding: 5%;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.content-preview .content-preview-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
.content-preview .content-preview-content .wrapper {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-preview .post-controls {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.content-preview .post-settings-menu {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.content-preview img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.post-preview-header .page-title,
|
||||
.post-preview-header .btn-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.post-preview-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 3000;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #242628;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-preview-header .btn-back {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.post-preview-header .page-title {
|
||||
display: block;
|
||||
}
|
||||
.post-preview-header .post-controls {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
.post-preview-header .post-edit {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.post-preview-header .featured, .post-preview-header .unfeatured, .post-preview-header small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.post-preview-header .unfeatured, .post-preview-header .featured {
|
||||
float: left;
|
||||
}
|
||||
.post-preview-header .post-published-by {
|
||||
float: left;
|
||||
margin-top: 7px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Empty State
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.no-posts-box {
|
||||
position: relative;
|
||||
height: 90%;
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
display: table;
|
||||
z-index: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.no-posts-box {
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.no-posts-box .no-posts {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.no-posts-box .no-posts {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
.no-posts-box .no-posts h3 {
|
||||
color: var(--brown);
|
||||
font-weight: 200;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
||||
/* Keyboard Focus Effects
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* This has to be a pseudo element to sit over the top of everything else in the content list */
|
||||
.content-list.keyboard-focused:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
|
||||
.content-preview.keyboard-focused {
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
|
|
@ -1,387 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Content Management
|
||||
// Slug: /ghost/
|
||||
//
|
||||
// Styles for the content management page, which is where
|
||||
// the posts are listed.
|
||||
//
|
||||
// * Container
|
||||
// * Show/Hide on mobile
|
||||
// * Content List
|
||||
// * Preview
|
||||
// * No Posts
|
||||
// * Keyboard Focus Animations
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Show/Hide on mobile
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-list {
|
||||
&.show-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.show-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
&.show-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Content List
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-list {
|
||||
width: 33%;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: auto;
|
||||
right: 0;
|
||||
z-index: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content-list-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
margin-top: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left; // Used instead of `display: block;` to remove the stupid space under the image.
|
||||
margin-right: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 18px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.author {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 300;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
.avatar:hover + .author + .status {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.avatar:hover + .author {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.author {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
left: 56px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
.draft {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.scheduled {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-top: #e1e1e1 1px solid;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: #e1e1e1 1px solid;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 19px 20px 22px 24px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}//a
|
||||
}//li
|
||||
|
||||
.active {
|
||||
@media (min-width: 901px) {
|
||||
background: lighten(#e1e1e1, 9%);
|
||||
}
|
||||
}
|
||||
}//.content-list
|
||||
|
||||
|
||||
//
|
||||
// Preview
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-preview {
|
||||
width: 67%;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #fff;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 100%;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.unfeatured {
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.featured {
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.post-published-by .status a {
|
||||
color: inherit;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
text-transform: none;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.content-preview-content {
|
||||
padding: 5%;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 700px;
|
||||
margin:0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.post-controls {
|
||||
float:right;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.post-settings-menu {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
}//.content-preview
|
||||
|
||||
.post-preview-header {
|
||||
.page-title,
|
||||
.btn-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 3000;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #242628;
|
||||
overflow: hidden;
|
||||
|
||||
.btn-back {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-controls {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.post-edit {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.featured, .unfeatured, small {
|
||||
display: none;
|
||||
}//@media (max-width: 900px)
|
||||
}//@media (max-width: 900px)
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.unfeatured, .featured {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.post-published-by {
|
||||
float: left;
|
||||
margin-top: 7px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}//.post-preview-header
|
||||
|
||||
|
||||
//
|
||||
// No Posts
|
||||
// --------------------------------------------------
|
||||
|
||||
.no-posts-box {
|
||||
position: relative;
|
||||
height: 90%;
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
display: table;
|
||||
z-index: 600;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.no-posts {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: -50%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $brown;
|
||||
font-weight: 200;
|
||||
font-size: 2em;
|
||||
}
|
||||
}//.no-posts
|
||||
}//.no-posts-box
|
||||
|
||||
|
||||
//
|
||||
// Keyboard Focus Animations
|
||||
// --------------------------------------------------
|
||||
|
||||
// The inset shadow to show which area has keyboard focus
|
||||
.content-list.keyboard-focused {
|
||||
// This has to be a pseudo element to sit over the top of everything else in the content list
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.content-preview.keyboard-focused {
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
698
app/styles/layouts/editor.css
Normal file
698
app/styles/layouts/editor.css
Normal file
|
|
@ -0,0 +1,698 @@
|
|||
/* Editor /ghost/editor/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Title
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.entry-title {
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry-title input {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 3.2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: -1px;
|
||||
text-indent: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.entry-title input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Container & Headers
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.editor {
|
||||
/* The two content panel wrappers, positioned left/right */
|
||||
/* The visual styles for both panels */
|
||||
}
|
||||
|
||||
@media (min-width: 401px) {
|
||||
.editor .notifications.bottom {
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor .entry-markdown {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.editor .entry-preview {
|
||||
right: 0;
|
||||
border-left: #e1e1e1 1px solid;
|
||||
}
|
||||
|
||||
.editor .entry-markdown,
|
||||
.editor .entry-preview {
|
||||
width: 50%;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
top: 60px;
|
||||
border-top: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
/* Hide markdown icon + wordcount when we hit mobile */
|
||||
/* Give the tab with the .active class the highest z-index */
|
||||
/* Restore the normal height of the .active tab (inactive tab stays small, hidden behind) */
|
||||
/* Restore the white bg of the currently .active tab, remove hand cursor from currently active tab */
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.editor .entry-markdown .markdown-help,
|
||||
.editor .entry-markdown .entry-word-count,
|
||||
.editor .entry-preview .markdown-help,
|
||||
.editor .entry-preview .entry-word-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.editor .entry-markdown,
|
||||
.editor .entry-preview {
|
||||
/* Convert all content areas to small boxes */
|
||||
top: 100px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
z-index: 100;
|
||||
/* Correctly colour the markdown icon when inactive and hovered */
|
||||
}
|
||||
.editor .entry-markdown .markdown,
|
||||
.editor .entry-markdown .entry-preview-content,
|
||||
.editor .entry-preview .markdown,
|
||||
.editor .entry-preview .entry-preview-content {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor .entry-markdown:not(.active) .markdown-help:hover:before,
|
||||
.editor .entry-preview:not(.active) .markdown-help:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.editor .entry-markdown .floatingheader a,
|
||||
.editor .entry-preview .floatingheader a {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.editor .entry-markdown .floatingheader,
|
||||
.editor .entry-preview .floatingheader {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: var(--brown);
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 -2px 3px inset;
|
||||
}
|
||||
.editor .entry-markdown .floatingheader a,
|
||||
.editor .entry-preview .floatingheader a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.editor .entry-markdown .floatingheader .entry-word-count,
|
||||
.editor .entry-preview .floatingheader .entry-word-count {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.editor .entry-markdown.active,
|
||||
.editor .entry-preview.active {
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.editor .entry-markdown.active .markdown,
|
||||
.editor .entry-markdown.active .entry-preview-content,
|
||||
.editor .entry-preview.active .markdown,
|
||||
.editor .entry-preview.active .entry-preview-content {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.editor .entry-markdown.active header,
|
||||
.editor .entry-preview.active header {
|
||||
border-top: #e1e1e1 1px solid;
|
||||
cursor: auto;
|
||||
color: var(--brown);
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.editor .entry-markdown.active header a,
|
||||
.editor .entry-preview.active header a {
|
||||
color: var(--brown);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Editor (Left pane)
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.editor .entry-markdown-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.editor .markdown-editor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
resize: none;
|
||||
border: 0;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.5rem;
|
||||
font-family: var(--font-family-mono);
|
||||
color: color(var(--darkgrey) lightness(+10%));
|
||||
}
|
||||
|
||||
.editor .markdown-editor:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.editor .markdown-editor {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 451px) and (max-width: 1000px) {
|
||||
.editor .markdown-editor {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
.editor .markdown-editor {
|
||||
padding: 42px 20px 36px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.editor .entry-preview .floatingheader {
|
||||
/* Align the tab of entry-preview on the right */
|
||||
right: 0;
|
||||
left: auto;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editor .entry-preview-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 40px 20px 37px 20px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.editor .entry-preview-content {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.editor .scrolling .floatingheader {
|
||||
box-shadow: none;
|
||||
}
|
||||
.editor .scrolling .floatingheader:before,
|
||||
.editor .scrolling .floatingheader:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) and (max-width: 1000px) {
|
||||
.editor .entry-preview-content {
|
||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05) inset;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-help {
|
||||
float: right;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* FFF: Fucking Firefox Fixes
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.editor .markdown-editor {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Preview (Right pane)
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The styles for the actual content inside the preview */
|
||||
.entry-preview-content,
|
||||
.content-preview-content {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.entry-preview-content a,
|
||||
.content-preview-content a {
|
||||
color: var(--blue);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.entry-preview-content sup a,
|
||||
.content-preview-content sup a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-preview-content .btn,
|
||||
.content-preview-content .btn {
|
||||
text-decoration: none;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.entry-preview-content .img-placeholder,
|
||||
.content-preview-content .img-placeholder {
|
||||
border: 5px dashed var(--grey);
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry-preview-content .img-placeholder span,
|
||||
.content-preview-content .img-placeholder span {
|
||||
display: block;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin-top: -15px;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.entry-preview-content a.image-edit,
|
||||
.content-preview-content a.image-edit {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.entry-preview-content img,
|
||||
.content-preview-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Placeholder objects for <script> & <iframe> */
|
||||
.js-embed-placeholder,
|
||||
.iframe-embed-placeholder {
|
||||
background: #f9f9f9;
|
||||
border: none;
|
||||
padding: 100px 20px;
|
||||
font-family: var(--font-family);
|
||||
font-weight: bold;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Zen Mode
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
body.zen {
|
||||
background: color(#e1e1e1 lightness(+3%));
|
||||
}
|
||||
|
||||
body.zen .usermenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.zen .global-nav,
|
||||
body.zen .page-header,
|
||||
body.zen #publish-bar {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
body.zen .page-content {
|
||||
top: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
body.zen .entry-markdown,
|
||||
body.zen .entry-preview {
|
||||
bottom: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
|
||||
/* Publish Bar
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
#publish-bar {
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border-top: #e1e1e1 1px solid;
|
||||
color: var(--midgrey);
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
#publish-bar {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
#publish-bar .post-settings:hover,
|
||||
#publish-bar .post-settings.active {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
#publish-bar .post-settings-menu {
|
||||
position: absolute;
|
||||
bottom: 41px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.extended-tags {
|
||||
/* When the tag bar is expanded */
|
||||
position: static;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.extended-tags #entry-tags:after {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.extended-tags .tags {
|
||||
width: 281px;
|
||||
}
|
||||
|
||||
.extended-tags .tag-input {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
border-top: 1px solid var(--darkgrey);
|
||||
}
|
||||
|
||||
.extended-tags .right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#entry-tags input[type="text"].tag-input {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: var(--midgrey);
|
||||
font-weight: 300;
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
padding: 9px 9px 9px 0;
|
||||
}
|
||||
|
||||
#entry-tags input[type="text"].tag-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#entry-tags .tag {
|
||||
display: inline;
|
||||
margin-right: 3px;
|
||||
padding: 2px 5px;
|
||||
color: var(--lightgrey);
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2em;
|
||||
white-space: nowrap;
|
||||
background: var(--darkgrey);
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#entry-tags .tag:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#entry-tags .tag i {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
top: auto;
|
||||
bottom: calc(100% + 15px);
|
||||
}
|
||||
|
||||
.suggestions li.selected,
|
||||
.suggestions li.selected a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.suggestions li.selected mark {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.suggestions mark {
|
||||
background: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#entry-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#entry-actions .dropdown {
|
||||
position: absolute;
|
||||
bottom: 49px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#entry-actions .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
#entry-actions.unsaved {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#entry-actions.unsaved .delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#entry-actions-menu {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tags-wrapper span {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-label:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-size: 1.3rem;
|
||||
color: var(--midgrey);
|
||||
transition: color 0.15s linear;
|
||||
}
|
||||
|
||||
.tag-label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.publish-bar-inner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.publish-bar-tags-icon {
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.publish-bar-tags {
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
margin-right: 10px;
|
||||
height: 40px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.publish-bar-tags .tags-wrapper {
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 9px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.publish-bar-tags-input {
|
||||
flex: 1 1 auto;
|
||||
align-self: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.publish-bar-actions {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
align-self: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.post-settings {
|
||||
display: inline-block;
|
||||
padding: 8px 10px;
|
||||
color: var(--midgrey);
|
||||
transition: all 0.15s ease-out 0s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-settings:hover,
|
||||
.post-settings.active {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.post-settings-menu .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.post-view-link {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.post-view-link i {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Post settings meta
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Google Imitation */
|
||||
.seo-preview {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.seo-preview-title {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.16rem;
|
||||
color: #1E0FBE;
|
||||
text-overflow: ellipses;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.seo-preview-link {
|
||||
margin: 1px 0 2px 0;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.6rem;
|
||||
color: #006621;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.seo-preview-description {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4;
|
||||
color: #545454;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
/* Markdown Help Modal
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.modal-markdown-help-table {
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-markdown-help-table td,
|
||||
.modal-markdown-help-table th {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.modal-markdown-help-table th {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,724 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Editor
|
||||
// Slug: /ghost/editor/
|
||||
//
|
||||
// Styles for the Editor
|
||||
//
|
||||
// * Post Title
|
||||
// * Container & Floating Headers
|
||||
// * Editor
|
||||
// * Markdown Help Icon
|
||||
// * Post Preview
|
||||
// * Zen Mode
|
||||
// * Publish Bar
|
||||
// * Post Settings Menu meta Data
|
||||
// * Markdown Help Modal
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Post Title
|
||||
// --------------------------------------------------
|
||||
|
||||
.entry-title {
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 3.2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: -1px;
|
||||
text-indent: 20px;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}//.entry-title
|
||||
|
||||
|
||||
//
|
||||
// Container & Floating Headers
|
||||
// --------------------------------------------------
|
||||
|
||||
.editor {
|
||||
|
||||
.notifications.bottom {
|
||||
@media (min-width: 401px) {
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// The two content panel wrappers, positioned left/right
|
||||
.entry-markdown {
|
||||
left: 0;
|
||||
}
|
||||
.entry-preview {
|
||||
right: 0;
|
||||
border-left: #e1e1e1 1px solid;
|
||||
}
|
||||
|
||||
// The visual styles for both panels
|
||||
.entry-markdown,
|
||||
.entry-preview {
|
||||
width: 50%;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
bottom: 40px; // height of the publish bar
|
||||
top: 60px; // height of the post title + margin
|
||||
border-top: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
|
||||
// Hide markdown icon + wordcount when we hit mobile
|
||||
@media (max-width: 400px) {
|
||||
.markdown-help,
|
||||
.entry-word-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
// Convert all content areas to small boxes
|
||||
top: 100px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
z-index: 100;
|
||||
|
||||
.markdown,
|
||||
.entry-preview-content {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Correctly colour the markdown icon when inactive and hovered
|
||||
&:not(.active) .markdown-help:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
}//@media (max-width: 1000px)
|
||||
|
||||
.floatingheader {
|
||||
a {
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
// Turn headers into tabs which act as links
|
||||
// both headers set to grey/inactive colour
|
||||
@media (max-width: 1000px) {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: $brown;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-word-count {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}//.floatingheader
|
||||
|
||||
// Give the tab with the .active class the highest z-index
|
||||
&.active {
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
// Restore the normal height of the .active tab (inactive tab stays small, hidden behind)
|
||||
&.active .markdown,
|
||||
&.active .entry-preview-content {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
// Restore the white bg of the currently .active tab, remove hand cursor from currently active tab
|
||||
&.active header {
|
||||
@media (max-width: 1000px) {
|
||||
border-top: #e1e1e1 1px solid;
|
||||
cursor: auto;
|
||||
color: $brown;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
|
||||
a {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.entry-markdown, .entry-preview
|
||||
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Editor
|
||||
// --------------------------------------------------
|
||||
|
||||
.editor {
|
||||
.entry-markdown-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.markdown-editor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
resize: none;
|
||||
border: 0;
|
||||
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.5rem;
|
||||
font-family: $font-family-mono;
|
||||
color: lighten($darkgrey, 10%);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 451px) and (max-width: 1000px) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
padding: 42px 20px 36px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-preview {
|
||||
// Align the tab of entry-preview on the right
|
||||
.floatingheader {
|
||||
@media (max-width: 1000px) {
|
||||
right: 0;
|
||||
left: auto;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-preview-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 40px 20px 37px 20px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Special case, when scrolling, add shadows to content headers.
|
||||
@media (max-width: 1000px) {
|
||||
.scrolling {
|
||||
.floatingheader {
|
||||
box-shadow: none;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-preview-content {
|
||||
@media (max-width: 1000px) {
|
||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05) inset;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.editor
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Firefox Editor Hacks
|
||||
// --------------------------------------------------
|
||||
@-moz-document url-prefix() {
|
||||
.editor .markdown-editor {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Markdown Help Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.markdown-help {
|
||||
float: right;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Post Preview
|
||||
// --------------------------------------------------
|
||||
|
||||
// The styles for the actual content inside the preview
|
||||
// TODO: These should just be defaults, overridden by editor.hbs in theme dir
|
||||
.entry-preview-content,
|
||||
.content-preview-content {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 200;
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
sup a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-decoration: none;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.img-placeholder {
|
||||
border: 5px dashed $grey;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
margin-top: -15px;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&.image-edit {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder objects for <script> & <iframe>
|
||||
.js-embed-placeholder,
|
||||
.iframe-embed-placeholder {
|
||||
background: #f9f9f9;
|
||||
border: none;
|
||||
padding: 100px 20px;
|
||||
font-family: $font-family;
|
||||
font-weight: bold;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}//.entry-preview-content, .content-preview-content
|
||||
|
||||
|
||||
//
|
||||
// Zen Mode
|
||||
// --------------------------------------------------
|
||||
|
||||
body.zen {
|
||||
background: lighten(#e1e1e1, 3%);
|
||||
|
||||
.usermenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.global-nav,
|
||||
.page-header,
|
||||
#publish-bar {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
top: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.entry-markdown,
|
||||
.entry-preview {
|
||||
bottom: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
}//body.zen
|
||||
|
||||
|
||||
//
|
||||
// Publish Bar
|
||||
// --------------------------------------------------
|
||||
|
||||
#publish-bar {
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border-top: #e1e1e1 1px solid;
|
||||
color: $midgrey;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
transform: translateZ(0);
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.post-settings {
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.post-settings-menu {
|
||||
position: absolute;
|
||||
bottom: 41px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
}//#publish-bar
|
||||
|
||||
.extended-tags { // When the tag bar is expanded
|
||||
position: static;
|
||||
min-height: 100%;
|
||||
|
||||
#entry-tags {
|
||||
&:after {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
width: 281px;
|
||||
}
|
||||
|
||||
.tag-input {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
border-top: 1px solid $darkgrey;
|
||||
|
||||
}
|
||||
.right {
|
||||
display: none;
|
||||
}
|
||||
}//.extended-tags
|
||||
|
||||
#entry-tags {
|
||||
input[type="text"].tag-input {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: $midgrey;
|
||||
font-weight: 300;
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
padding: 9px 9px 9px 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline;
|
||||
margin-right: 3px;
|
||||
padding: 2px 5px;
|
||||
color: $lightgrey;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2em;
|
||||
white-space: nowrap;
|
||||
background: $darkgrey;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}//#entry-tags
|
||||
|
||||
.suggestions {
|
||||
top: auto;
|
||||
bottom: calc(100% + 15px);
|
||||
|
||||
li.selected {
|
||||
&,
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
mark {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#entry-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
bottom: 49px;
|
||||
right: 0;
|
||||
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.unsaved {
|
||||
padding-bottom: 0;
|
||||
|
||||
.delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}//#entry-actions
|
||||
|
||||
#entry-actions-menu {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-size: 1.3rem;
|
||||
color: $midgrey;
|
||||
transition: color 0.15s linear;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.publish-bar-inner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.publish-bar-tags-icon {
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.publish-bar-tags {
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
margin-right: 10px;
|
||||
height: 40px;
|
||||
overflow-y: hidden;
|
||||
|
||||
.tags-wrapper {
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 9px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.publish-bar-tags-input {
|
||||
flex: 1 1 auto;
|
||||
align-self: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.publish-bar-actions {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
align-self: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.post-settings {
|
||||
display: inline-block;
|
||||
padding: 8px 10px;
|
||||
color: $midgrey;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}//.post-settings
|
||||
|
||||
.post-settings-menu {
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
}//.post-settings-menu
|
||||
|
||||
.post-view-link {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 0;
|
||||
font-size: 1.3rem;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Post Settings Menu meta Data
|
||||
// --------------------------------------------------
|
||||
|
||||
// These styles are copied from Google.com
|
||||
.seo-preview {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.seo-preview-title {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.16rem;
|
||||
color: #1E0FBE;
|
||||
text-overflow: ellipses;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.seo-preview-link {
|
||||
margin: 1px 0 2px 0;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.6rem;
|
||||
color: #006621;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.seo-preview-description {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.4;
|
||||
color: #545454;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Markdown Help Modal
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-markdown-help-table {
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
|
||||
td, th {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
110
app/styles/layouts/error.css
Normal file
110
app/styles/layouts/error.css
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/* Error /ghost/404/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.error-content {
|
||||
max-width: 530px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: table;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.error-content {
|
||||
max-width: 264px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.error-details {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.error-image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 96px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.error-image {
|
||||
width: 72px;
|
||||
height: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
margin: 0;
|
||||
font-size: 7.8em;
|
||||
line-height: 0.9em;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.error-code {
|
||||
font-size: 5.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.error-description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.9em;
|
||||
color: #979797;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.error-description {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Stack trace
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.error-stack {
|
||||
margin: 1em auto;
|
||||
padding: 2em;
|
||||
max-width: 800px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.error-stack-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-stack-list li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-stack-list li:before {
|
||||
color: #BBB;
|
||||
content: "\21AA";
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.error-stack-function {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Error Pages
|
||||
// Slug: /ghost/404
|
||||
//
|
||||
// Covers styles for all error screens, eg. 404, 500
|
||||
//
|
||||
// * Wrappers
|
||||
// * Image & error info
|
||||
// * Stack Trace
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrappers
|
||||
// --------------------------------------------------
|
||||
|
||||
.error-content {
|
||||
max-width: 530px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: table;
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
max-width: 264px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.error-details {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Image & error info
|
||||
// --------------------------------------------------
|
||||
|
||||
.error-image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 96px;
|
||||
height: 150px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
width: 72px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
margin: 0;
|
||||
font-size: 7.8em;
|
||||
line-height: 0.9em;
|
||||
color: #979797;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
font-size: 5.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.error-description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.9em;
|
||||
color: #979797;
|
||||
border: none;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Stack Trace
|
||||
// --------------------------------------------------
|
||||
|
||||
.error-stack {
|
||||
margin: 1em auto;
|
||||
padding: 2em;
|
||||
max-width: 800px;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.error-stack-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-stack-list li {
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
color: #BBB;
|
||||
content: "\21AA";
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.error-stack-function {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* Global Layout
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
// Layout
|
||||
.gh-viewport {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
|
@ -21,23 +21,28 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
//GH-NAV
|
||||
|
||||
/* Global Nav
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-nav-menu {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
|
||||
i {
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
margin-right: 8px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
}
|
||||
}
|
||||
.gh-nav-menu:hover { cursor: pointer; }
|
||||
|
||||
.gh-nav-menu i {
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
margin-right: 8px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.gh-nav-menu:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-nav-menu-icon {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -67,7 +72,7 @@
|
|||
.gh-nav-menu-details-user {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2em;
|
||||
color: $midgrey;
|
||||
color: var(--midgrey);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -97,19 +102,19 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 6px 0 5px;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 13px;
|
||||
color: $midgrey;
|
||||
transform: rotate(90deg);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.gh-nav-search-button i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--midgrey);
|
||||
transform: rotate(90deg);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
color: $darkgrey;
|
||||
}
|
||||
.gh-nav-search-button:hover i {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-nav-list {
|
||||
|
|
@ -137,19 +142,19 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 10px 5px 15px;
|
||||
color: $darkgrey;
|
||||
color: var(--darkgrey);
|
||||
border-radius: 0 4px 4px 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.gh-nav-list .active {
|
||||
color: #fff;
|
||||
background: lighten($blue, 10%);
|
||||
background: color(var(--blue) lightness(+10%));
|
||||
}
|
||||
|
||||
.gh-nav-list a:not(.active):hover {
|
||||
color: $darkgrey;
|
||||
background: lighten($blue, 30%);
|
||||
color: var(--darkgrey);
|
||||
background: color(var(--blue) lightness(+30%));
|
||||
}
|
||||
|
||||
.gh-nav-list i {
|
||||
|
|
@ -174,21 +179,21 @@
|
|||
padding: 12px;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.2em;
|
||||
color: $midgrey;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
}
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
//
|
||||
// Help Menu
|
||||
// --------------------------------------------------
|
||||
.gh-nav-footer-sitelink i {
|
||||
margin-left: 5px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.gh-nav-footer-sitelink:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
|
||||
/* Help (?) Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-help-menu {
|
||||
display: flex;
|
||||
|
|
@ -203,36 +208,35 @@
|
|||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.2em;
|
||||
color: $midgrey;
|
||||
color: var(--midgrey);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.gh-help-menu:hover {
|
||||
.gh-help-button {
|
||||
color: $blue;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.gh-help-menu:hover .gh-help-button {
|
||||
color: var(--blue);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.gh-help-menu .dropdown {
|
||||
right: 112px;
|
||||
bottom: 215px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 200px;
|
||||
}
|
||||
.gh-help-menu .dropdown .dropdown-menu {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
&.fade-in-scale {
|
||||
animation-duration: 0.1s;
|
||||
}
|
||||
.gh-help-menu .dropdown.fade-in-scale {
|
||||
animation-duration: 0.1s;
|
||||
}
|
||||
|
||||
&.fade-out {
|
||||
animation-duration: 0.01s;
|
||||
}
|
||||
.gh-help-menu .dropdown.fade-out {
|
||||
animation-duration: 0.01s;
|
||||
}
|
||||
|
||||
|
||||
//--------------------------------------------------------------
|
||||
/* Container for App View
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-view {
|
||||
flex-grow: 1;
|
||||
|
|
@ -261,17 +265,20 @@
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
&:hover { color: $blue; }
|
||||
}
|
||||
.view-title a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 10px;
|
||||
color: #818181;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.view-title a:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.view-title i {
|
||||
margin: 0 10px;
|
||||
color: #818181;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.view-actions {
|
||||
|
|
@ -283,6 +290,7 @@
|
|||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.view-content {
|
||||
176
app/styles/layouts/settings.css
Normal file
176
app/styles/layouts/settings.css
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
/* Settings
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.navigation-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.navigation-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item:last-child {
|
||||
padding-left: 17px;
|
||||
/* simulate .navigation-item-drag-handle width + horizontal padding */
|
||||
}
|
||||
|
||||
.navigation-item:last-child .navigation-item-drag-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-item-drag-handle {
|
||||
padding: 6px 17px 0 0;
|
||||
width: 17px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item-drag-handle:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -9px;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-inputs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigation-item-url .fake-placeholder {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.navigation-item-label,
|
||||
.navigation-item-url {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.navigation-inputs {
|
||||
display: flex;
|
||||
}
|
||||
.navigation-item-label {
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.navigation-item-url {
|
||||
flex-grow: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item-action {
|
||||
padding-left: 10px;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.navigation-item-action button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-trash:before {
|
||||
color: var(--midbrown);
|
||||
font-size: 16px;
|
||||
transition: color 0.1s linear;
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-trash:hover:before {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-add:before {
|
||||
background: var(--green);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
transition: background 0.1s linear;
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-add:hover:before {
|
||||
background: color(var(--green) lightness(-10%));
|
||||
}
|
||||
|
||||
|
||||
/* Code Injection
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-code .form-group {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.settings-code .form-group p {
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.settings-code code {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.settings-code-editor {
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
max-width: 680px;
|
||||
height: auto;
|
||||
border: 1px solid #E0DFD7;
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-appearance: none;
|
||||
min-height: 300px;
|
||||
transition: border-color 0.15s linear;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.settings-code-editor.focused {
|
||||
border-color: var(--brown);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.settings-code-editor .CodeMirror {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.settings-code-editor .cm-s-xq-light span.cm-meta {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Labs
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
#startupload {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#startupload {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Settings
|
||||
// Slug: /ghost/settings/[many]
|
||||
//
|
||||
// Styles for the content management page, which is where
|
||||
// the posts are listed.
|
||||
//
|
||||
// * Settings Navigation
|
||||
// * Content
|
||||
// * Headers
|
||||
// * Custom Permalinks
|
||||
// * Navigation
|
||||
// * Code Injection
|
||||
// * Labs
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-navigation {}
|
||||
|
||||
.navigation-item {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media (min-width: 601px) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// &.last-navigation-item {
|
||||
&:last-child {
|
||||
padding-left: 17px; // simulate .navigation-item-drag-handle width + horizontal padding
|
||||
|
||||
.navigation-item-drag-handle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item-drag-handle {
|
||||
padding: 6px 17px 0 0;
|
||||
width: 17px;
|
||||
cursor: move;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -9px;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-inputs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigation-item-url {
|
||||
.fake-placeholder {
|
||||
color: lightgrey
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.navigation-item-label,
|
||||
.navigation-item-url {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.navigation-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navigation-item-label {
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.navigation-item-url {
|
||||
flex-grow: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item-action {
|
||||
padding-left: 10px;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.icon-trash {
|
||||
&:before {
|
||||
color: $midbrown;
|
||||
font-size: 16px;
|
||||
transition: color 0.1s linear;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
&:before {
|
||||
background: $green;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
transition: background 0.1s linear;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
background: darken($green, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Code Injection
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-code {
|
||||
.form-group {
|
||||
max-width: 700px;
|
||||
|
||||
p {
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
}
|
||||
code {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-code-editor {
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
max-width: 680px;
|
||||
height: auto;
|
||||
border: 1px solid #E0DFD7;
|
||||
border-radius: $border-radius;
|
||||
-webkit-appearance: none;
|
||||
min-height: 300px;
|
||||
transition: border-color 0.15s linear;
|
||||
line-height: 22px;
|
||||
|
||||
&.focused {
|
||||
border-color: $brown;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border-radius: inherit; // Inherits from .settings-code-editor
|
||||
}
|
||||
|
||||
// Overwrite bright yellow text
|
||||
.cm-s-xq-light span.cm-meta {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Labs
|
||||
// --------------------------------------------------
|
||||
|
||||
#startupload {
|
||||
line-height: inherit;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
143
app/styles/layouts/setup.css
Normal file
143
app/styles/layouts/setup.css
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
/* Setup New Blog /ghost/setup/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.ghost-setup {
|
||||
color: var(--midgrey);
|
||||
background: var(--darkgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.ghost-setup {
|
||||
background: color(var(--darkgrey) lightness(-5%));
|
||||
}
|
||||
}
|
||||
|
||||
.ghost-setup main {
|
||||
padding-top: 15px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.ghost-setup main {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.setup-box {
|
||||
display: table;
|
||||
max-width: 500px;
|
||||
height: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.setup-form {
|
||||
max-width: 530px;
|
||||
padding: 40px;
|
||||
color: color(var(--midgrey) lightness(+15%));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.setup-form {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 551px) {
|
||||
.setup-form {
|
||||
background: color(var(--darkgrey) lightness(-5%));
|
||||
}
|
||||
}
|
||||
|
||||
.setup-form header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.setup-form label {
|
||||
color: var(--lightgrey);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.setup-form label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.setup-form .form-group input {
|
||||
padding: 7px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: color(var(--darkgrey) lightness(+10%));
|
||||
transition: background 0.25s ease;
|
||||
}
|
||||
|
||||
.setup-form .form-group input:focus {
|
||||
border: none;
|
||||
background: color(var(--darkgrey) lightness(+15%));
|
||||
}
|
||||
|
||||
.setup-form input:-webkit-autofill {
|
||||
/* Chrome auto-fill style */
|
||||
-webkit-box-shadow: 0 0 0px 1000px var(--lightgrey) inset !important;
|
||||
}
|
||||
|
||||
.setup-form h1 {
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
font-size: 26px;
|
||||
letter-spacing: 0;
|
||||
color: var(--lightgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.setup-form h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.setup-form h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.setup-form h2 {
|
||||
margin: 6px 0 0 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.setup-form h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.setup-form h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.setup-form p {
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.setup-form footer {
|
||||
margin: 30px 0 5px 0;
|
||||
}
|
||||
|
||||
.setup-form .btn-green {
|
||||
width: 100%;
|
||||
padding: 0.9em 1.8em;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -1,390 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Setup
|
||||
//
|
||||
// Slug: /ghost/setup/
|
||||
//
|
||||
// * Page
|
||||
// * Wrapper
|
||||
// * Form
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Layout
|
||||
// ------------------------------------------------------------
|
||||
|
||||
.gh-setup {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-setup-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 4vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.gh-setup-content-wrap {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 8vh;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
//
|
||||
// Header
|
||||
// ------------------------------------------------------------
|
||||
.gh-setup-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: transparent 1px solid;
|
||||
padding: 2px 9px 2px 5px;
|
||||
margin: 0 0 0 3%;
|
||||
font-weight: 100;
|
||||
color: #7d878a;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border: #DAE1E3 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-setup-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
ol {
|
||||
width: 160px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Set the default divider to green, and then override it to
|
||||
// grey using the next~sibling selector. Means that all
|
||||
// dividers before .current will be automatically green.
|
||||
.divider {
|
||||
align-self: center;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(to right, $green 33%, rgba(255,255,255,0) 0%);
|
||||
background-position: bottom;
|
||||
background-size: 6px 2px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.current ~ .divider {
|
||||
background-image: linear-gradient(to right, #E3E3E3 33%, rgba(255,255,255,0) 0%);
|
||||
}
|
||||
|
||||
.step {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: transparent 2px solid;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: $green;
|
||||
border-radius: 100%;
|
||||
|
||||
.num {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.current ~ li:not(divider) .step {
|
||||
border: #E3E3E3 2px solid;
|
||||
color: #CDCDCD;
|
||||
background: transparent;
|
||||
|
||||
.num {
|
||||
display: block;
|
||||
}
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.current .step {
|
||||
border: $green 2px solid;
|
||||
color: $green;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
|
||||
.num {
|
||||
display: block;
|
||||
}
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.done {
|
||||
background: $green;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gh-setup-content {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 100;
|
||||
color: $midgrey;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
header {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.2rem;
|
||||
font-weight: 100;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 7vw;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $blue;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-setup-screenshot {
|
||||
position: relative;
|
||||
left: -38px;
|
||||
|
||||
@media (max-width: 860px) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Create your account
|
||||
// ------------------------------------------------------------
|
||||
|
||||
.gh-setup-create {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
padding: 50px 40px 25px;
|
||||
margin: 70px auto 30px;
|
||||
border: #DAE1E3 1px solid;
|
||||
text-align: left;
|
||||
background: #F8FBFD;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.account-image {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
margin-left: -50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 4px;
|
||||
border: #D1D9DB 1px solid;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
.edit-account-image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-account-image {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
border-radius: 100%;
|
||||
width: calc(100% - 8px);
|
||||
background: rgba(87,163,232,0.7);
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
font-size: 3rem;
|
||||
line-height: 90px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-color: #F8FBFD;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
border-radius: 100%;
|
||||
animation: fade-in 1s;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
border: #DAE1E3 1px solid;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.pw-strength {
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1px;
|
||||
margin-top: -11px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.pw-strength-dot {
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
margin-top: 2px;
|
||||
background-color: #D9E0E3;
|
||||
border-radius: 100%;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pw-strength-activedot {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
// @TODO hack - replace with proper icon input
|
||||
.input-icon[class*='icon-']:before {
|
||||
transform: translateY(-49%);
|
||||
}
|
||||
|
||||
.gh-setup-invite {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 460px) {
|
||||
label i {display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
.gh-setup-faces {
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 100;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Validation
|
||||
// ------------------------------------------------------------
|
||||
|
||||
.response {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-size: 1.2rem;
|
||||
color: #A6B0B3;
|
||||
}
|
||||
|
||||
.success {
|
||||
.input-icon:before {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
.input-icon:before {
|
||||
color: $red;
|
||||
}
|
||||
.response {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
// Appears under submit button
|
||||
.main-error {
|
||||
color: $red;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
122
app/styles/layouts/tags.css
Normal file
122
app/styles/layouts/tags.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/* Tag Management /ghost/settings/tags/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Search
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.tags-search {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.tags-search .btn {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
transition: padding 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tags-search .btn.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tags-search .btn .icon-search:before {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tags-search .tags-search-input {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
border: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.tags-search.opened .btn {
|
||||
padding-left: 120px;
|
||||
}
|
||||
.tags-search.opened .tags-search-input {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 401px) {
|
||||
.tags-search.opened .btn {
|
||||
padding-left: 140px;
|
||||
}
|
||||
.tags-search.opened .tags-search-input {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-search.opened .tags-search-input {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
/* Tag
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-tag {
|
||||
position: relative;
|
||||
padding: 0 45px 0 0;
|
||||
display: block;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.settings-tag .tag-edit-button {
|
||||
width: calc(100% + 45px);
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-tag .tag-edit-button:hover,
|
||||
.settings-tag .tag-edit-button:focus,
|
||||
.settings-tag .tag-edit-button:active {
|
||||
background: color(#e1e1e1 lightness(+10%));
|
||||
}
|
||||
|
||||
.settings-tag:last-of-type:hover .tag-edit-button {
|
||||
box-shadow: inset 0px -1px 0px #e1e1e1;
|
||||
}
|
||||
|
||||
.settings-tag .label {
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.settings-tag .label-alt {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.settings-tag .tag-title {
|
||||
font-size: 16px;
|
||||
color: var(--darkgrey);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.settings-tag .tag-description {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--midbrown);
|
||||
}
|
||||
|
||||
.settings-tag .tags-count {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 12px;
|
||||
font-size: 16px;
|
||||
color: var(--midbrown);
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Tag Management
|
||||
//
|
||||
// Styles for the Tag Management screen
|
||||
// Slug: /ghost/settings/tags/
|
||||
//
|
||||
// * Tags search
|
||||
// * Tag Item
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Tags search
|
||||
// --------------------------------------------------
|
||||
|
||||
.tags-search {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
transition: padding 0.3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
border: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
@media (max-width: 400px) {
|
||||
.btn {
|
||||
padding-left: 120px;
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 401px) {
|
||||
.btn {
|
||||
padding-left: 140px;
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}//&.opened
|
||||
}//.tags-search
|
||||
|
||||
|
||||
//
|
||||
// Tag Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-tag {
|
||||
position: relative;
|
||||
padding: 0 45px 0 0;
|
||||
display: block;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
|
||||
.tag-edit-button {
|
||||
width: calc(100% + 45px);
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten(#e1e1e1, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type:hover .tag-edit-button {
|
||||
box-shadow: inset 0px -1px 0px #e1e1e1;
|
||||
}
|
||||
|
||||
// Permalink/labels
|
||||
.label {
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.label-alt {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 16px;
|
||||
color: $darkgrey;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tag-description {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: $midbrown;
|
||||
}
|
||||
|
||||
.tags-count {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 12px;
|
||||
font-size: 16px;
|
||||
color: $midbrown;
|
||||
}
|
||||
}//.settings-tag
|
||||
239
app/styles/layouts/user.css
Normal file
239
app/styles/layouts/user.css
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
/* User profile /ghost/settings/users/<user>/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* User actions menu
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.user-actions-cog {
|
||||
padding: 9px 11px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.user-actions-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: calc(100% + 17px);
|
||||
}
|
||||
|
||||
.user-actions-menu.fade-out {
|
||||
animation-duration: 0.01s;
|
||||
}
|
||||
|
||||
|
||||
/* Layout
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.content.settings-user {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.content.settings-user {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-cover {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 300px;
|
||||
margin: 0;
|
||||
background: #fafafa no-repeat center center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.user-cover {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-cover:after {
|
||||
/* Gradient overlay */
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 110px;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
|
||||
}
|
||||
|
||||
.user-cover-edit {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
bottom: 29px;
|
||||
min-height: 37px;
|
||||
height: 37px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 2;
|
||||
border-width: 0;
|
||||
border-radius: var(--border-radius);
|
||||
transition: color 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.user-cover-edit {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-cover-edit:hover {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* Edit user
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.first-form-group {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
.first-form-group {
|
||||
min-width: 285px;
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 651px) and (max-width: 1000px) {
|
||||
.first-form-group {
|
||||
width: calc(100% - 201px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
.first-form-group {
|
||||
width: calc(100% - 181px);
|
||||
}
|
||||
}
|
||||
|
||||
.user-details-top {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.user-details-top {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
.user-details-top {
|
||||
margin-top: -91px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.user-details-top p {
|
||||
color: #fff;
|
||||
}
|
||||
.user-details-top label[for="user-name"] {
|
||||
color: transparent;
|
||||
}
|
||||
.user-details-top .user-name {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.user-details-top .user-name {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
.user-profile {
|
||||
padding-left: 143px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.user-profile fieldset {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.user-profile fieldset {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile textarea {
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
|
||||
/* Profile picture
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.user-image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
margin-left: -6px;
|
||||
margin-right: 20px;
|
||||
padding: 3px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
.user-image {
|
||||
top: -19px;
|
||||
left: -98px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.user-image {
|
||||
top: -159px;
|
||||
left: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-image .img {
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.user-image:hover .edit-user-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.edit-user-image {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
border-radius: 100%;
|
||||
width: calc(100% - 6px);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// User
|
||||
//
|
||||
// Styles for the Edit User page
|
||||
// Slug: /ghost/settings/users/:username/
|
||||
//
|
||||
// * User Actions
|
||||
// * Content Wrapper
|
||||
// * Cover Image
|
||||
// * Edit User Details
|
||||
// * User Image (Avatar)
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// User Actions
|
||||
// --------------------------------------------------
|
||||
|
||||
.user-actions-cog {
|
||||
padding: 9px 11px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.user-actions-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: calc(100% + 17px);
|
||||
|
||||
&.fade-out {
|
||||
animation-duration: 0.01s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Content Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.content.settings-user {
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Cover Image
|
||||
// --------------------------------------------------
|
||||
|
||||
.user-cover {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 300px;
|
||||
margin: 0;
|
||||
background: #fafafa no-repeat center center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Gradient overlay
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 110px;
|
||||
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.18));
|
||||
}
|
||||
}
|
||||
|
||||
.user-cover-edit {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
bottom: 29px;
|
||||
min-height: 37px;
|
||||
height: 37px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
color: rgba(255,255,255,0.8);
|
||||
z-index: 2;
|
||||
border-width: 0;
|
||||
border-radius: $border-radius;
|
||||
transition: color 0.3s ease, background 0.3s ease;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Edit User Details
|
||||
// --------------------------------------------------
|
||||
|
||||
.first-form-group {
|
||||
max-width: 500px;
|
||||
|
||||
@media (min-width: 651px) {
|
||||
min-width: 285px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) and (max-width: 1000px) {
|
||||
width: calc(100% - 201px);
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
width: calc(100% - 181px);
|
||||
}
|
||||
}
|
||||
|
||||
.user-details-top {
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 650px) {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
margin-top: -91px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
label[for="user-name"] {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.user-name {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
}//.user-details-top
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: 651px) {
|
||||
padding-left: 143px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@media (max-width: 650px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// User Image (Avatar)
|
||||
// --------------------------------------------------
|
||||
|
||||
.user-image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
margin-left: -6px;
|
||||
margin-right: 20px;
|
||||
padding: 3px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
|
||||
@media (min-width: 651px) {
|
||||
top: -19px;
|
||||
left: -98px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
top: -159px;
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.edit-user-image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}//.user-image
|
||||
|
||||
.edit-user-image {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
border-radius: 100%;
|
||||
width: calc(100% - 6px);
|
||||
background: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
233
app/styles/layouts/users.css
Normal file
233
app/styles/layouts/users.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
/* Users /ghost/settings/users/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.users-list-wrapper {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* User list
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.invited-users {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.user-list-title {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: var(--midbrown);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.user-list-item {
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.user-list-item {
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 551px) {
|
||||
.user-list-item {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Only apply these styles to anchor tags (pending invited are divs) */
|
||||
a.user-list-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
a.user-list-item:hover {
|
||||
background: color(#e1e1e1 lightness(+10%));
|
||||
}
|
||||
a.user-list-item:last-of-type:hover {
|
||||
box-shadow: inset 0px -1px 0px #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
background: #e1e1e1;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-list-item-icon:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: -7px;
|
||||
text-align: center;
|
||||
color: var(--brown);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-list-item-figure {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 35px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-list-item-figure img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.user-list-item-icon,
|
||||
.user-list-item-figure {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-body {
|
||||
flex: 1 1 auto;
|
||||
align-items: stretch;
|
||||
padding-left: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.user-list-item-body {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-body .name {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.user-list-item-body .description {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: var(--midbrown);
|
||||
white-space: nowrap;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.user-list-item-aside {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 12px 0 0 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-aside .user-list-action:not(:first-of-type) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 551px) {
|
||||
.user-list-item-aside .user-list-action:not(:first-of-type) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-aside .role-label {
|
||||
float: left;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.user-list-item-aside .role-label + .role-label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.user-list-action {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* Role Labels
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.role-label {
|
||||
display: inline-block;
|
||||
padding: 6px 8px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 400;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.role-label.owner {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: var(--darkgrey);
|
||||
}
|
||||
|
||||
.role-label.administrator {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.role-label.editor {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
|
||||
/* User invitation modal
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.invite-new-user .form-group {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.invite-new-user .form-group label {
|
||||
position: static;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.invite-new-user .form-group:nth-of-type(1) {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.invite-new-user .form-group:nth-of-type(2) {
|
||||
float: left;
|
||||
width: 35%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.invite-new-user .form-group input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invite-new-user .btn-green {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Users
|
||||
//
|
||||
// Styles for the Users list page
|
||||
// Slug: /ghost/settings/users/
|
||||
//
|
||||
// * Container
|
||||
// * Users List
|
||||
// * Role Labels
|
||||
// * User Actions
|
||||
// * Invite User Modal
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.users-list-wrapper {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Users List
|
||||
// --------------------------------------------------
|
||||
|
||||
.invited-users {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.user-list-title {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: $midbrown;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.user-list-item {
|
||||
|
||||
border-top: 1px solid #e1e1e1;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 551px) {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
// Only apply these styles to anchor tags (pending invited are divs)
|
||||
a.user-list-item {
|
||||
text-decoration: none;
|
||||
|
||||
// Hover states only for large viewports
|
||||
@media (min-width: 601px) {
|
||||
|
||||
&:hover {
|
||||
background: lighten(#e1e1e1, 10%);
|
||||
}
|
||||
|
||||
&:last-of-type:hover {
|
||||
box-shadow: inset 0px -1px 0px #e1e1e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
background: #e1e1e1;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: -7px;
|
||||
text-align: center;
|
||||
color: $brown;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-figure {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 35px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-list-item-icon,
|
||||
.user-list-item-figure {
|
||||
|
||||
@media (max-width: 550px) {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-item-body {
|
||||
flex: 1 1 auto;
|
||||
align-items: stretch;
|
||||
padding-left: 15px;
|
||||
line-height: 1;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $midbrown;
|
||||
white-space: nowrap;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
}//.user-list-item-body
|
||||
|
||||
.user-list-item-aside {
|
||||
|
||||
@media (max-width: 550px) {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 12px 0 0 50px;
|
||||
}
|
||||
|
||||
.user-list-action:not(:first-of-type) {
|
||||
margin-left: 20px;
|
||||
|
||||
@media (min-width: 551px) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.role-label {
|
||||
float: left;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.role-label + .role-label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}//.user-list-item-aside
|
||||
|
||||
.user-list-action {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Role Labels
|
||||
// --------------------------------------------------
|
||||
|
||||
.role-label {
|
||||
display: inline-block;
|
||||
padding: 6px 8px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 400;
|
||||
background: #eee;
|
||||
|
||||
&.owner {
|
||||
color: rgba(255,255,255,0.8);
|
||||
background: $darkgrey;
|
||||
}
|
||||
|
||||
&.administrator {
|
||||
color: rgba(255,255,255,0.8);
|
||||
background: $red;
|
||||
}
|
||||
|
||||
&.editor {
|
||||
color: rgba(255,255,255,0.8);
|
||||
background: $blue;
|
||||
}
|
||||
}//.role-label
|
||||
|
||||
|
||||
//
|
||||
// Invite User Modal
|
||||
// --------------------------------------------------
|
||||
|
||||
.invite-new-user {
|
||||
|
||||
.form-group {
|
||||
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
position: static;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
float: left;
|
||||
width: 35%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}//.form-group
|
||||
|
||||
.btn-green {
|
||||
width: 100%;
|
||||
}
|
||||
}//.invite-new-user
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Animations
|
||||
//
|
||||
// Keyframe animations used through Ghost
|
||||
//
|
||||
// * Define animations
|
||||
// * Classed to use these animations
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Define animations
|
||||
// --------------------------------------------------
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-snap {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-scale {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes keyboard-focus-style-fade-out {
|
||||
from {
|
||||
box-shadow: inset 0 0 30px 1px lighten($midgrey, 20%);
|
||||
}
|
||||
to {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Classed to use these animations
|
||||
// --------------------------------------------------
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-in-scale {
|
||||
animation: fade-in-scale 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fade-out 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Variables
|
||||
//
|
||||
// * Colours
|
||||
// * Default style values
|
||||
// * Dropdown & Popover triangles
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Colours
|
||||
// --------------------------------------------------
|
||||
|
||||
$darkgrey: #242628;
|
||||
$grey: #35393b;
|
||||
$midgrey: #7d878a;
|
||||
$lightgrey: #e2edf2;
|
||||
$lightestgrey: #FCFCFC;
|
||||
$brown: #aaa9a2;
|
||||
$midbrown: #c0bfb6;
|
||||
$blue: #5BA4E5;
|
||||
$red: #e25440;
|
||||
$orange: #F2A925;
|
||||
$green: #9FBB58;
|
||||
|
||||
|
||||
//
|
||||
// Default style values
|
||||
// --------------------------------------------------
|
||||
|
||||
$border-radius: 3px;
|
||||
$box-shadow: rgba(0,0,0,0.05) 0 1px 5px;
|
||||
$settings-menu-transition: 0.4s;
|
||||
$settings-menu-bezier: 0.1, 0.7, 0.1, 1;
|
||||
$font-family: 'Open Sans', sans-serif;
|
||||
$font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
|
||||
|
||||
//
|
||||
// Dropdown & Popover triangles
|
||||
// --------------------------------------------------
|
||||
|
||||
$popover_triangle: 14px;
|
||||
90
app/styles/patterns/_shame.css
Normal file
90
app/styles/patterns/_shame.css
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/* Shame
|
||||
/* ---------------------------------------------------------- */
|
||||
/* TODO: Kill with fire */
|
||||
|
||||
|
||||
/* Animations
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Semi-opaque fixed-position headers - used on content/editor */
|
||||
.floatingheader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 400;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1.3rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--brown);
|
||||
background: linear-gradient(to bottom, white 0%, white 25%, rgba(255, 255, 255, 0.9) 100%);
|
||||
/*Transparent gradient to make bg fade out as it goes out the top */
|
||||
}
|
||||
|
||||
.floatingheader .button {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
padding: 3px 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.floatingheader .button.button-back {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 3px;
|
||||
display: none;
|
||||
padding: 0 6px 0 3px;
|
||||
}
|
||||
|
||||
.floatingheader .button.button-back:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.floatingheader .button.button-back:before {
|
||||
left: -8px;
|
||||
border-width: 10px 8px 10px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.floatingheader .button.button-back {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.floatingheader small {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.floatingheader a,
|
||||
.floatingheader button {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.floatingheader a:hover,
|
||||
.floatingheader button:hover {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
|
||||
/* Scroll shadows
|
||||
/* ---------------------------------------------------------- */
|
||||
.scrolling .floatingheader {
|
||||
box-shadow: rgba(0, 0, 0, 0.03) 0 1px 3px;
|
||||
}
|
||||
|
||||
.scrolling .floatingheader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
height: 5px;
|
||||
width: 80%;
|
||||
margin-left: -40%;
|
||||
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 75%, transparent 100%);
|
||||
background-position: 0px -5px;
|
||||
background-size: 100% 200%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Shame
|
||||
//
|
||||
// A home for Styles that need to die in a fire, but are used
|
||||
// in lots of places.
|
||||
//
|
||||
// * Floating Header
|
||||
// * Scroll Shadows
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Floating Header
|
||||
// --------------------------------------------------
|
||||
|
||||
// Semi-opaque fixed-position headers - used on content/editor
|
||||
.floatingheader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 400;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1.3rem;
|
||||
text-transform: uppercase;
|
||||
color: $brown;
|
||||
background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%); //Transparent gradient to make bg fade out as it goes out the top
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
padding: 3px 4px;
|
||||
vertical-align: top;
|
||||
|
||||
&.button-back {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 3px;
|
||||
display: none;
|
||||
padding: 0 6px 0 3px;
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -8px;
|
||||
border-width: 10px 8px 10px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}//.button
|
||||
|
||||
small {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
color: $brown;
|
||||
|
||||
&:hover {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
} // .floatingheader
|
||||
|
||||
|
||||
//
|
||||
// Scroll Shadows
|
||||
// --------------------------------------------------
|
||||
|
||||
.scrolling {
|
||||
|
||||
.floatingheader {
|
||||
box-shadow: rgba(0, 0, 0, 0.03) 0 1px 3px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
height: 5px;
|
||||
width: 80%;
|
||||
margin-left: -40%;
|
||||
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0) 100%);
|
||||
background-position: 0px -5px;
|
||||
background-size: 100% 200%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
144
app/styles/patterns/buttons.css
Normal file
144
app/styles/patterns/buttons.css
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
/* Buttons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding: 9px 14px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.428571429;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
border-radius: var(--border-radius);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 */
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.btn:active:focus,
|
||||
.btn.active:focus {
|
||||
outline: thin dotted;
|
||||
outline: 0px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.btn.active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
.btn[disabled],
|
||||
fieldset[disabled] .btn {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Link Buttons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Make a button look and behave like a link */
|
||||
.btn-link {
|
||||
color: var(--blue);
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-link:active,
|
||||
.btn-link[disabled],
|
||||
fieldset[disabled] .btn-link {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-link:hover,
|
||||
.btn-link:focus,
|
||||
.btn-link:active {
|
||||
color: var(--blue);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-link:hover,
|
||||
.btn-link:focus {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-link[disabled]:hover,
|
||||
.btn-link[disabled]:focus,
|
||||
fieldset[disabled] .btn-link:hover,
|
||||
fieldset[disabled] .btn-link:focus {
|
||||
color: var(--midgrey);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* 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: 12px 18px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.33;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 7px 10px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Block Button (Fluid width)
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input[type="submit"].btn-block,
|
||||
input[type="reset"].btn-block,
|
||||
input[type="button"].btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,174 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Buttons
|
||||
//
|
||||
// Default button Styles, including sizes & colours
|
||||
//
|
||||
// * Default styles
|
||||
// * Coloured buttons
|
||||
// * Link buttons
|
||||
// * Minor buttons
|
||||
// * Button Sizes
|
||||
// * Block button
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Default styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding: 9px 14px;
|
||||
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.428571429;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus {
|
||||
outline: thin dotted;
|
||||
outline: 0px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 2px rgba(0,0,0,.125);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; // Future-proof disabling of clicks
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
}
|
||||
}//.btn
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
// -------------------------
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
color: $blue;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $blue;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $midgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}//.btn-link
|
||||
|
||||
|
||||
//
|
||||
// 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: 12px 18px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.33;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 7px 10px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
313
app/styles/patterns/forms.css
Normal file
313
app/styles/patterns/forms.css
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
/* Forms
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
color: var(--darkgrey);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form .word-count {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
border-bottom: #e1e1e1 1px solid;
|
||||
font-size: 1.2em;
|
||||
line-height: 2.0em;
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
|
||||
/* Form Groups
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.6em;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.form-group p {
|
||||
margin: 4px 0 0 0;
|
||||
color: #B3B2A8;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.form-group {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Input Icons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.input-icon[class*='icon-'] {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input-icon[class*='icon-'] input[type="email"],
|
||||
.input-icon[class*='icon-'] input[type="number"],
|
||||
.input-icon[class*='icon-'] input[type="password"],
|
||||
.input-icon[class*='icon-'] input[type="search"],
|
||||
.input-icon[class*='icon-'] input[type="tel"],
|
||||
.input-icon[class*='icon-'] input[type="text"],
|
||||
.input-icon[class*='icon-'] input[type="url"],
|
||||
.input-icon[class*='icon-'] input[type="date"] {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
|
||||
.input-icon[class*='icon-'] .gh-select select {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
|
||||
.input-icon[class*='icon-']:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.1rem;
|
||||
font-size: 1.3rem;
|
||||
transform: translateY(-52%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* Inputs
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-input,
|
||||
.gh-select,
|
||||
select {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
border: 1px solid #E0DFD7;
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-appearance: none;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: var(--darkgrey);
|
||||
transition: border-color 0.15s linear;
|
||||
}
|
||||
|
||||
.gh-input.error,
|
||||
.gh-select.error,
|
||||
select.error {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
.gh-input:focus,
|
||||
.gh-select:focus,
|
||||
select:focus {
|
||||
border-color: var(--brown);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
min-width: 250px;
|
||||
height: auto;
|
||||
min-height: 10rem;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
/* Radio / Checkboxes
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.for-radio label,
|
||||
.for-checkbox label {
|
||||
display: block;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.for-radio label p,
|
||||
.for-checkbox label p {
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.for-radio label:hover input:not(:checked) + .input-toggle-component,
|
||||
.for-checkbox label:hover input:not(:checked) + .input-toggle-component {
|
||||
border-color: var(--midbrown);
|
||||
}
|
||||
|
||||
.for-radio input,
|
||||
.for-checkbox input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.for-radio .input-toggle-component,
|
||||
.for-checkbox .input-toggle-component {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 7px;
|
||||
background: #F7F7F3;
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.for-radio p,
|
||||
.for-checkbox p {
|
||||
font-weight: normal;
|
||||
color: #B3B2A8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.for-checkbox .input-toggle-component {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.for-checkbox label .input-toggle-component {
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.for-checkbox label .input-toggle-component:before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
top: 4px;
|
||||
left: 3px;
|
||||
border: 2px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.for-checkbox label input:checked + .input-toggle-component {
|
||||
background: var(--green);
|
||||
border-color: color(var(--green) lightness(-10%));
|
||||
}
|
||||
|
||||
.for-checkbox label input:checked + .input-toggle-component:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.for-radio .input-toggle-component {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.for-radio label .input-toggle-component {
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.for-radio label .input-toggle-component:before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
background: #FFF;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.for-radio label input:checked + .input-toggle-component {
|
||||
background: var(--green);
|
||||
border-color: color(var(--green) lightness(-10%));
|
||||
}
|
||||
|
||||
.for-radio label input:checked + .input-toggle-component:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Select
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-select {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.gh-select:after {
|
||||
font-family: "ghosticons" !important;
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.8em;
|
||||
margin-top: -0.5em;
|
||||
pointer-events: none;
|
||||
content: "\e00f";
|
||||
}
|
||||
|
||||
.gh-select select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: window;
|
||||
text-indent: 0.01px;
|
||||
text-overflow: "";
|
||||
background: #fff;
|
||||
outline: none;
|
||||
padding: 8px 10px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.gh-select select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-select select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
|
||||
|
||||
/* FFF: Fucking Firefox Fixes
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.gh-select {
|
||||
border-width: 1px;
|
||||
}
|
||||
.gh-select select {
|
||||
padding: 7px 10px 7px 8px;
|
||||
}
|
||||
.gh-select:focus {
|
||||
border-color: var(--brown);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,370 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Forms
|
||||
//
|
||||
// All things form, input, textarea, select, radio and checkbox
|
||||
//
|
||||
// * Form Wrapper
|
||||
// * Form Groups
|
||||
// * Input Icons
|
||||
// * Radio & Checkbox wrappers
|
||||
// * Fieldsets & Legends
|
||||
// * Inputs, selects, and textareas
|
||||
// * Checkboxes
|
||||
// * Radio Buttons
|
||||
// * Select Component
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Form Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
form {
|
||||
|
||||
label {
|
||||
display: block;
|
||||
color: $darkgrey;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form Groups
|
||||
// --------------------------------------------------
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.6em;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
p {
|
||||
margin: 4px 0 0 0;
|
||||
color: #B3B2A8;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}//.form-group
|
||||
|
||||
|
||||
//
|
||||
// Input Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
.input-icon[class*='icon-'] {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="date"] {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
|
||||
.gh-select {
|
||||
select {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.1rem;
|
||||
font-size: 1.3rem;
|
||||
transform: translateY(-52%);
|
||||
z-index: 100;
|
||||
}
|
||||
}//.thing[class*='icon-']
|
||||
|
||||
|
||||
//
|
||||
// Radio & Checkbox wrappers
|
||||
// --------------------------------------------------
|
||||
|
||||
.for-radio,
|
||||
.for-checkbox {
|
||||
|
||||
label {
|
||||
display: block;
|
||||
padding-bottom: 4px;
|
||||
|
||||
p {
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
input:not(:checked) + .input-toggle-component {
|
||||
border-color: $midbrown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.input-toggle-component {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 7px;
|
||||
background: #F7F7F3;
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: normal;
|
||||
color: #B3B2A8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}//.for-radio, .for-checkbox
|
||||
|
||||
//
|
||||
// Fieldsets & Legends
|
||||
// --------------------------------------------------
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
border-bottom: #e1e1e1 1px solid;
|
||||
font-size: 1.2em;
|
||||
line-height: 2.0em;
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inputs, selects, and textareas
|
||||
// --------------------------------------------------
|
||||
|
||||
.gh-input,
|
||||
.gh-select,
|
||||
select {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
border: 1px solid #E0DFD7;
|
||||
border-radius: $border-radius;
|
||||
-webkit-appearance: none;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: $darkgrey;
|
||||
|
||||
transition: border-color 0.15s linear;
|
||||
|
||||
&.error {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $brown;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
min-width: 250px;
|
||||
height: auto;
|
||||
min-height: 10rem;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Checkboxes
|
||||
// --------------------------------------------------
|
||||
|
||||
.for-checkbox {
|
||||
|
||||
.input-toggle-component {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
.input-toggle-component {
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
|
||||
&:before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
top: 4px;
|
||||
left: 3px;
|
||||
border: 2px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .input-toggle-component {
|
||||
background: $green;
|
||||
border-color: darken($green, 10%);
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}//label
|
||||
}//.for-checkbox
|
||||
|
||||
|
||||
//
|
||||
// Radio Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.for-radio {
|
||||
|
||||
.input-toggle-component {
|
||||
border-radius: 100px; // Use px to prevent ovals
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
.input-toggle-component {
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
|
||||
&:before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
background: #FFF;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .input-toggle-component {
|
||||
background: $green;
|
||||
border-color: darken($green, 10%);
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}//label
|
||||
}//.for-radio
|
||||
|
||||
|
||||
//
|
||||
// Select Component
|
||||
// --------------------------------------------------
|
||||
|
||||
.gh-select {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
|
||||
&:after {
|
||||
font-family: "ghosticons" !important;
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.8em;
|
||||
margin-top: -0.5em;
|
||||
pointer-events: none;
|
||||
content: "\e00f";
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: window;
|
||||
text-indent: 0.01px;
|
||||
text-overflow: "";
|
||||
background: #fff;
|
||||
outline: none;
|
||||
padding: 8px 10px;
|
||||
line-height: normal;
|
||||
|
||||
// This hides native gh-select button arrow in IE
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hover style - Not used, but works
|
||||
&:hover {}
|
||||
|
||||
// This hides focus around selected option in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
}//select
|
||||
}//.gh-select
|
||||
|
||||
// Firefox-specific size fixes
|
||||
@-moz-document url-prefix() {
|
||||
|
||||
.gh-select {
|
||||
border-width: 1px;
|
||||
|
||||
select {
|
||||
padding: 7px 10px 7px 8px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
380
app/styles/patterns/global.css
Normal file
380
app/styles/patterns/global.css
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
/* Global styles
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Variables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
|
||||
/* Colours */
|
||||
--darkgrey: #242628;
|
||||
--grey: #242628;
|
||||
--midgrey: #7d878a;
|
||||
--lightgrey: #e2edf2;
|
||||
--lightestgrey: #FCFCFC;
|
||||
--brown: #aaa9a2;
|
||||
--midbrown: #c0bfb6;
|
||||
--blue: #5BA4E5;
|
||||
--red: #e25440;
|
||||
--orange: #F2A925;
|
||||
--green: #9FBB58;
|
||||
|
||||
/* Style values */
|
||||
--border-radius: 3px;
|
||||
--box-shadow: rgba(0,0,0,0.05) 0 1px 5px; /* TODO: not used? */
|
||||
--font-family: 'Open Sans', sans-serif;
|
||||
--font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
|
||||
/* Layout
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font: 62.5%/1.65 "Open Sans", sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
/* Prevent elastic scrolling on the whole page */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: lighten(var(--darkgrey), 10%);
|
||||
font-size: 1.4rem;
|
||||
font-feature-settings: "kern" 1;
|
||||
|
||||
/* Prevent elastic scrolling on the whole page */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: lighten(var(--blue), 20%);
|
||||
}
|
||||
|
||||
|
||||
/* Text
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 0.3em 0;
|
||||
line-height: 1.15em;
|
||||
color: var(--darkgrey);
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
text-indent: -1px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4.2rem;
|
||||
text-indent: -1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.8rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
margin: 0 0 1.7em 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
ol ol, ul ul,
|
||||
ul ol, ol ul {
|
||||
margin: 0 0 0.4em 0;
|
||||
padding-left: 2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
a.highlight {
|
||||
color: var(--orange);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
margin: 3.2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 1.6em 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
float: left;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin-left: 200px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1.6em 0;;
|
||||
padding: 0 1.6em 0 1.6em;
|
||||
border-left: #e1e1e1 0.6em solid;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
margin:0.8em 0;
|
||||
font-size:1.2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
blockquote small {
|
||||
display: inline-block;
|
||||
margin: 0.8em 0 0.8em 1.5em;
|
||||
font-size:0.9em;
|
||||
color: var(--brown);
|
||||
}
|
||||
/* Quotation marks */
|
||||
blockquote small:before { content: '\2014 \00A0'; }
|
||||
|
||||
blockquote cite { font-weight:bold; }
|
||||
blockquote cite a { font-weight: normal; }
|
||||
|
||||
.markdown,
|
||||
pre,
|
||||
code,
|
||||
tt {
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
code, tt {
|
||||
font-size: 0.85em;
|
||||
white-space: pre-wrap;
|
||||
background: lighten(#e1e1e1, 2%);
|
||||
border-radius: 2px;
|
||||
padding: 0.2em 0.4em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1.6em 0;;
|
||||
background: lighten(#e1e1e1, 2%);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 0.9em;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre tt {
|
||||
font-size: inherit;
|
||||
white-space: pre-wrap;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.4em;
|
||||
padding: 1px 8px;
|
||||
border: #ccc 1px solid;
|
||||
color: var(--darkgrey);
|
||||
text-shadow: #fff 0 1px 0;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
background: #f4f4f4;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(0, 0, 0, 0.2),
|
||||
0 1px 0 0 #fff inset;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Utilities
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.clearfix,
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sr-only:active,
|
||||
.sr-only:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* Animations
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-snap {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-scale {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes keyboard-focus-style-fade-out {
|
||||
from {
|
||||
box-shadow: inset 0 0 30px 1px lighten(var(--midgrey), 20%);
|
||||
}
|
||||
to {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-in-scale {
|
||||
animation: fade-in-scale 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fade-out 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
|
@ -1,302 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Globals
|
||||
//
|
||||
// Where most of the element-selector styling goes, which other
|
||||
// elements can inherit from. Sensible defaults.
|
||||
//
|
||||
// * Global Layout
|
||||
// * Text & Type
|
||||
// * Utility Classes
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Global Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font: 62.5%/1.65 "Open Sans", sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
// Prevent elastic scrolling on the whole page
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: lighten($darkgrey, 10%);
|
||||
font-size: 1.4rem;
|
||||
|
||||
// Prevent elastic scrolling on the whole page
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden; // Never allow horizontal scrollbars
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: lighten($blue, 20%);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text & Type
|
||||
// --------------------------------------------------
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 0.3em 0;
|
||||
line-height: 1.15em;
|
||||
color: $darkgrey;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
text-indent: -1px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4.2rem;
|
||||
text-indent: -1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.8rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
margin: 0 0 1.7em 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
ol ol, ul ul,
|
||||
ul ol, ol ul {
|
||||
margin: 0 0 0.4em 0;
|
||||
padding-left: 2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
color: $orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
margin: 3.2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 1.6em 0;;
|
||||
|
||||
dt {
|
||||
float: left;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 200px;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1.6em 0;;
|
||||
padding: 0 1.6em 0 1.6em;
|
||||
border-left: #e1e1e1 0.6em solid;
|
||||
|
||||
p {
|
||||
margin:0.8em 0;
|
||||
font-size:1.2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
small {
|
||||
display: inline-block;
|
||||
margin: 0.8em 0 0.8em 1.5em;
|
||||
font-size:0.9em;
|
||||
color: $brown;
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
cite {
|
||||
font-weight:bold;
|
||||
a { font-weight: normal; }
|
||||
}
|
||||
}
|
||||
|
||||
.markdown,
|
||||
pre,
|
||||
code,
|
||||
tt {
|
||||
font-family: $font-family-mono;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
font-size: 0.85em;
|
||||
white-space: pre-wrap;
|
||||
background: lighten(#e1e1e1, 2%);
|
||||
border-radius: 2px;
|
||||
padding: 0.2em 0.4em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1.6em 0;;
|
||||
background: lighten(#e1e1e1, 2%);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-family: $font-family-mono;
|
||||
font-size: 0.9em;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
border-radius: 3px;
|
||||
|
||||
code, tt {
|
||||
font-size: inherit;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.4em;
|
||||
padding: 1px 8px;
|
||||
border: #ccc 1px solid;
|
||||
color: $darkgrey;
|
||||
text-shadow: #fff 0 1px 0;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
background: #f4f4f4;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(0, 0, 0, 0.2),
|
||||
0 1px 0 0 #fff inset;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Utility Classes
|
||||
// --------------------------------------------------
|
||||
|
||||
.clearfix,
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
// ------------------------------------------------------------
|
||||
// Icons
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Font-face rule
|
||||
// --------------------------------------------------
|
||||
/* Icons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@font-face {
|
||||
font-family: "ghosticons";
|
||||
119
app/styles/patterns/labels.css
Normal file
119
app/styles/patterns/labels.css
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/* Labels
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.label {
|
||||
display: inline;
|
||||
padding: 0.2em 0.6em 0.3em;
|
||||
font-size: 75%;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
.label:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn .label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
h1 .label,
|
||||
h2 .label,
|
||||
h3 .label,
|
||||
h4 .label,
|
||||
h5 .label,
|
||||
h6 .label {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em 0.25em;
|
||||
top: -0.18em;
|
||||
position: relative;
|
||||
line-height: 70%;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
a.label:hover,
|
||||
a.label:focus {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Label Colours
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.label-default {
|
||||
background-color: #A1ADB3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-default[href] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-default[href]:hover,
|
||||
.label-default[href]:focus {
|
||||
background-color: color(#A1ADB3 lightness(-10%));
|
||||
}
|
||||
|
||||
.label-alt {
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-alt[href] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-alt[href]:hover,
|
||||
.label-alt[href]:focus {
|
||||
background-color: color(#666 lightness(-10%));
|
||||
}
|
||||
|
||||
.label-blue {
|
||||
background-color: var(--blue);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-blue[href] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-blue[href]:hover,
|
||||
.label-blue[href]:focus {
|
||||
background-color: color(var(--blue) lightness(-10%));
|
||||
}
|
||||
|
||||
.label-green {
|
||||
background-color: var(--green);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-green[href] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-green[href]:hover,
|
||||
.label-green[href]:focus {
|
||||
background-color: color(var(--green) lightness(-10%));
|
||||
}
|
||||
|
||||
.label-red {
|
||||
background-color: var(--red);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-red[href] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-red[href]:hover,
|
||||
.label-red[href]:focus {
|
||||
background-color: color(var(--red) lightness(-10%));
|
||||
}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Labels
|
||||
//
|
||||
// Labels are little bubbles of info.
|
||||
// Imagine an unread email counter.
|
||||
//
|
||||
// * Labels
|
||||
// * Colours
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
// --------------------------------------------------
|
||||
|
||||
.label {
|
||||
display: inline;
|
||||
padding: .2em .6em .3em;
|
||||
font-size: 75%;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: .25em;
|
||||
|
||||
// Empty labels collapse automatically (not available in IE8)
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Quick fix for labels in buttons
|
||||
.btn & {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.label {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em 0.25em;
|
||||
top: -0.18em;
|
||||
position: relative;
|
||||
line-height: 70%;
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
// Add hover effects, but only for links
|
||||
a.label {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Colours
|
||||
// --------------------------------------------------
|
||||
|
||||
.label-default {
|
||||
background-color: #A1ADB3;
|
||||
color: #fff;
|
||||
|
||||
&[href] {
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken(#A1ADB3, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-alt {
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
|
||||
&[href] {
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken(#666, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-blue {
|
||||
background-color: $blue;
|
||||
color: #fff;
|
||||
|
||||
&[href] {
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($blue, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-green {
|
||||
background-color: $green;
|
||||
color: #fff;
|
||||
|
||||
&[href] {
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($green, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-red {
|
||||
background-color: $red;
|
||||
color: #fff;
|
||||
|
||||
&[href] {
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($red, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
69
app/styles/patterns/navlist.css
Normal file
69
app/styles/patterns/navlist.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* Nav Lists
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.nav-list {
|
||||
padding: 0;
|
||||
border: 1px solid #E0DFD7;
|
||||
max-width: 500px;
|
||||
border-radius: var(--border-radius);
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.nav-list.nav-list-block {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 8px 40px 8px 12px;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.nav-list-item:hover {
|
||||
background: color(#e1e1e1 lightness(+10%));
|
||||
}
|
||||
|
||||
.nav-list-item:first-of-type {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.nav-list-item:last-of-type {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.nav-list-item:not(:last-of-type) {
|
||||
border-bottom: 1px solid #E0DFD7;
|
||||
}
|
||||
|
||||
.nav-list-item button {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-list-item a {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.nav-list-item b {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.nav-list-item span {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
color: var(--midgrey);
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.nav-list-item i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
margin-top: -0.9rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Navigation Lists
|
||||
//
|
||||
// Navigation component used in places like the settings menu
|
||||
//
|
||||
// * Wrapper
|
||||
// * Nav Item
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.nav-list {
|
||||
padding: 0;
|
||||
border: 1px solid #E0DFD7;
|
||||
max-width: 500px;
|
||||
border-radius: $border-radius;
|
||||
background: #FFF;
|
||||
|
||||
&.nav-list-block {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Nav Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 8px 40px 8px 12px;
|
||||
color: $darkgrey;
|
||||
|
||||
&:hover {
|
||||
background: lighten(#e1e1e1, 10%);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid #E0DFD7;
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
color: $midgrey;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
margin-top: -0.9rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}//.nav-list-item
|
||||
61
app/styles/patterns/tables.css
Normal file
61
app/styles/patterns/tables.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/* Tables
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Base */
|
||||
table,
|
||||
.table {
|
||||
margin: 1.6em 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td,
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* Default Table
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.table th {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.table caption + thead tr:first-child th,
|
||||
.table caption + thead tr:first-child td,
|
||||
.table colgroup + thead tr:first-child th,
|
||||
.table colgroup + thead tr:first-child td,
|
||||
.table thead:first-child tr:first-child th,
|
||||
.table thead:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.table tbody + tbody {
|
||||
border-top: 2px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.table table table {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.table tbody > tr:nth-child(odd) > td,
|
||||
.table tbody > tr:nth-child(odd) > th {
|
||||
background-color: color(#e1e1e1 lightness(+10%));
|
||||
}
|
||||
|
||||
.table.plain tbody > tr:nth-child(odd) > td,
|
||||
.table.plain tbody > tr:nth-child(odd) > th {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Tables
|
||||
//
|
||||
// Default Styles for HTML tables
|
||||
//
|
||||
// * Base Table
|
||||
// * Default Table
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Base Table
|
||||
// --------------------------------------------------
|
||||
// Minimal styling
|
||||
|
||||
table,
|
||||
.table {
|
||||
margin: 1.6em 0;;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Default Table
|
||||
// --------------------------------------------------
|
||||
// Properly styled with colour, spacing, and borders
|
||||
|
||||
.table {
|
||||
|
||||
th,
|
||||
td {
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
caption + thead tr:first-child th,
|
||||
caption + thead tr:first-child td,
|
||||
colgroup + thead tr:first-child th,
|
||||
colgroup + thead tr:first-child td,
|
||||
thead:first-child tr:first-child th,
|
||||
thead:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: 2px solid #e1e1e1;
|
||||
}
|
||||
|
||||
table table {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(odd) > td,
|
||||
tbody > tr:nth-child(odd) > th {
|
||||
background-color: lighten(#e1e1e1, 10%);
|
||||
}
|
||||
|
||||
&.plain {
|
||||
tbody > tr:nth-child(odd) > td,
|
||||
tbody > tr:nth-child(odd) > th {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}//.table
|
||||
53
app/styles/vendor/nanoscroller.scss
vendored
53
app/styles/vendor/nanoscroller.scss
vendored
|
|
@ -1,53 +0,0 @@
|
|||
.nano {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nano > .nano-content {
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.nano > .nano-content:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
.nano > .nano-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.has-scrollbar > .nano-content::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.nano > .nano-pane {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
opacity: 0;
|
||||
transition: 0.45s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.nano > .nano-pane > .nano-slider {
|
||||
background: #444;
|
||||
background: rgba(0,0,0,0.35);
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.nano.nanoShowScrollBar > .nano-pane,
|
||||
.nano-pane.active,
|
||||
.nano-pane.flashed {
|
||||
opacity: 1;
|
||||
}
|
||||
.nano > .nano-pane:hover,
|
||||
.nano > .nano-pane.active {
|
||||
width: 10px;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
opacity: 1;
|
||||
transition: 0.15s;
|
||||
}
|
||||
93
app/styles/vendor/nprogress.scss
vendored
93
app/styles/vendor/nprogress.scss
vendored
|
|
@ -1,93 +0,0 @@
|
|||
//
|
||||
// NProgress
|
||||
// --------------------------------------------------
|
||||
|
||||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
-webkit-pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: $blue;
|
||||
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px $blue, 0 0 5px $blue;
|
||||
opacity: 1.0;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-moz-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
-o-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: $blue;
|
||||
border-left-color: $blue;
|
||||
border-radius: 10px;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
-moz-animation: nprogress-spinner 400ms linear infinite;
|
||||
-ms-animation: nprogress-spinner 400ms linear infinite;
|
||||
-o-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Keyframes
|
||||
// --------------------------------------------------
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes nprogress-spinner {
|
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes nprogress-spinner {
|
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes nprogress-spinner {
|
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -19,8 +19,7 @@
|
|||
"keymaster": "1.6.3",
|
||||
"loader.js": "3.2.1",
|
||||
"moment": "2.10.2",
|
||||
"nanoscroller": "0.8.4",
|
||||
"normalize-scss": "3.0.2",
|
||||
"normalize.css": "3.0.3",
|
||||
"nprogress": "0.1.6",
|
||||
"password-generator": "git://github.com/bermi/password-generator#49accd7",
|
||||
"rangyinputs": "1.2.0",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ module.exports = function (environment) {
|
|||
ENV.APP.LOG_TRANSITIONS = true;
|
||||
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
|
||||
ENV.APP.LOG_VIEW_LOOKUPS = true;
|
||||
ENV.mythOptions = {
|
||||
sourcemap: true
|
||||
};
|
||||
}
|
||||
|
||||
if (environment === 'test') {
|
||||
|
|
@ -38,10 +41,15 @@ module.exports = function (environment) {
|
|||
ENV.APP.LOG_VIEW_LOOKUPS = false;
|
||||
|
||||
ENV.APP.rootElement = '#ember-testing';
|
||||
ENV.mythOptions = {
|
||||
compress: true,
|
||||
outputFile: 'ghost.min.css'
|
||||
};
|
||||
}
|
||||
|
||||
if (environment === 'production') {
|
||||
ENV.sassOptions = {
|
||||
ENV.mythOptions = {
|
||||
compress: true,
|
||||
outputFile: 'ghost.min.css'
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
"broccoli-asset-rev": "^2.0.2",
|
||||
"ember-cli": "0.2.2",
|
||||
"ember-cli-app-version": "0.3.3",
|
||||
"ember-cli-autoprefixer": "0.3.0",
|
||||
"ember-cli-babel": "^4.1.0",
|
||||
"ember-cli-content-security-policy": "0.4.0",
|
||||
"ember-cli-dependency-checker": "0.0.8",
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
"ember-cli-ic-ajax": "0.1.1",
|
||||
"ember-cli-inject-live-reload": "^1.3.0",
|
||||
"ember-cli-mocha": "^0.5.0",
|
||||
"ember-cli-sass": "3.1.0",
|
||||
"ember-myth": "0.0.2",
|
||||
"ember-cli-uglify": "1.0.1",
|
||||
"ember-data": "1.0.0-beta.16.1",
|
||||
"ember-export-application-global": "^1.0.2",
|
||||
|
|
|
|||
Loading…
Reference in a new issue