mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-04-13 03:20:59 +00:00
Merge branch 'sass'
This commit is contained in:
Matt Westcott
commit
0526428c1d
65 changed files with 634 additions and 636 deletions
|
|
@ -35,11 +35,6 @@ Database
|
|||
|
||||
Wagtail is tested on SQLite, and should work on other Django-supported database backends, but we recommend PostgreSQL for production use.
|
||||
|
||||
Asset compression
|
||||
-----------------
|
||||
|
||||
The Wagtail editor UI is based on `Less <http://lesscss.org/>`_. We aim to provide support for pure-Python Less compilation, to minimise installation requirements, but the official node.js-based compiler is significantly faster. We recommend installing this in production, and you may also prefer to use it to speed up your development environment.
|
||||
|
||||
Public users
|
||||
~~~~~~~~~~~~
|
||||
|
||||
|
|
|
|||
|
|
@ -35,14 +35,6 @@ aptitude update
|
|||
aptitude -y install git python-pip nginx postgresql redis-server
|
||||
aptitude -y install postgresql-server-dev-all python-dev libxml2-dev libxslt-dev libjpeg62-dev
|
||||
|
||||
wget -nv http://nodejs.org/dist/v0.10.20/node-v0.10.20.tar.gz
|
||||
tar xzf node-v0.10.20.tar.gz
|
||||
cd node-v0.10.20
|
||||
./configure && make -s && make -s install
|
||||
cd ..
|
||||
rm -r node-v0.10.20 node-v0.10.20.tar.gz
|
||||
npm install -g less
|
||||
|
||||
perl -pi -e "s/^(local\s+all\s+postgres\s+)peer$/\1trust/" /etc/postgresql/9.1/main/pg_hba.conf
|
||||
service postgresql reload
|
||||
|
||||
|
|
|
|||
|
|
@ -33,10 +33,6 @@ aptitude update
|
|||
aptitude -y install git python-pip nginx postgresql redis-server
|
||||
aptitude -y install postgresql-server-dev-all python-dev libxml2-dev libxslt-dev libjpeg62-dev
|
||||
|
||||
aptitude -y install npm
|
||||
ln -s /usr/bin/nodejs /usr/bin/node
|
||||
npm install -g less
|
||||
|
||||
perl -pi -e "s/^(local\s+all\s+postgres\s+)peer$/\1trust/" /etc/postgresql/9.1/main/pg_hba.conf
|
||||
service postgresql reload
|
||||
|
||||
|
|
|
|||
1
setup.py
1
setup.py
|
|
@ -42,6 +42,7 @@ setup(
|
|||
"Django>=1.6.2",
|
||||
"South>=0.8.4",
|
||||
"django-compressor>=1.3",
|
||||
"django-libsass>=0.1",
|
||||
"django-modelcluster>=0.1",
|
||||
"django-taggit>=0.11.2",
|
||||
"Pillow>=2.3.0",
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
.messages{
|
||||
position:relative;
|
||||
z-index:5;
|
||||
background-color:@color-grey-1;
|
||||
|
||||
ul{
|
||||
.unlist();
|
||||
padding-left:10px;
|
||||
position:relative;
|
||||
top:-100px;
|
||||
opacity:0;
|
||||
}
|
||||
li{
|
||||
.nice-padding;
|
||||
padding-top:1.3em;
|
||||
padding-bottom:1.3em;
|
||||
color:white;
|
||||
}
|
||||
.error{
|
||||
background-color:@color-red;
|
||||
}
|
||||
.warning{
|
||||
background-color:@color-orange;
|
||||
}
|
||||
.success{
|
||||
background-color:@color-teal-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.messages.new ul{
|
||||
.transition-immediate(none);
|
||||
top:-100px;
|
||||
}
|
||||
|
||||
.ready .messages ul,
|
||||
.messages.appear ul{
|
||||
.transition-immediate(~"top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease");
|
||||
opacity:1;
|
||||
top:0;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
.messages{
|
||||
ul{
|
||||
margin-left:-15px;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
border-top: 15px solid #000;
|
||||
border-left: 15px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
/* Utility variable — you should never need to modify this */
|
||||
@gridsystem_width: @grid-columns * 1px;
|
||||
@padding: @grid-gutter-width*0.5;
|
||||
@correction: 0.5 / @grid-max-width * 100 * 1%; // NOTE: Check this in IE
|
||||
|
||||
/* Ensure grid columns are set to border-boxes. This is essential */
|
||||
.border-box(){
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-box(){
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* Our row container */
|
||||
.row(@padding:0){
|
||||
.clearfix();
|
||||
.border-box();
|
||||
|
||||
display:block;
|
||||
/*max-width: @grid-max-width; NO MAX WIDTH*/
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: @padding;
|
||||
padding-left: @padding;
|
||||
}
|
||||
|
||||
.row-flush(){
|
||||
margin-left:-@padding;
|
||||
margin-right:-@padding;
|
||||
}
|
||||
|
||||
/* Our column container */
|
||||
.column(@x, @padding:@padding, @grid-columns:@grid-columns){
|
||||
.border-box();
|
||||
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 100%*(@x / @grid-columns);
|
||||
padding-right: @padding;
|
||||
padding-left: @padding;
|
||||
}
|
||||
|
||||
.table-column(@x, @padding:@padding, @grid-columns:@grid-columns){
|
||||
.border-box();
|
||||
|
||||
width: 100%*(@x / @grid-columns);
|
||||
}
|
||||
|
||||
/* Push adds left padding */
|
||||
.push(@offset:1, @grid-columns:@grid-columns) {
|
||||
margin-left: 100%*(@offset / @grid-columns);
|
||||
}
|
||||
.push-padding(@offset:1, @grid-columns:@grid-columns) {
|
||||
padding-left:100%*(@offset / @grid-columns);
|
||||
}
|
||||
|
||||
/* Pull adds right padding */
|
||||
.pull(@offset:1, @grid-columns:@grid-columns) {
|
||||
margin-right: 100%*(@offset / @grid-columns);
|
||||
}
|
||||
.pull-padding(@offset:1, @grid-columns:@grid-columns){
|
||||
padding-right: 100%*(@offset / @grid-columns);
|
||||
}
|
||||
|
||||
/* only used in places where padding not applied to same elements as row or row-flush
|
||||
* most of the time this class should be applied directly to the html elements */
|
||||
.nice-padding(){
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
padding-left:50px;
|
||||
padding-right:50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
/* paths */
|
||||
@static-root: "/static/wagtailadmin/images/";
|
||||
@css-root: "/static/wagtailadmin/css/";
|
||||
|
||||
/* grid settings */
|
||||
@grid-columns: 12;
|
||||
@grid-gutter-width: 3%;
|
||||
@grid-max-width: 1200px;
|
||||
@grid-content-indent:0.7;
|
||||
|
||||
/* screen breakpoints */
|
||||
@breakpoint-mobile:50em; /* 800px */
|
||||
@breakpoint-desktop-small:56.25em; /* 900px */
|
||||
@breakpoint-desktop-large:75em; /* 1200px */
|
||||
@breakpoint-desktop-larger:100em; /* 1600px */
|
||||
|
||||
/* colours */
|
||||
@color-teal: #43b1b0;
|
||||
@color-teal-darker: darken(@color-teal, 10%);
|
||||
@color-teal-dark: #246060;
|
||||
@color-red: #f7474e;
|
||||
@color-orange:#e9b04d;
|
||||
@color-green: #00FF00;
|
||||
|
||||
/* darker to lighter */
|
||||
@color-grey-1: #333333;
|
||||
@color-grey-1-1: #404040;
|
||||
@color-grey-2: #666666;
|
||||
@color-grey-3: #d9d9d9;
|
||||
@color-grey-4: #e6e6e6;
|
||||
@color-grey-5: #fafafa;
|
||||
|
||||
@color-thead-bg: @color-grey-5;
|
||||
@color-header-bg: @color-teal; // #ff6a58;
|
||||
@color-fieldset-hover: @color-grey-5;
|
||||
@color-input-border: @color-grey-3;
|
||||
@color-input-focus: #f4fcfc;
|
||||
@color-input-error-bg: #feedee;
|
||||
@color-button: @color-teal;
|
||||
@color-button-hover: @color-teal-darker;
|
||||
@color-button-yes: @color-green;
|
||||
@color-button-yes-hover: darken(@color-button-yes, 8%);
|
||||
@color-button-no: @color-red;
|
||||
@color-button-no-hover: darken(@color-button-no, 20%);
|
||||
@color-link: @color-teal;
|
||||
@color-link-hover: @color-teal-dark;
|
||||
|
||||
@color-text-base: @color-grey-2;
|
||||
@color-text-input: @color-grey-1;
|
||||
|
||||
/* misc sizing */
|
||||
@thumbnail-width:130px;
|
||||
@menu-width: 150px;
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
.dropdown{
|
||||
position:relative;
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
|
||||
.dropdown-toggle{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
ul{
|
||||
.unlist();
|
||||
background-color:@color-teal;
|
||||
@include unlist();
|
||||
background-color:$color-teal;
|
||||
position:absolute;
|
||||
overflow:hidden;
|
||||
top:100%;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
font-weight:normal;
|
||||
|
||||
&:hover{
|
||||
background-color:@color-teal-darker;
|
||||
background-color:$color-teal-darker;
|
||||
}
|
||||
&.icon{
|
||||
padding-right:5em;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
&.open ul{
|
||||
.box-shadow(0px 3px 3px 0 rgba(0,0,0,0.2));
|
||||
@include box-shadow(0px 3px 3px 0 rgba(0,0,0,0.2));
|
||||
opacity:1;
|
||||
left:0;
|
||||
display:block;
|
||||
|
|
@ -90,14 +90,14 @@
|
|||
|
||||
|
||||
&.dropup ul{
|
||||
.box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
|
||||
@include box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
|
||||
top:auto;
|
||||
bottom:100%;
|
||||
}
|
||||
|
||||
input[type=button], input[type=submit], button{
|
||||
padding:1em 0;
|
||||
.border-radius(0);
|
||||
@include border-radius(0);
|
||||
display:block;
|
||||
width:100%;
|
||||
text-align:left;
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
float:left;
|
||||
|
||||
&:hover{
|
||||
background-color:@color-teal-darker;
|
||||
background-color:$color-teal-darker;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,11 +126,11 @@
|
|||
}
|
||||
|
||||
&:hover{
|
||||
background-color:@color-teal-darker;
|
||||
background-color:$color-teal-darker;
|
||||
}
|
||||
}
|
||||
&.open > .button + .dropdown-toggle{
|
||||
background-color:@color-teal-darker;
|
||||
background-color:$color-teal-darker;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,10 +143,10 @@
|
|||
}
|
||||
|
||||
a{
|
||||
color:@color-grey-2;
|
||||
color:$color-grey-2;
|
||||
|
||||
&:hover{
|
||||
background-color:@color-grey-3;
|
||||
background-color:$color-grey-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@ h2 .dropdown{
|
|||
|
||||
.dropdown-toggle{
|
||||
padding:0.5em 0;
|
||||
border-right:1px solid @color-grey-3;
|
||||
border-right:1px solid $color-grey-3;
|
||||
|
||||
/* icon */
|
||||
&:before{
|
||||
|
|
@ -170,13 +170,13 @@ h2 .dropdown{
|
|||
text-align:left;
|
||||
}
|
||||
&:hover{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
border-color:transparent;
|
||||
}
|
||||
}
|
||||
&.open{
|
||||
.dropdown-toggle{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
}
|
||||
|
||||
ul{
|
||||
|
|
@ -185,14 +185,14 @@ h2 .dropdown{
|
|||
}
|
||||
|
||||
.dropdown-toggle:hover{
|
||||
background-color:@color-grey-3;
|
||||
background-color:$color-grey-3;
|
||||
&:before{
|
||||
color:white;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
&.open .dropdown-toggle:before{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
color:white;
|
||||
opacity:1;
|
||||
}
|
||||
|
|
@ -202,7 +202,7 @@ h2 .dropdown{
|
|||
|
||||
footer .actions .dropdown-toggle{
|
||||
text-transform:uppercase;
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
line-height:3em;
|
||||
color:white;
|
||||
padding-left:1em;
|
||||
|
|
@ -222,5 +222,5 @@ footer .actions .dropdown ul li{
|
|||
|
||||
/* Transitions */
|
||||
.dropdown ul{
|
||||
.transition(opacity 0.2s linear);
|
||||
@include transition(opacity 0.2s linear);
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ max z-index: unknown;
|
|||
*/
|
||||
|
||||
|
||||
@explorer-z-index:500;
|
||||
$explorer-z-index:500;
|
||||
|
||||
.explorer {
|
||||
pointer-events:none;
|
||||
|
|
@ -21,7 +21,7 @@ max z-index: unknown;
|
|||
perspective-origin: 50% 200%;
|
||||
|
||||
ul {
|
||||
background: @color-grey-1;
|
||||
background: $color-grey-1;
|
||||
padding: 0;
|
||||
margin:0;
|
||||
list-style: none;
|
||||
|
|
@ -32,7 +32,7 @@ max z-index: unknown;
|
|||
|
||||
li {
|
||||
position: relative;
|
||||
border-top:1px solid @color-grey-1-1;
|
||||
border-top:1px solid $color-grey-1-1;
|
||||
|
||||
&:first-child{
|
||||
border-top:0;
|
||||
|
|
@ -57,7 +57,7 @@ max z-index: unknown;
|
|||
}
|
||||
|
||||
&:hover{
|
||||
background:@color-teal-dark;
|
||||
background:$color-teal-dark;
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,14 +69,14 @@ max z-index: unknown;
|
|||
|
||||
.children{
|
||||
position:absolute;
|
||||
z-index:@explorer-z-index + 1;
|
||||
z-index:$explorer-z-index + 1;
|
||||
right:0;
|
||||
top:0;
|
||||
width:4em;
|
||||
text-align:center;
|
||||
height:100%;
|
||||
color:white;
|
||||
background-color:@color-grey-1;
|
||||
background-color:$color-grey-1;
|
||||
cursor:pointer;
|
||||
border-left:1px solid rgba(255,255,255,0.2);
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ max z-index: unknown;
|
|||
}
|
||||
|
||||
&:hover{
|
||||
background:@color-teal-dark;
|
||||
background:$color-teal-dark;
|
||||
}
|
||||
}
|
||||
.dl-subviewopen > .children,
|
||||
|
|
@ -918,8 +918,8 @@ max z-index: unknown;
|
|||
|
||||
/* Transitions */
|
||||
.children{
|
||||
.transition(all 0.2s linear);
|
||||
@include transition(all 0.2s linear);
|
||||
}
|
||||
.dl-menu.dl-menu-toggle {
|
||||
.transition(all 0.3s ease);
|
||||
@include transition(all 0.3s ease);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* user avatars, with fallback to placeholder graphic if no gravatar exists */
|
||||
.avatar{
|
||||
.border-radius(100%);
|
||||
@include border-radius(100%);
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
width:50px;
|
||||
|
|
@ -17,14 +17,14 @@
|
|||
img{
|
||||
z-index:2;
|
||||
position:relative;
|
||||
.border-radius(100%);
|
||||
@include border-radius(100%);
|
||||
border:0;
|
||||
}
|
||||
|
||||
&:before{
|
||||
.border-radius(100%);
|
||||
color:@color-grey-3;
|
||||
border: 2px solid @color-grey-3;
|
||||
@include border-radius(100%);
|
||||
color:$color-grey-3;
|
||||
border: 2px solid $color-grey-3;
|
||||
text-align:center;
|
||||
display:block;
|
||||
width:42px;
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
left:0;
|
||||
}
|
||||
&:hover:before{
|
||||
color:@color-grey-3;
|
||||
border-color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
border-color:$color-grey-3;
|
||||
}
|
||||
|
||||
&.small{
|
||||
|
|
@ -58,8 +58,8 @@
|
|||
border:0;
|
||||
}
|
||||
&:hover:before{
|
||||
color:@color-grey-3;
|
||||
border-color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
border-color:$color-grey-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -103,10 +103,10 @@
|
|||
|
||||
/* makes a link look like regular text */
|
||||
.nolink{
|
||||
color:@color-text-base;
|
||||
color:$color-text-base;
|
||||
|
||||
&:hover{
|
||||
color:@color-teal;
|
||||
color:$color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -114,38 +114,37 @@
|
|||
.status-tag{
|
||||
text-align:center;
|
||||
display:inline-block;
|
||||
.border-radius(2px);
|
||||
@include border-radius(2px);
|
||||
text-transform:uppercase;
|
||||
padding:0em 0.5em;
|
||||
border:1px solid lighten(@color-grey-2,30%);
|
||||
color:lighten(@color-grey-2,30%);
|
||||
border:1px solid lighten($color-grey-2,30%);
|
||||
color:lighten($color-grey-2,30%);
|
||||
-webkit-font-smoothing: auto;
|
||||
font-size:0.80em;
|
||||
margin:0 0.5em;
|
||||
background:white url("@{static-root}bg-dark-diag.svg");
|
||||
background:white url("#{$static-root}bg-dark-diag.svg");
|
||||
|
||||
&.primary{
|
||||
color:@color-grey-2;
|
||||
border:1px solid @color-grey-2;
|
||||
color:$color-grey-2;
|
||||
border:1px solid $color-grey-2;
|
||||
background:white
|
||||
}
|
||||
|
||||
a&:hover,
|
||||
a&.primary:hover{
|
||||
border-color:@color-teal;
|
||||
color:@color-teal;
|
||||
}
|
||||
}
|
||||
a.status-tag:hover,
|
||||
a.status-tag.primary:hover{
|
||||
border-color:$color-teal;
|
||||
color:$color-teal;
|
||||
}
|
||||
|
||||
/* free tagging tags from taggit */
|
||||
.tag{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
padding-right:0.5em;
|
||||
padding:0.2em 0.5em;
|
||||
color:white;
|
||||
line-height:2em;
|
||||
white-space: nowrap;
|
||||
.border-radius(2px);
|
||||
@include border-radius(2px);
|
||||
|
||||
|
||||
&:before{
|
||||
|
|
@ -155,15 +154,17 @@
|
|||
content:"u";
|
||||
padding-right:0.5em;
|
||||
}
|
||||
a&:hover{
|
||||
background-color:@color-teal-darker;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.taglist &{
|
||||
margin-right:0.8em;
|
||||
}
|
||||
}
|
||||
a.tag:hover{
|
||||
background-color:$color-teal-darker;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
.taglist {
|
||||
font-size:0.9em;
|
||||
line-height:2.4em;
|
||||
|
|
@ -7,7 +7,7 @@ form {
|
|||
padding:0;
|
||||
}
|
||||
li{
|
||||
.row();
|
||||
@include row();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ fieldset{
|
|||
}
|
||||
|
||||
legend{
|
||||
.visuallyhidden();
|
||||
@include visuallyhidden();
|
||||
}
|
||||
|
||||
.fields li{
|
||||
|
|
@ -32,7 +32,7 @@ legend{
|
|||
|
||||
label{
|
||||
font-weight:bold;
|
||||
color:@color-grey-1;
|
||||
color:$color-grey-1;
|
||||
font-size:1.1em;
|
||||
display:block;
|
||||
padding:0 0 0.8em 0;
|
||||
|
|
@ -45,15 +45,15 @@ label{
|
|||
}
|
||||
|
||||
input, textarea, select, .richtext, .tagit{
|
||||
.border-radius(6px);
|
||||
.border-box();
|
||||
@include border-radius(6px);
|
||||
@include border-box();
|
||||
font-family:Open Sans,Arial,sans-serif;
|
||||
width:100%;
|
||||
border:1px dashed @color-input-border;
|
||||
border:1px dashed $color-input-border;
|
||||
padding:1.2em;
|
||||
background-color:@color-fieldset-hover;
|
||||
background-color:$color-fieldset-hover;
|
||||
-webkit-appearance: none;
|
||||
color:@color-text-input;
|
||||
color:$color-text-input;
|
||||
font-size:1.2em;
|
||||
font-weight:300;
|
||||
outline:none;
|
||||
|
|
@ -70,14 +70,14 @@ input, textarea, select, .richtext, .tagit{
|
|||
background-color:white;
|
||||
}
|
||||
&:focus{
|
||||
border-color: darken(@color-input-focus, 40%);
|
||||
border-color: darken($color-input-focus, 40%);
|
||||
outline:none;
|
||||
background-color:@color-input-focus;
|
||||
background-color:$color-input-focus;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio],input[type=checkbox]{
|
||||
.border-radius(0);
|
||||
@include border-radius(0);
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
border:0;
|
||||
|
|
@ -91,7 +91,7 @@ input[type=radio]{
|
|||
}
|
||||
|
||||
input[type=radio]:before{
|
||||
.border-radius(100%);
|
||||
@include border-radius(100%);
|
||||
font-family: wagtail;
|
||||
font-style: normal;
|
||||
text-align:center;
|
||||
|
|
@ -105,12 +105,12 @@ input[type=radio]:before{
|
|||
line-height: 1.1em;
|
||||
padding: 4px;
|
||||
background-color: white;
|
||||
color:@color-grey-4;
|
||||
border: 1px solid @color-grey-4;
|
||||
color:$color-grey-4;
|
||||
border: 1px solid $color-grey-4;
|
||||
}
|
||||
input[type=radio]:checked:before{
|
||||
content:"K";
|
||||
color:@color-teal;
|
||||
color:$color-teal;
|
||||
}
|
||||
|
||||
input[type=checkbox]{
|
||||
|
|
@ -133,20 +133,20 @@ input[type=checkbox]:before{
|
|||
width:20px;
|
||||
height:20px;
|
||||
background-color:white;
|
||||
border:1px solid @color-grey-4;
|
||||
color:@color-grey-4;
|
||||
border:1px solid $color-grey-4;
|
||||
color:$color-grey-4;
|
||||
}
|
||||
input[type=checkbox]:checked:before{
|
||||
color:@color-teal;
|
||||
color:$color-teal;
|
||||
}
|
||||
|
||||
/* Core button style */
|
||||
input[type=submit], input[type=reset], input[type=button], .button, button{
|
||||
.border-radius(3px);
|
||||
@include border-radius(3px);
|
||||
width:auto;
|
||||
padding:0.7em 1em;
|
||||
background-color: @color-button;
|
||||
border:1px solid @color-button;
|
||||
background-color: $color-button;
|
||||
border:1px solid $color-button;
|
||||
color:white;
|
||||
text-decoration:none;
|
||||
text-transform:uppercase;
|
||||
|
|
@ -168,8 +168,8 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
}
|
||||
|
||||
&.button-secondary{
|
||||
border:1px solid @color-button;
|
||||
color:@color-button;
|
||||
border:1px solid $color-button;
|
||||
color:$color-button;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
|
|
@ -182,39 +182,39 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
}
|
||||
|
||||
&:hover{
|
||||
background-color: @color-button-hover;
|
||||
background-color: $color-button-hover;
|
||||
color:white;
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
&.yes{
|
||||
background-color: @color-button-yes;
|
||||
border:1px solid @color-button-yes;
|
||||
background-color: $color-button-yes;
|
||||
border:1px solid $color-button-yes;
|
||||
|
||||
&.button-secondary{
|
||||
border:1px solid @color-button-yes;
|
||||
color:@color-button-yes;
|
||||
border:1px solid $color-button-yes;
|
||||
color:$color-button-yes;
|
||||
background-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
color:white;
|
||||
border-color:transparent;
|
||||
background-color: @color-button-yes-hover;
|
||||
background-color: $color-button-yes-hover;
|
||||
}
|
||||
}
|
||||
&.no, &.serious{
|
||||
background-color: @color-button-no;
|
||||
border:1px solid @color-button-no;
|
||||
background-color: $color-button-no;
|
||||
border:1px solid $color-button-no;
|
||||
|
||||
&.button-secondary{
|
||||
border:1px solid @color-button-no;
|
||||
color:@color-button-no;
|
||||
border:1px solid $color-button-no;
|
||||
color:$color-button-no;
|
||||
background-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
color:white;
|
||||
border-color:transparent;
|
||||
background-color: @color-button-no-hover;
|
||||
background-color: $color-button-no-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -256,7 +256,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
}
|
||||
|
||||
.multiple{
|
||||
.transition(max-height 10s ease);
|
||||
@include transition(max-height 10s ease);
|
||||
padding:0;
|
||||
max-height:10000px;
|
||||
max-width:1024px - 50px;
|
||||
|
|
@ -267,8 +267,8 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
background-color:white;
|
||||
padding:1em 1.5em;
|
||||
margin-bottom:1em;
|
||||
border:1px solid lighten(@color-grey-4, 3%); /* really trying to avoid creating more greys, but this one is better than grey 4 or 5 */
|
||||
.border-radius(2px);
|
||||
border:1px solid lighten($color-grey-4, 3%); /* really trying to avoid creating more greys, but this one is better than grey 4 or 5 */
|
||||
@include border-radius(2px);
|
||||
}
|
||||
|
||||
&.moving{
|
||||
|
|
@ -291,10 +291,10 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
top:1em;
|
||||
color:white;
|
||||
overflow:hidden;
|
||||
.border-radius(2px);
|
||||
@include border-radius(2px);
|
||||
|
||||
li{
|
||||
background-color: @color-grey-2;
|
||||
background-color: $color-grey-2;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
margin-right:1px;
|
||||
|
|
@ -312,14 +312,14 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
line-height:2em;
|
||||
}
|
||||
.icon:hover{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
|
||||
&:before{
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
.icon-bin:hover{
|
||||
background-color:@color-red;
|
||||
background-color:$color-red;
|
||||
}
|
||||
.disabled{
|
||||
display:none;
|
||||
|
|
@ -346,7 +346,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
margin:0 0 0.5em 0;
|
||||
}
|
||||
.help{
|
||||
color:@color-grey-2;
|
||||
color:$color-grey-2;
|
||||
}
|
||||
|
||||
/* permanently show checkbox/radio help as they have no focus state */
|
||||
|
|
@ -365,7 +365,7 @@ li.focused > .help{
|
|||
|
||||
.required label:after{
|
||||
content:"*";
|
||||
color:@color-red;
|
||||
color:$color-red;
|
||||
font-weight:bold;
|
||||
display:inline-block;
|
||||
margin-left:0.5em;
|
||||
|
|
@ -375,13 +375,13 @@ li.focused > .help{
|
|||
|
||||
.error-message{
|
||||
margin:0;
|
||||
color:@color-red;
|
||||
color:$color-red;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.error input, .error textarea, .error select, .error .tagit{
|
||||
border-color:@color-red;
|
||||
background-color:@color-input-error-bg;
|
||||
border-color:$color-red;
|
||||
background-color:$color-input-error-bg;
|
||||
}
|
||||
|
||||
/* field sizing */
|
||||
|
|
@ -417,7 +417,7 @@ li.inline .field{
|
|||
|
||||
/* solve gutter issues of inline fields */
|
||||
ul.inline li:first-child, li.inline:first-child{
|
||||
margin-left:-@grid-gutter-width / 2;
|
||||
margin-left:-$grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
|
||||
.chooser {
|
||||
/* We show the 'chosen' state...*/
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
|
||||
input[type=text]{
|
||||
float:left;
|
||||
|
|
@ -445,7 +445,7 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
position:relative;
|
||||
display:block;
|
||||
float:left;
|
||||
color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
line-height:0.85em;
|
||||
font-size:2.5em;
|
||||
margin-right:0.3em;
|
||||
|
|
@ -473,7 +473,7 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
.document-chooser {
|
||||
.chosen{
|
||||
.title{
|
||||
color: @color-grey-1;
|
||||
color: $color-grey-1;
|
||||
display:block;
|
||||
padding-left:3em;
|
||||
}
|
||||
|
|
@ -515,14 +515,14 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
}
|
||||
}
|
||||
.chosen{
|
||||
padding-left:@thumbnail-width;
|
||||
padding-left:$thumbnail-width;
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
}
|
||||
.preview-image{
|
||||
float:left;
|
||||
margin-left:-(@thumbnail-width);
|
||||
margin-left:-($thumbnail-width);
|
||||
margin-right:1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -535,13 +535,12 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
.tagit-choice{
|
||||
border:0;
|
||||
}
|
||||
|
||||
ul& input[type="text"]{
|
||||
padding: 0.2em 0.5em !important; /* having to use important, FML*/
|
||||
}
|
||||
ul& li.tagit-choice-editable{
|
||||
padding:0 23px 0 0 !important; /* having to use important, FML*/
|
||||
}
|
||||
}
|
||||
ul.tagit input[type="text"]{
|
||||
padding: 0.2em 0.5em !important; /* having to use important, FML*/
|
||||
}
|
||||
ul.tagit li.tagit-choice-editable{
|
||||
padding:0 23px 0 0 !important; /* having to use important, FML*/
|
||||
}
|
||||
|
||||
.tagit-close{
|
||||
|
|
@ -554,11 +553,11 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
.ui-icon-close:before{
|
||||
font-family:wagtail;
|
||||
display:block;
|
||||
color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
content:"g";
|
||||
}
|
||||
.ui-icon-close:hover:before{
|
||||
color:@color-red
|
||||
color:$color-red
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -571,9 +570,9 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
margin-bottom:2em;
|
||||
|
||||
&.full-width{
|
||||
.nice-padding();
|
||||
background-color:@color-header-bg;
|
||||
border-bottom:1px solid @color-grey-4;
|
||||
@include nice-padding();
|
||||
background-color:$color-header-bg;
|
||||
border-bottom:1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
.fields{
|
||||
|
|
@ -596,7 +595,7 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
font-family:wagtail;
|
||||
content:"f";
|
||||
font-size:25px;
|
||||
color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
}
|
||||
}
|
||||
.submit{
|
||||
|
|
@ -647,16 +646,16 @@ ul.inline li:first-child, li.inline:first-child{
|
|||
|
||||
/* Transitions */
|
||||
fieldset, input, textarea, select{
|
||||
.transition(background-color 0.2s ease);
|
||||
@include transition(background-color 0.2s ease);
|
||||
}
|
||||
input[type=submit], input[type=reset], input[type=button], .button, button{
|
||||
.transition(~"background-color 0.2s ease, color 0.2s ease");
|
||||
@include transition(background-color 0.2s ease, color 0.2s ease);
|
||||
}
|
||||
.help{
|
||||
.transition(opacity 0.2s ease);
|
||||
@include transition(opacity 0.2s ease);
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.help{
|
||||
opacity:1;
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
@font-face {
|
||||
font-family: "wagtail";
|
||||
src:url("@{css-root}fonts/wagtail.eot");
|
||||
src:url("@{css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
|
||||
url("@{css-root}fonts/wagtail.ttf") format("truetype"),
|
||||
url("@{css-root}fonts/wagtail.svg#wagtail") format("svg"),
|
||||
url("@{css-root}fonts/wagtail.woff") format("woff");
|
||||
src:url("#{$css-root}fonts/wagtail.eot");
|
||||
src:url("#{$css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
|
||||
url("#{$css-root}fonts/wagtail.ttf") format("truetype"),
|
||||
url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
|
||||
url("#{$css-root}fonts/wagtail.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -12,12 +12,12 @@
|
|||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
src: url("@{css-root}fonts/wagtail.svg#wagtail") format("svg");
|
||||
src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg");
|
||||
}
|
||||
}
|
||||
|
||||
.icon.teal{
|
||||
color:@color-teal;
|
||||
color:$color-teal;
|
||||
}
|
||||
.icon.white{
|
||||
color:white
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
.icon-horizontalrule{
|
||||
&:before{
|
||||
font-family: Open Sans,Arial,sans-serif !important; // FML
|
||||
content:"—";
|
||||
content:"-";
|
||||
}
|
||||
}
|
||||
.icon-password:before{
|
||||
|
|
@ -1,30 +1,22 @@
|
|||
/* General listings, like for pages, images or snippets */
|
||||
ul.listing{
|
||||
.unlist();
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
.listing{
|
||||
margin-bottom:2em;
|
||||
ul&{
|
||||
border-top:1px dashed @color-input-border;
|
||||
margin-bottom:2em;
|
||||
}
|
||||
ul{
|
||||
.unlist();
|
||||
@include unlist();
|
||||
}
|
||||
> li{
|
||||
padding:1em 0;
|
||||
border-bottom:1px dashed @color-input-border;
|
||||
border-bottom:1px dashed $color-input-border;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin:0;
|
||||
font-size:0.95em;
|
||||
}
|
||||
|
||||
table&{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
td, th{
|
||||
padding:1.5em 1em;
|
||||
|
|
@ -35,8 +27,8 @@ ul.listing{
|
|||
}
|
||||
|
||||
thead{
|
||||
color: @color-grey-2;
|
||||
border-bottom:1px solid @color-grey-4;
|
||||
color: $color-grey-2;
|
||||
border-bottom:1px solid $color-grey-4;
|
||||
|
||||
th{
|
||||
font-size:0.85em;
|
||||
|
|
@ -69,9 +61,9 @@ ul.listing{
|
|||
}
|
||||
.dropdown:hover,
|
||||
.dropdown.open{
|
||||
.box-shadow(0px 0px 3px 0 rgba(0,0,0,0.2));
|
||||
@include box-shadow(0px 0px 3px 0 rgba(0,0,0,0.2));
|
||||
background-color:white;
|
||||
margin-left:-@grid-gutter-width * 2;
|
||||
margin-left:-$grid-gutter-width * 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,20 +76,20 @@ ul.listing{
|
|||
margin-bottom:-3em; /* this negates the padding added to the bottom of .content */
|
||||
}
|
||||
&.full-width th{
|
||||
background-color:@color-thead-bg;
|
||||
background-color:$color-thead-bg;
|
||||
}
|
||||
|
||||
.table-headers{
|
||||
border-bottom:1px solid @color-grey-4
|
||||
border-bottom:1px solid $color-grey-4
|
||||
}
|
||||
|
||||
tbody{
|
||||
border-bottom:1px dashed @color-input-border;
|
||||
border-bottom:1px dashed $color-input-border;
|
||||
}
|
||||
tbody tr{
|
||||
border-top:1px dashed @color-input-border;
|
||||
border-top:1px dashed $color-input-border;
|
||||
&:first-child{
|
||||
border-top:1px dashed @color-input-border;
|
||||
border-top:1px dashed $color-input-border;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -107,8 +99,11 @@ ul.listing{
|
|||
&.full-width tbody tr:hover{
|
||||
background-color:#FDFDFD;
|
||||
}
|
||||
&.chooser tr.can-choose a{
|
||||
@include transition(none);
|
||||
}
|
||||
&.chooser tr.can-choose:hover{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
color:white;
|
||||
|
||||
a,a:hover{
|
||||
|
|
@ -127,7 +122,7 @@ ul.listing{
|
|||
.divider{
|
||||
text-transform:uppercase;
|
||||
font-size:0.8em;
|
||||
background-color:@color-grey-3;
|
||||
background-color:$color-grey-3;
|
||||
td{
|
||||
|
||||
padding-top:0.5em;
|
||||
|
|
@ -140,13 +135,13 @@ ul.listing{
|
|||
}
|
||||
|
||||
.index {
|
||||
background-color:@color-grey-4;
|
||||
background-color:$color-grey-4;
|
||||
|
||||
.title h2{
|
||||
font-size:1.2em;
|
||||
opacity:1;
|
||||
a{
|
||||
.transition(opacity 0.2s ease);
|
||||
@include transition(opacity 0.2s ease);
|
||||
}
|
||||
a:hover{
|
||||
opacity:0.7;
|
||||
|
|
@ -159,22 +154,22 @@ ul.listing{
|
|||
margin-top:1.8em;
|
||||
|
||||
li{
|
||||
border-color:@color-teal-darker;
|
||||
border-color:$color-teal-darker;
|
||||
}
|
||||
a{
|
||||
color:white;
|
||||
|
||||
&:hover{
|
||||
color:@color-teal-dark;
|
||||
color:$color-teal-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
background-color:@color-teal-darker;
|
||||
background-color:$color-teal-darker;
|
||||
|
||||
&:hover{
|
||||
color:white;
|
||||
background:@color-teal-dark;
|
||||
background:$color-teal-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -182,7 +177,7 @@ ul.listing{
|
|||
|
||||
.page-explorer & .index{
|
||||
color:white;
|
||||
background-color:@color-header-bg;
|
||||
background-color:$color-header-bg;
|
||||
|
||||
.title{
|
||||
padding-top:1.3em;
|
||||
|
|
@ -212,7 +207,7 @@ ul.listing{
|
|||
position:relative;
|
||||
}
|
||||
label span{
|
||||
.visuallyhidden();
|
||||
@include visuallyhidden();
|
||||
}
|
||||
input{
|
||||
margin-top:3px;
|
||||
|
|
@ -226,7 +221,7 @@ ul.listing{
|
|||
margin:0;
|
||||
font-size:1.1em;
|
||||
font-weight:700;
|
||||
color:@color-grey-2;
|
||||
color:$color-grey-2;
|
||||
line-height:1.5em;
|
||||
|
||||
a{
|
||||
|
|
@ -234,7 +229,7 @@ ul.listing{
|
|||
text-decoration:none;
|
||||
|
||||
&:hover{
|
||||
color:@color-link;
|
||||
color:$color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -252,7 +247,7 @@ ul.listing{
|
|||
li{
|
||||
display:inline-block;
|
||||
padding:0 0.5em 0 0.8em;
|
||||
border-left:1px solid @color-grey-3;
|
||||
border-left:1px solid $color-grey-3;
|
||||
line-height:1em;
|
||||
|
||||
&:first-child{
|
||||
|
|
@ -277,14 +272,14 @@ ul.listing{
|
|||
.children,
|
||||
.no-children{
|
||||
padding:0 !important;
|
||||
border-left:1px dashed @color-input-border;
|
||||
border-left:1px dashed $color-input-border;
|
||||
&:hover{
|
||||
background-color:@color-grey-5;
|
||||
background-color:$color-grey-5;
|
||||
}
|
||||
}
|
||||
.children a,
|
||||
.no-children a{
|
||||
color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
display:block;
|
||||
padding:2em 0;
|
||||
}
|
||||
|
|
@ -313,7 +308,7 @@ ul.listing{
|
|||
font-size:15px;
|
||||
}
|
||||
th.ord a:hover:before{
|
||||
color:@color-teal;
|
||||
color:$color-teal;
|
||||
}
|
||||
.handle{
|
||||
cursor:move;
|
||||
|
|
@ -321,16 +316,16 @@ ul.listing{
|
|||
|
||||
&:before{
|
||||
font-size:20px;
|
||||
color:@color-grey-3;
|
||||
color:$color-grey-3;
|
||||
width:1em;
|
||||
}
|
||||
&:hover:before{
|
||||
color:@color-text-base;
|
||||
color:$color-text-base;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-sortable-helper{
|
||||
border:1px dashed @color-input-border;
|
||||
border:1px dashed $color-input-border;
|
||||
border-width:1px 0;
|
||||
|
||||
|
||||
|
|
@ -347,10 +342,10 @@ ul.listing{
|
|||
}
|
||||
.dropzone{
|
||||
height:80px;
|
||||
background-color:@color-grey-1;
|
||||
background-color:$color-grey-1;
|
||||
|
||||
&:hover{
|
||||
background-color:@color-grey-1;
|
||||
background-color:$color-grey-1;
|
||||
}
|
||||
td{
|
||||
padding: 0 !important;
|
||||
|
|
@ -359,7 +354,7 @@ ul.listing{
|
|||
|
||||
|
||||
td.children:hover{
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
|
||||
a:before{
|
||||
color:white;
|
||||
|
|
@ -374,6 +369,13 @@ ul.listing{
|
|||
opacity:0.5;
|
||||
}
|
||||
}
|
||||
ul.listing{
|
||||
border-top:1px dashed $color-input-border;
|
||||
margin-bottom:2em;
|
||||
}
|
||||
table.listing{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
text-align:center;
|
||||
|
|
@ -381,7 +383,7 @@ ul.listing{
|
|||
margin:0;
|
||||
}
|
||||
ul{
|
||||
.unlist();
|
||||
@include unlist();
|
||||
}
|
||||
ul{
|
||||
margin-top:-1.7em;
|
||||
|
|
@ -403,14 +405,14 @@ ul.listing{
|
|||
padding:2em 50px 0 50px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.listing{
|
||||
&.horiz > li{
|
||||
float:left;
|
||||
}
|
||||
&.images {
|
||||
.clearfix();
|
||||
border: 1px solid @color-grey-4;
|
||||
@include clearfix();
|
||||
border: 1px solid $color-grey-4;
|
||||
border-width:0 0 0 1px !important;
|
||||
|
||||
> li{
|
||||
|
|
@ -419,7 +421,7 @@ ul.listing{
|
|||
height:220px;
|
||||
text-align:center;
|
||||
margin-top:-1px;
|
||||
border:1px solid @color-grey-4;
|
||||
border:1px solid $color-grey-4;
|
||||
border-width:1px 1px 1px 0px;
|
||||
|
||||
.image{
|
||||
|
|
@ -445,7 +447,7 @@ ul.listing{
|
|||
background-color:#FDFDFD;
|
||||
|
||||
img{
|
||||
border-color:@color-teal;
|
||||
border-color:$color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -467,11 +469,11 @@ ul.listing{
|
|||
border-color:transparent;
|
||||
}
|
||||
.no-children a{
|
||||
color:@color-teal;
|
||||
color:$color-teal;
|
||||
opacity:0;
|
||||
}
|
||||
.no-children:hover{
|
||||
border-color:@color-input-border;
|
||||
border-color:$color-input-border;
|
||||
a{opacity:1;}
|
||||
}
|
||||
|
||||
|
|
@ -493,13 +495,13 @@ ul.listing{
|
|||
/* Transitions */
|
||||
.listing {
|
||||
thead .dropdown ul{
|
||||
.transition(none);
|
||||
@include transition(none);
|
||||
}
|
||||
.children, .no-children{
|
||||
.transition(background-color 0.2s ease);
|
||||
@include transition(background-color 0.2s ease);
|
||||
}
|
||||
.children a,
|
||||
.no-children a{
|
||||
.transition(all 0.2s ease);
|
||||
@include transition(all 0.2s ease);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
.messages{
|
||||
position:relative;
|
||||
z-index:5;
|
||||
background-color:$color-grey-1;
|
||||
|
||||
ul{
|
||||
@include unlist();
|
||||
padding-left:10px;
|
||||
position:relative;
|
||||
top:-100px;
|
||||
opacity:0;
|
||||
}
|
||||
li{
|
||||
@include nice-padding;
|
||||
padding-top:1.3em;
|
||||
padding-bottom:1.3em;
|
||||
color:white;
|
||||
}
|
||||
.error{
|
||||
background-color:$color-red;
|
||||
}
|
||||
.warning{
|
||||
background-color:$color-orange;
|
||||
}
|
||||
.success{
|
||||
background-color:$color-teal-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.messages.new ul{
|
||||
@include transition-immediate(none);
|
||||
top:-100px;
|
||||
}
|
||||
|
||||
.ready .messages ul,
|
||||
.messages.appear ul{
|
||||
@include transition-immediate(top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease);
|
||||
opacity:1;
|
||||
top:0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.messages ul{
|
||||
margin-left:-15px;
|
||||
|
||||
li{
|
||||
padding-left:$desktop-nice-padding;
|
||||
padding-right:$desktop-nice-padding;
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
border-top: 15px solid #000;
|
||||
border-left: 15px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@zindex-modal-background: 500;
|
||||
$zindex-modal-background: 500;
|
||||
|
||||
// Kill the scroll on the body
|
||||
.modal-open {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
.border-box();
|
||||
@include border-box();
|
||||
display: none;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -21,17 +21,17 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-modal-background;
|
||||
z-index: $zindex-modal-background;
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
.border-box();
|
||||
@include border-box();
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
padding: 0px;
|
||||
z-index: (@zindex-modal-background + 10);
|
||||
z-index: ($zindex-modal-background + 10);
|
||||
height:90%;
|
||||
width:85%;
|
||||
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
.border-box();
|
||||
.border-radius(3px);
|
||||
@include border-box();
|
||||
@include border-radius(3px);
|
||||
width:98.70%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (@zindex-modal-background - 10);
|
||||
z-index: ($zindex-modal-background - 10);
|
||||
background-color: black;
|
||||
// Fade for backdrop
|
||||
&.fade { opacity:0; }
|
||||
|
|
@ -93,14 +93,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile) {
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
.modal-dialog {
|
||||
padding:0px 0 2em @menu-width;
|
||||
padding:0px 0 2em $menu-width;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: @breakpoint-desktop-larger){
|
||||
@media screen and (min-width: $breakpoint-desktop-larger){
|
||||
.modal-dialog {
|
||||
max-width:@breakpoint-desktop-larger;
|
||||
max-width:$breakpoint-desktop-larger;
|
||||
padding:0 0 2em 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.tab-nav{
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
padding:0;
|
||||
|
||||
li{
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
}
|
||||
}
|
||||
a{
|
||||
.box-shadow(inset 0px -2px 3px 0 rgba(0,0,0,0.1));
|
||||
.transition(border-color 0.2s ease);
|
||||
background-color:@color-grey-4;
|
||||
@include transition(border-color 0.2s ease);
|
||||
@include box-shadow(inset 0px -2px 3px 0 rgba(0,0,0,0.1));
|
||||
background-color:$color-grey-4;
|
||||
outline:none;
|
||||
line-height:3em;
|
||||
text-transform:uppercase;
|
||||
|
|
@ -25,29 +25,30 @@
|
|||
text-decoration:none;
|
||||
display:block;
|
||||
padding:0 20px;
|
||||
color:@color-grey-2;
|
||||
border-top:0.3em solid darken(@color-grey-4,0%);
|
||||
color:$color-grey-2;
|
||||
border-top:0.3em solid $color-grey-4;
|
||||
border-bottom:1px solid transparent;
|
||||
|
||||
&:hover{
|
||||
color:inherit;
|
||||
border-top-color:@color-grey-2;
|
||||
border-top-color:$color-grey-2;
|
||||
}
|
||||
}
|
||||
|
||||
a.errors{
|
||||
color:@color-red !important;
|
||||
color:$color-red !important;
|
||||
|
||||
&:after{
|
||||
.border-radius(50%);
|
||||
.box-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
|
||||
@include border-radius(50%);
|
||||
@include box-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
|
||||
position:absolute;
|
||||
right:-0.5em;
|
||||
top:-0.5em;
|
||||
z-index:5;
|
||||
min-width:1em;
|
||||
color:white;
|
||||
background:@color-red;
|
||||
border:2px solid darken(@color-red,20%);
|
||||
background:$color-red;
|
||||
border:2px solid darken($color-red,20%);
|
||||
content:attr(data-count);
|
||||
padding:0 0.3em;
|
||||
line-height:1.4em;
|
||||
|
|
@ -57,15 +58,15 @@
|
|||
}
|
||||
|
||||
li.active a{
|
||||
.box-shadow(none);
|
||||
color:@color-grey-1;
|
||||
@include box-shadow(none);
|
||||
color:$color-grey-1;
|
||||
background-color:white;
|
||||
border-top:0.3em solid @color-grey-1;
|
||||
border-top:0.3em solid $color-grey-1;
|
||||
}
|
||||
|
||||
/* For cases where tab-nav should merge with header */
|
||||
&.merged{
|
||||
background-color:@color-header-bg;
|
||||
background-color:$color-header-bg;
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.tab-nav li{
|
||||
width:auto;
|
||||
padding:0;
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
@import "grid.less";
|
||||
@import "variables.scss";
|
||||
@import "mixins.scss";
|
||||
@import "grid.scss";
|
||||
|
||||
@import "components/explorer.less";
|
||||
@import "components/icons.less";
|
||||
@import "components/tabs.less";
|
||||
@import "components/dropdowns.less";
|
||||
@import "components/modals.less";
|
||||
@import "components/forms.less";
|
||||
@import "components/listing.less";
|
||||
@import "components/messages.less";
|
||||
@import "components/formatters.less";
|
||||
@import "components/explorer.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/tabs.scss";
|
||||
@import "components/dropdowns.scss";
|
||||
@import "components/modals.scss";
|
||||
@import "components/forms.scss";
|
||||
@import "components/listing.scss";
|
||||
@import "components/messages.scss";
|
||||
@import "components/formatters.scss";
|
||||
|
||||
html{
|
||||
background:@color-grey-4;
|
||||
background:$color-grey-4;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ body{
|
|||
font-family:Open Sans,Arial,sans-serif;
|
||||
font-size:80%;
|
||||
line-height:1.5em;
|
||||
color:@color-text-base;
|
||||
color:$color-text-base;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ h1{
|
|||
line-height:1.3em;
|
||||
font-size:1.5em;
|
||||
text-transform:uppercase;
|
||||
color:@color-grey-1;
|
||||
color:$color-grey-1;
|
||||
font-weight:600;
|
||||
|
||||
span{
|
||||
|
|
@ -56,7 +56,7 @@ h2{
|
|||
font-size:1.3em;
|
||||
font-family:Open Sans;
|
||||
font-weight:600;
|
||||
color:@color-grey-2;
|
||||
color:$color-grey-2;
|
||||
|
||||
.page-explorer &{
|
||||
text-transform:none;
|
||||
|
|
@ -64,24 +64,24 @@ h2{
|
|||
}
|
||||
a{
|
||||
outline:none;
|
||||
color:@color-link;
|
||||
color:$color-link;
|
||||
text-decoration:none;
|
||||
|
||||
&:hover{
|
||||
color:@color-link-hover;
|
||||
color:$color-link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
code{
|
||||
.box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
|
||||
background-color:@color-fieldset-hover;
|
||||
@include box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
|
||||
background-color:$color-fieldset-hover;
|
||||
padding:2px 5px;
|
||||
}
|
||||
|
||||
kbd{
|
||||
.border-radius(3px);
|
||||
@include border-radius(3px);
|
||||
font-family:Open Sans, Arial, sans-serif;
|
||||
border:1px solid @color-grey-2;
|
||||
border:1px solid $color-grey-2;
|
||||
border-color:rgba(0,0,0,0.2);
|
||||
padding:0.3em 0.5em;
|
||||
}
|
||||
|
|
@ -89,11 +89,11 @@ kbd{
|
|||
img{
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
border: 3px solid @color-grey-4;
|
||||
border: 3px solid $color-grey-4;
|
||||
}
|
||||
|
||||
.browsermessage{
|
||||
background-color:@color-red;
|
||||
background-color:$color-red;
|
||||
color:white;
|
||||
padding:1em 2em;
|
||||
margin:0;
|
||||
|
|
@ -109,13 +109,13 @@ img{
|
|||
}
|
||||
|
||||
.wrapper{
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.nav-wrapper{
|
||||
.box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5));
|
||||
@include box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5));
|
||||
position:relative;
|
||||
background: @color-grey-1;
|
||||
background: $color-grey-1;
|
||||
margin-left: -100%;
|
||||
width: 180px;
|
||||
float: left;
|
||||
|
|
@ -173,15 +173,15 @@ img{
|
|||
}
|
||||
|
||||
ul{
|
||||
border-top:1px solid @color-grey-1-1;
|
||||
border-top:1px solid $color-grey-1-1;
|
||||
}
|
||||
|
||||
li{
|
||||
border-bottom:1px solid @color-grey-1-1;
|
||||
border-bottom:1px solid $color-grey-1-1;
|
||||
position:relative;
|
||||
|
||||
&.selected{
|
||||
background-color:@color-grey-1;
|
||||
background-color:$color-grey-1;
|
||||
}
|
||||
|
||||
.menu-snippets &.menu-snippets,
|
||||
|
|
@ -191,7 +191,7 @@ img{
|
|||
.menu-images &.menu-images,
|
||||
.menu-search &.menu-search,
|
||||
.menu-explorer &.menu-explorer{
|
||||
background:darken(@color-grey-1, 10%);
|
||||
background:darken($color-grey-1, 10%);
|
||||
|
||||
a{
|
||||
color:white;
|
||||
|
|
@ -240,7 +240,7 @@ img{
|
|||
}
|
||||
font-size:0.8em;
|
||||
padding:0.2em 1.2em;
|
||||
background-color:@color-grey-1-1;
|
||||
background-color:$color-grey-1-1;
|
||||
}
|
||||
.more{
|
||||
border:0;
|
||||
|
|
@ -255,7 +255,7 @@ img{
|
|||
position:relative;
|
||||
|
||||
.fields{
|
||||
.transition(background-color 0.2s ease);
|
||||
@include transition(background-color 0.2s ease);
|
||||
border:0;
|
||||
li{
|
||||
border:0;
|
||||
|
|
@ -272,7 +272,7 @@ img{
|
|||
}
|
||||
}
|
||||
.submit{
|
||||
.visuallyhidden();
|
||||
@include visuallyhidden();
|
||||
}
|
||||
label{
|
||||
font-weight:normal;
|
||||
|
|
@ -306,14 +306,14 @@ img{
|
|||
display:none;
|
||||
}
|
||||
.fields{
|
||||
background-color:@color-grey-4;
|
||||
background-color:$color-grey-4;
|
||||
}
|
||||
.field{
|
||||
color: @color-grey-1;
|
||||
color: $color-grey-1;
|
||||
}
|
||||
input{
|
||||
margin-top:0px;
|
||||
color:@color-grey-1;
|
||||
color:$color-grey-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -334,16 +334,16 @@ img{
|
|||
height:100%; /* this has no effect on desktop, but on mobile it helps aesthetics of menu popout action */
|
||||
float: right;
|
||||
position: relative;
|
||||
background-color:@color-grey-4;
|
||||
border-bottom:1px solid @color-grey-3;
|
||||
background-color:$color-grey-4;
|
||||
border-bottom:1px solid $color-grey-3;
|
||||
|
||||
/* transform: translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);*/
|
||||
}
|
||||
.content{
|
||||
.row();
|
||||
@include row();
|
||||
background:white;
|
||||
border-top:0px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
|
||||
border-top:0px solid $color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
|
||||
padding-bottom:4em;
|
||||
position:relative; /* yuk. necessary for positions for jquery ui widgets */
|
||||
}
|
||||
|
|
@ -398,7 +398,7 @@ header{
|
|||
padding-top:1em;
|
||||
padding-bottom:1em;
|
||||
padding-left: 4em !important;
|
||||
background-color: @color-header-bg;
|
||||
background-color: $color-header-bg;
|
||||
margin-bottom:2em;
|
||||
color:white;
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ header{
|
|||
}
|
||||
|
||||
.search-bar input{
|
||||
.border-radius(3px);
|
||||
@include border-radius(3px);
|
||||
width:auto;
|
||||
border-width:0;
|
||||
}
|
||||
|
|
@ -450,9 +450,9 @@ header{
|
|||
}
|
||||
*/
|
||||
.button{
|
||||
background-color:@color-teal-darker;
|
||||
background-color:$color-teal-darker;
|
||||
&:hover{
|
||||
background-color:@color-teal-dark;
|
||||
background-color:$color-teal-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -464,11 +464,11 @@ header{
|
|||
|
||||
|
||||
footer{
|
||||
.row();
|
||||
.border-radius(3px 3px 0 0);
|
||||
.box-shadow(0px 0px 2px rgba(255,255,255,0.5));
|
||||
.transition(bottom 0.5s ease 1s);
|
||||
background: @color-grey-1;
|
||||
@include row();
|
||||
@include border-radius(3px 3px 0 0);
|
||||
@include box-shadow(0px 0px 2px rgba(255,255,255,0.5));
|
||||
@include transition(bottom 0.5s ease 1s);
|
||||
background: $color-grey-1;
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
padding:0.5em;
|
||||
|
|
@ -477,7 +477,7 @@ footer{
|
|||
color:white;
|
||||
|
||||
ul{
|
||||
.unlist();
|
||||
@include unlist();
|
||||
}
|
||||
li{
|
||||
float:left;
|
||||
|
|
@ -485,7 +485,7 @@ footer{
|
|||
|
||||
.actions{
|
||||
width:250px;
|
||||
margin-right:@grid-gutter-width/2;
|
||||
margin-right:$grid-gutter-width/2;
|
||||
|
||||
.button{
|
||||
padding-top:1em;
|
||||
|
|
@ -496,13 +496,13 @@ footer{
|
|||
.meta{
|
||||
float:right;
|
||||
text-align:right;
|
||||
padding-right:@grid-gutter-width/2;
|
||||
padding-right:$grid-gutter-width/2;
|
||||
line-height:3.5em;
|
||||
font-size:0.85em;
|
||||
|
||||
p{
|
||||
margin:0;
|
||||
margin-right:@grid-gutter-width;
|
||||
margin-right:$grid-gutter-width;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -511,19 +511,19 @@ footer{
|
|||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: @color-grey-1;
|
||||
background: $color-grey-1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: @color-grey-2;
|
||||
background: $color-grey-2;
|
||||
-webkit-border-radius: 1ex;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: @color-grey-1;
|
||||
background: $color-grey-1;
|
||||
}
|
||||
|
||||
.breadcrumb{
|
||||
.unlist();
|
||||
.clearfix();
|
||||
@include unlist();
|
||||
@include clearfix();
|
||||
|
||||
padding-top:0.2em;
|
||||
font-size:0.85em;
|
||||
|
|
@ -532,7 +532,7 @@ footer{
|
|||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
background: @color-teal-darker;
|
||||
background: $color-teal-darker;
|
||||
padding: 0.4em 1em 0.4em 2em;
|
||||
position: relative;
|
||||
margin: 0 4px 4px 0;
|
||||
|
|
@ -560,7 +560,7 @@ footer{
|
|||
border-bottom: 1.2em solid transparent;
|
||||
}
|
||||
&:after {
|
||||
border-left: 1em solid @color-teal-darker;
|
||||
border-left: 1em solid $color-teal-darker;
|
||||
position: absolute; right: -0.9em; top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -569,15 +569,15 @@ footer{
|
|||
position: absolute; left: 0; top: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: @color-teal-dark;
|
||||
background: $color-teal-dark;
|
||||
}
|
||||
&:hover:after {
|
||||
border-left-color: @color-teal-dark;
|
||||
border-left-color: $color-teal-dark;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding:0.4em;
|
||||
.border-radius(3px 0px 0px 3px);
|
||||
@include border-radius(3px 0px 0px 3px);
|
||||
|
||||
&:before{
|
||||
display:none;
|
||||
|
|
@ -597,19 +597,19 @@ footer{
|
|||
|
||||
header & li{
|
||||
&:before {
|
||||
border-left: 1em solid @color-header-bg;
|
||||
border-left: 1em solid $color-header-bg;
|
||||
position: absolute; left: 0; top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row{
|
||||
.clearfix();
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.nice-padding{
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
padding-left:$mobile-nice-padding;
|
||||
padding-right:$mobile-nice-padding;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -628,58 +628,58 @@ footer, .logo{
|
|||
}
|
||||
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.col1{
|
||||
.column(1);
|
||||
@include column(1);
|
||||
}
|
||||
.col2{
|
||||
.column(2);
|
||||
@include column(2);
|
||||
}
|
||||
.col3{
|
||||
.column(3);
|
||||
@include column(3);
|
||||
}
|
||||
.col4{
|
||||
.column(4);
|
||||
@include column(4);
|
||||
}
|
||||
.col5{
|
||||
.column(5);
|
||||
@include column(5);
|
||||
}
|
||||
.col6{
|
||||
.column(6);
|
||||
@include column(6);
|
||||
}
|
||||
.col7{
|
||||
.column(7);
|
||||
@include column(7);
|
||||
}
|
||||
.col8{
|
||||
.column(8);
|
||||
@include column(8);
|
||||
}
|
||||
.col9{
|
||||
.column(9);
|
||||
@include column(9);
|
||||
}
|
||||
.col10{
|
||||
.column(10);
|
||||
@include column(10);
|
||||
}
|
||||
.col11{
|
||||
.column(11);
|
||||
@include column(11);
|
||||
}
|
||||
.col12{
|
||||
.column(12);
|
||||
@include column(12);
|
||||
}
|
||||
|
||||
.row{
|
||||
.row();
|
||||
@include row();
|
||||
}
|
||||
.row-flush{
|
||||
.row-flush();
|
||||
@include row-flush();
|
||||
}
|
||||
|
||||
.nice-padding{
|
||||
padding-left:50px;
|
||||
padding-right:50px;
|
||||
padding-left:$desktop-nice-padding;
|
||||
padding-right:$desktop-nice-padding;
|
||||
}
|
||||
|
||||
body{
|
||||
margin-left:@menu-width;
|
||||
margin-left:$menu-width;
|
||||
}
|
||||
|
||||
.browsermessage{
|
||||
|
|
@ -696,14 +696,14 @@ footer, .logo{
|
|||
position:absolute;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:@menu-width;
|
||||
margin-left: -@menu-width;
|
||||
width:$menu-width;
|
||||
margin-left: -$menu-width;
|
||||
|
||||
|
||||
.inner{
|
||||
height:100%;
|
||||
position:fixed;
|
||||
width:@menu-width;
|
||||
width:$menu-width;
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
|
|
@ -737,9 +737,9 @@ footer, .logo{
|
|||
|
||||
.footer{
|
||||
padding-top:1em;
|
||||
background-color:@color-grey-1;
|
||||
background-color:$color-grey-1;
|
||||
position:fixed;
|
||||
width:@menu-width - 7;
|
||||
width:$menu-width - 7;
|
||||
bottom:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
|
@ -753,7 +753,7 @@ footer, .logo{
|
|||
padding:0 0 1em 0;
|
||||
}
|
||||
&:hover{
|
||||
.box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
|
||||
@include box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -777,17 +777,17 @@ footer, .logo{
|
|||
-webkit-transform: none;
|
||||
}
|
||||
.nav-wrapper{
|
||||
margin-left: -@menu-width;
|
||||
margin-left: -$menu-width;
|
||||
}
|
||||
.nav-wrapper,
|
||||
.nav-main{
|
||||
width:@menu-width;
|
||||
width:$menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
body.explorer-open {
|
||||
.nav-wrapper{
|
||||
width:@menu-width;
|
||||
width:$menu-width;
|
||||
}
|
||||
.explorer:before{
|
||||
display:none;
|
||||
|
|
@ -824,16 +824,16 @@ footer, .logo{
|
|||
}
|
||||
}
|
||||
.col3{
|
||||
.col3();
|
||||
@include column(3);
|
||||
}
|
||||
.col3.addbutton{
|
||||
width:auto;
|
||||
}
|
||||
.col6{
|
||||
.col6();
|
||||
@include column(6);
|
||||
}
|
||||
.col9{
|
||||
.col9();
|
||||
@include column(9);
|
||||
}
|
||||
}
|
||||
footer{
|
||||
|
|
@ -851,7 +851,7 @@ footer, .logo{
|
|||
}
|
||||
}
|
||||
.explorer {
|
||||
z-index:@explorer-z-index;
|
||||
z-index:$explorer-z-index;
|
||||
}
|
||||
.nav-wrapper{
|
||||
z-index:auto; /* allows overspill of messages banner onto left menu, but also explorer to spill over main content */
|
||||
|
|
@ -860,14 +860,14 @@ footer, .logo{
|
|||
|
||||
@media screen and (min-width: 90em){
|
||||
.wrapper{
|
||||
max-width:@breakpoint-desktop-larger;
|
||||
max-width:$breakpoint-desktop-larger;
|
||||
}
|
||||
.nav-wrapper{
|
||||
.box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
|
||||
@include box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
|
||||
|
||||
.inner{
|
||||
background:@color-grey-1;
|
||||
.box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
|
||||
background:$color-grey-1;
|
||||
@include box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -882,11 +882,11 @@ footer, .logo{
|
|||
#nav-toggle,
|
||||
footer,
|
||||
.logo{
|
||||
.transition(all 0.2s ease);
|
||||
@include transition(all 0.2s ease);
|
||||
}
|
||||
.nav-wrapper{
|
||||
.transition-transform(0.2s ease);
|
||||
@include transition-transform(0.2s ease);
|
||||
}
|
||||
.nav-main a, a{
|
||||
.transition(~"color 0.2s ease, background-color 0.2s ease");
|
||||
@include transition(color 0.2s ease, background-color 0.2s ease);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
79
wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
Normal file
79
wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* Utility variable - you should never need to modify this */
|
||||
$gridsystem_width: $grid-columns * 1px;
|
||||
$padding: $grid-gutter-width*0.5;
|
||||
|
||||
/* Ensure grid columns are set to border-boxes. This is essential */
|
||||
@mixin border-box(){
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@mixin content-box(){
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* Our row container */
|
||||
@mixin row($padding:0){
|
||||
@include clearfix();
|
||||
@include border-box();
|
||||
|
||||
display:block;
|
||||
/*max-width: $grid-max-width; NO MAX WIDTH*/
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $padding;
|
||||
padding-left: $padding;
|
||||
}
|
||||
|
||||
@mixin row-flush(){
|
||||
margin-left:-$padding;
|
||||
margin-right:-$padding;
|
||||
}
|
||||
|
||||
/* Our column container */
|
||||
@mixin column($x, $padding:$padding, $grid-columns:$grid-columns){
|
||||
@include border-box();
|
||||
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 100%*($x / $grid-columns);
|
||||
padding-right: $padding;
|
||||
padding-left: $padding;
|
||||
}
|
||||
|
||||
@mixin table-column($x, $padding:$padding, $grid-columns:$grid-columns){
|
||||
@include border-box();
|
||||
|
||||
width: 100%*($x / $grid-columns);
|
||||
}
|
||||
|
||||
/* Push adds left padding */
|
||||
@mixin push($offset:1, $grid-columns:$grid-columns) {
|
||||
margin-left: 100%*($offset / $grid-columns);
|
||||
}
|
||||
@mixin push-padding($offset:1, $grid-columns:$grid-columns) {
|
||||
padding-left:100%*($offset / $grid-columns);
|
||||
}
|
||||
|
||||
/* Pull adds right padding */
|
||||
@mixin pull($offset:1, $grid-columns:$grid-columns) {
|
||||
margin-right: 100%*($offset / $grid-columns);
|
||||
}
|
||||
@mixin pull-padding($offset:1, $grid-columns:$grid-columns){
|
||||
padding-right: 100%*($offset / $grid-columns);
|
||||
}
|
||||
|
||||
/* only used in places where padding not applied to same elements as row or row-flush
|
||||
* most of the time this class should be applied directly to the html elements */
|
||||
@mixin nice-padding{
|
||||
padding-left: $mobile-nice-padding;
|
||||
padding-right: $mobile-nice-padding;
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
padding-left: $desktop-nice-padding;
|
||||
padding-right: $desktop-nice-padding;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
@import "../grid.less";
|
||||
@import "../variables.scss";
|
||||
@import "../mixins.scss";
|
||||
@import "../grid.scss";
|
||||
|
||||
h1{
|
||||
font-weight:300;
|
||||
|
|
@ -25,24 +25,24 @@ header{
|
|||
}
|
||||
|
||||
.summary{
|
||||
.row();
|
||||
background-color:@color-grey-5;
|
||||
@include row();
|
||||
background-color:$color-grey-5;
|
||||
margin-bottom:2em;
|
||||
|
||||
h2{
|
||||
.visuallyhidden();
|
||||
@include visuallyhidden();
|
||||
}
|
||||
ul{
|
||||
.unlist();
|
||||
@include unlist();
|
||||
width:100%;
|
||||
}
|
||||
li{
|
||||
.column(4);
|
||||
@include column(4);
|
||||
padding-top:3em;
|
||||
padding-bottom:3em;
|
||||
|
||||
&:first-child{
|
||||
.push-padding(@grid-content-indent);
|
||||
@include push-padding($grid-content-indent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
@import "../grid.less";
|
||||
@import "../variables.scss";
|
||||
@import "../mixins.scss";
|
||||
@import "../grid.scss";
|
||||
|
||||
@desktop-padding: 100px;
|
||||
// overrides default nice padding defined in variables.scss
|
||||
$desktop-nice-padding: 100px;
|
||||
|
||||
html, body, .content-wrapper{
|
||||
background-color:@color-grey-1;
|
||||
color:@color-grey-3;
|
||||
background-color:$color-grey-1;
|
||||
color:$color-grey-3;
|
||||
}
|
||||
|
||||
html{
|
||||
|
|
@ -22,7 +23,8 @@ body{
|
|||
border:0;
|
||||
}
|
||||
.wrapper{
|
||||
.nice-padding();
|
||||
padding-left:$mobile-nice-padding;
|
||||
padding-right:$mobile-nice-padding;
|
||||
max-width:none;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +39,7 @@ h1{
|
|||
form{
|
||||
width:100%;
|
||||
ul{
|
||||
.unlist();
|
||||
@include unlist();
|
||||
}
|
||||
}
|
||||
label{
|
||||
|
|
@ -66,7 +68,7 @@ form{
|
|||
display:none;
|
||||
}
|
||||
input{
|
||||
border-top: 1px dashed @color-input-border;
|
||||
border-top: 1px dashed $color-input-border;
|
||||
}
|
||||
}
|
||||
&:first-child input{
|
||||
|
|
@ -85,7 +87,7 @@ form{
|
|||
}
|
||||
|
||||
.full label{
|
||||
.border-radius(2px);
|
||||
@include border-radius(2px);
|
||||
text-transform:uppercase;
|
||||
padding:2px 5px;
|
||||
position:absolute;
|
||||
|
|
@ -101,8 +103,9 @@ form{
|
|||
|
||||
/* Special full-width, one-off fields i.e a single text or textarea input */
|
||||
.full input{
|
||||
.nice-padding();
|
||||
.border-radius(0px);
|
||||
@include border-radius(0px);
|
||||
padding-left:$mobile-nice-padding;
|
||||
padding-right:$mobile-nice-padding;
|
||||
font-weight:300;
|
||||
border:0;
|
||||
padding-top:1.5em;
|
||||
|
|
@ -131,12 +134,12 @@ form{
|
|||
}
|
||||
|
||||
li{
|
||||
.border-radius(3px);
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.content-wrapper{
|
||||
float:none;
|
||||
height:auto;
|
||||
|
|
@ -149,7 +152,7 @@ form{
|
|||
.wrapper{
|
||||
position:relative;
|
||||
height:100%;
|
||||
padding:0 @desktop-padding;
|
||||
padding:0 $desktop-nice-padding;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
@ -168,21 +171,21 @@ form{
|
|||
.field.icon:before{
|
||||
display:inline-block;
|
||||
position: absolute;
|
||||
color:@color-grey-4;
|
||||
border: 2px solid @color-grey-4;
|
||||
color:$color-grey-4;
|
||||
border: 2px solid $color-grey-4;
|
||||
border-radius: 100%;
|
||||
width: 1em;
|
||||
padding: 0.3em;
|
||||
left: @desktop-padding;
|
||||
left: $desktop-nice-padding;
|
||||
margin-top: -1em;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.full{
|
||||
margin:0 -@desktop-padding;
|
||||
margin:0px (-$desktop-nice-padding);
|
||||
|
||||
input{
|
||||
padding-left:@desktop-padding + 50px;
|
||||
padding-left:($desktop-nice-padding + 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,25 @@
|
|||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
@import "../grid.less";
|
||||
@import "../variables.scss";
|
||||
@import "../mixins.scss";
|
||||
@import "../grid.scss";
|
||||
|
||||
.page-editor .content-wrapper{
|
||||
margin-bottom:10em;
|
||||
}
|
||||
|
||||
.objects{
|
||||
background:url("@{static-root}bg-dark-diag.svg");
|
||||
background:url("#{$static-root}bg-dark-diag.svg");
|
||||
}
|
||||
.object{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
.nice-padding();
|
||||
@include nice-padding();
|
||||
|
||||
&:first-child{
|
||||
border:0;
|
||||
}
|
||||
|
||||
&.focused{
|
||||
border-color: darken(@color-input-focus, 40%);
|
||||
border-color: darken($color-input-focus, 40%);
|
||||
}
|
||||
|
||||
fieldset{
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
position:relative;
|
||||
z-index:1;
|
||||
top:1em;
|
||||
padding-right:@grid-gutter-width/2;
|
||||
padding-right:$grid-gutter-width/2;
|
||||
margin-top:4em;
|
||||
opacity:1;
|
||||
padding-left:3em;
|
||||
|
|
@ -41,9 +42,9 @@
|
|||
display:block;
|
||||
float:left;
|
||||
content:"?";
|
||||
border:1px solid @color-grey-2;
|
||||
color:@color-grey-2;
|
||||
.border-radius(100%);
|
||||
border:1px solid $color-grey-2;
|
||||
color:$color-grey-2;
|
||||
@include border-radius(100%);
|
||||
height:15px;
|
||||
width:15px;
|
||||
line-height:15px;
|
||||
|
|
@ -60,7 +61,7 @@
|
|||
|
||||
> h2, &.single-field label{
|
||||
-webkit-font-smoothing: auto;
|
||||
background:@color-grey-3;
|
||||
background:$color-grey-3;
|
||||
text-transform:uppercase;
|
||||
padding:0.9em 0 0.9em 4em;
|
||||
font-size:0.95em;
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
right:0;
|
||||
z-index:1;
|
||||
text-shadow:1px 1px 1px rgba(255,255,255,0.5);
|
||||
.box-shadow(0 0 7px 0 rgba(0,0,0,0.4));
|
||||
@include box-shadow(0 0 7px 0 rgba(0,0,0,0.4));
|
||||
|
||||
&:before{
|
||||
font-family:wagtail;
|
||||
|
|
@ -134,17 +135,14 @@
|
|||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input, textarea, .richtext{
|
||||
.nice-padding();
|
||||
.border-radius(0px);
|
||||
@include nice-padding();
|
||||
@include border-radius(0px);
|
||||
font-family:Bitter, Georgia, serif;
|
||||
padding-top:2em;
|
||||
padding-bottom:2em;
|
||||
font-size:1.2em;
|
||||
line-height:1.6em;
|
||||
|
||||
line-height:1.6em;
|
||||
}
|
||||
|
||||
.richtext{
|
||||
|
|
@ -158,7 +156,7 @@
|
|||
}
|
||||
|
||||
.error-message{
|
||||
.nice-padding();
|
||||
@include nice-padding();
|
||||
padding-bottom:2em;
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +164,7 @@
|
|||
.error input,
|
||||
.error textarea,
|
||||
.error .richtext{
|
||||
background-color:@color-input-error-bg;
|
||||
background-color:$color-input-error-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,13 +211,13 @@
|
|||
|
||||
/* wrapper around add button for mutliple objects. Default version is wordless plus button for contracted groups of fields */
|
||||
.add{
|
||||
.transition(background-color 0.2s ease);
|
||||
@include transition(background-color 0.2s ease);
|
||||
position:relative;
|
||||
z-index:2;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:3.3em;
|
||||
background-color:@color-teal;
|
||||
background-color:$color-teal;
|
||||
padding:0;
|
||||
margin:0 0 0 -20px;
|
||||
cursor:pointer;
|
||||
|
|
@ -256,23 +254,23 @@
|
|||
padding-bottom:0.5em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-mobile){
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
.object{
|
||||
fieldset{
|
||||
max-width:1024px;
|
||||
.column(10);
|
||||
@include column(10);
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
.object-help{
|
||||
.column(2);
|
||||
@include column(2);
|
||||
display:block;
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
right:0;
|
||||
top:1em;
|
||||
padding-right:@grid-gutter-width/2;
|
||||
padding-right:$grid-gutter-width/2;
|
||||
float:right;
|
||||
margin-top:4em;
|
||||
opacity:0;
|
||||
|
|
@ -281,7 +279,7 @@
|
|||
|
||||
&.full{
|
||||
fieldset{
|
||||
.column(11);
|
||||
@include column(11);
|
||||
margin-left:-51px;
|
||||
padding:3.2em 0 0 0;
|
||||
}
|
||||
|
|
@ -293,7 +291,7 @@
|
|||
}
|
||||
}
|
||||
.multiple{
|
||||
.column(10);
|
||||
@include column(10);
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.clearfix() {
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " "; /* 1 */
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.unlist(){
|
||||
@mixin unlist(){
|
||||
&, ul, li{
|
||||
list-style-type:none;
|
||||
font-style: normal;
|
||||
|
|
@ -21,29 +21,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.transition(@transition){
|
||||
@mixin transition($transition...){
|
||||
body.ready &{
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
-o-transition: @transition;
|
||||
transition: @transition;
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
.transition-immediate(@transition){
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
-o-transition: @transition;
|
||||
transition: @transition;
|
||||
@mixin transition-immediate($transition...){
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
-o-transition: -o-transform @transition;
|
||||
transition: transform @transition;
|
||||
@mixin transition-transform($transition...) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
.notransition() {
|
||||
@mixin notransition() {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
|
|
@ -51,17 +51,17 @@
|
|||
transition: none !important;
|
||||
}
|
||||
|
||||
.border-radius(@radius){
|
||||
-webkit-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
@mixin border-radius($radius){
|
||||
-webkit-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.box-shadow(@shadow){
|
||||
-webkit-box-shadow: @shadow; //inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
|
||||
box-shadow: @shadow; //inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
|
||||
@mixin box-shadow($shadow){
|
||||
-webkit-box-shadow: $shadow; //e.g inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
.visuallyhidden{
|
||||
@mixin visuallyhidden{
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
|
|
@ -80,12 +80,19 @@
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
.visuallyhidden{
|
||||
@include visuallyhidden;
|
||||
}
|
||||
|
||||
.visuallyvisible{
|
||||
@mixin visuallyvisible{
|
||||
clip:none;
|
||||
height:auto;
|
||||
width:auto;
|
||||
margin:auto;
|
||||
overflow:visible;
|
||||
position:initial;
|
||||
}
|
||||
|
||||
.visuallyvisible{
|
||||
@include visuallyvisible;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
@import "../variables.scss";
|
||||
@import "../mixins.scss";
|
||||
|
||||
.hallotoolbar{
|
||||
position:absolute;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
margin-top:0;
|
||||
}
|
||||
.hallotoolbar button{
|
||||
.border-radius(0);
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.richtext {
|
||||
|
|
@ -149,11 +149,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @breakpoint-desktop-larger){
|
||||
@media screen and (min-width: $breakpoint-desktop-larger){
|
||||
/* .hallotoolbar{
|
||||
margin:0 auto;
|
||||
position:absolute;
|
||||
left:-@menu-width;
|
||||
left:-$menu-width;
|
||||
right:0;
|
||||
z-index:5;
|
||||
margin-top:3em;
|
||||
56
wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
Normal file
56
wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/* paths */
|
||||
$static-root: "/static/wagtailadmin/images/";
|
||||
$css-root: "/static/wagtailadmin/scss/";
|
||||
|
||||
/* grid settings */
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 3%;
|
||||
$grid-max-width: 1200px;
|
||||
$grid-content-indent:0.7;
|
||||
|
||||
$mobile-nice-padding: 20px;
|
||||
$desktop-nice-padding: 50px;
|
||||
|
||||
/* screen breakpoints */
|
||||
$breakpoint-mobile: 50em; /* 800px */
|
||||
$breakpoint-desktop-small: 56.25em; /* 900px */
|
||||
$breakpoint-desktop-large: 75em; /* 1200px */
|
||||
$breakpoint-desktop-larger: 100em; /* 1600px */
|
||||
|
||||
/* colours */
|
||||
$color-teal: #43b1b0;
|
||||
$color-teal-darker: darken($color-teal, 10%);
|
||||
$color-teal-dark: #246060;
|
||||
$color-red: #f7474e;
|
||||
$color-orange:#e9b04d;
|
||||
$color-green: #00FF00;
|
||||
|
||||
/* darker to lighter */
|
||||
$color-grey-1: #333333;
|
||||
$color-grey-1-1: #404040;
|
||||
$color-grey-2: #666666;
|
||||
$color-grey-3: #d9d9d9;
|
||||
$color-grey-4: #e6e6e6;
|
||||
$color-grey-5: #fafafa;
|
||||
|
||||
$color-thead-bg: $color-grey-5;
|
||||
$color-header-bg: $color-teal; // #ff6a58;
|
||||
$color-fieldset-hover: $color-grey-5;
|
||||
$color-input-border: $color-grey-3;
|
||||
$color-input-focus: #f4fcfc;
|
||||
$color-input-error-bg: #feedee;
|
||||
$color-button: $color-teal;
|
||||
$color-button-hover: $color-teal-darker;
|
||||
$color-button-yes: $color-green;
|
||||
$color-button-yes-hover: darken($color-button-yes, 8%);
|
||||
$color-button-no: $color-red;
|
||||
$color-button-no-hover: darken($color-button-no, 20%);
|
||||
$color-link: $color-teal;
|
||||
$color-link-hover: $color-teal-dark;
|
||||
|
||||
$color-text-base: $color-grey-2;
|
||||
$color-text-input: $color-grey-1;
|
||||
|
||||
/* misc sizing */
|
||||
$thumbnail-width: 130px;
|
||||
$menu-width: 150px;
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 212 B After Width: | Height: | Size: 212 B |
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 206 B |
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 206 B |
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 206 B |
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 206 B |
|
Before Width: | Height: | Size: 208 B After Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 208 B After Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 335 B After Width: | Height: | Size: 335 B |
|
Before Width: | Height: | Size: 207 B After Width: | Height: | Size: 207 B |
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 262 B |
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 262 B |
|
Before Width: | Height: | Size: 332 B After Width: | Height: | Size: 332 B |
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/home.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/home.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
{% endcomment %}
|
||||
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}wagtailadmin/css/layouts/page-editor.less">
|
||||
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}wagtailadmin/css/panels/rich-text.less">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/page-editor.scss" type="text/x-scss" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/panels/rich-text.scss" type="text/x-scss" />
|
||||
|
||||
{# we'll want tag-it included, for the benefit of any modals that use it, like images. #}
|
||||
{# TODO: a method of injecting these sorts of things on demand when the modal is spawned #}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery.tagit.css">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.tagit.css">
|
||||
{% endcompress %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% load compress %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery.tagit.css">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.tagit.css">
|
||||
{% endcompress %}
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@
|
|||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Bitter:400,700" />
|
||||
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/normalize.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery.timepicker.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/core.less" type="text/less" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/normalize.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.timepicker.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/core.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
|
||||
{% block extra_css %}{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue