Convert Sass to Myth
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
d64a8b7b34
commit
057aee408d
|
|
@ -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>
|
||||
|
|
@ -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";
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/* Notifications
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// ------------------------------------------------------------
|
||||
// Notifications
|
||||
//
|
||||
// Styles for notifications
|
||||
//
|
||||
// * Wrappers
|
||||
// * Base Notification
|
||||
// * Individual Notifications
|
||||
// ------------------------------------------------------------
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 New Issue