diff --git a/docs/performance.rst b/docs/performance.rst index cfbcea59e..2f4a834e0 100644 --- a/docs/performance.rst +++ b/docs/performance.rst @@ -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 `_. 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 ~~~~~~~~~~~~ diff --git a/scripts/install/debian.sh b/scripts/install/debian.sh index 2b1c04326..93f513d16 100644 --- a/scripts/install/debian.sh +++ b/scripts/install/debian.sh @@ -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 diff --git a/scripts/install/ubuntu.sh b/scripts/install/ubuntu.sh index ac38d5910..ad7e11a0b 100644 --- a/scripts/install/ubuntu.sh +++ b/scripts/install/ubuntu.sh @@ -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 diff --git a/setup.py b/setup.py index 921f01566..b33576f54 100644 --- a/setup.py +++ b/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", diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less deleted file mode 100644 index b4ece6d59..000000000 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less +++ /dev/null @@ -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; - } - } - } -} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less b/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less deleted file mode 100644 index d955391c8..000000000 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less b/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less deleted file mode 100644 index 638597bcb..000000000 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less +++ /dev/null @@ -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; \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss similarity index 81% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss index f409dd42e..4e3c16f7d 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss @@ -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); } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/explorer.scss similarity index 98% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/explorer.scss index f182c5f8d..f18233829 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/explorer.scss @@ -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); } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss similarity index 74% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss index 54283e877..2a3ae2409 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss @@ -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; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss similarity index 81% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss index 7c59e234f..a44241700 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss @@ -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; } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss similarity index 89% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss index 01ae80be3..2a5c8be72 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss @@ -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{ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss similarity index 78% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss index 99cb8d5f3..5e285ba14 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss @@ -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); } } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss new file mode 100644 index 000000000..7f58dd869 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/modals.scss similarity index 76% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/modals.scss index 195acaeb8..d2660e6aa 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/modals.scss @@ -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; } } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/tabs.scss similarity index 63% rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/tabs.scss index 3ce8db99a..81b4ca3e4 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/tabs.scss @@ -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; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss similarity index 77% rename from wagtail/wagtailadmin/static/wagtailadmin/css/core.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss index 5e599cc4a..97a727799 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss @@ -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); } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.eot b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.eot rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.svg b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.svg rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.ttf b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.ttf rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.woff b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.woff rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss new file mode 100644 index 000000000..359fe49c8 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss @@ -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; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss similarity index 70% rename from wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss index d6e43555c..61f7c34ac 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss @@ -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); } } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss similarity index 75% rename from wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss index cae9fcb24..0cec5d39c 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss @@ -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); } } } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss similarity index 85% rename from wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss index ebddbecfe..fd195fa89 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss @@ -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; } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss similarity index 50% rename from wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss index 4a0a7104e..c990eb43c 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss @@ -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; } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/normalize.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/normalize.css diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss similarity index 95% rename from wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less rename to wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss index a5359e7b2..f2535b20a 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss @@ -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; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss new file mode 100644 index 000000000..e1adba10b --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss @@ -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; \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/animated-overlay.gif similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/animated-overlay.gif diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_222222_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_222222_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_454545_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_454545_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_888888_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_888888_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-smoothness.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-smoothness.css diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.tagit.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.tagit.css diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.timepicker.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.timepicker.css diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/tagit.ui-zendesk.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/tagit.ui-zendesk.css diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/wagtail-userbar.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/wagtail-userbar.css similarity index 100% rename from wagtail/wagtailadmin/static/wagtailadmin/css/wagtail-userbar.css rename to wagtail/wagtailadmin/static/wagtailadmin/scss/wagtail-userbar.css diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html index dd8e4102a..8a71eda3a 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html @@ -6,7 +6,7 @@ {% block extra_css %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html index c2366f4ed..598761587 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html @@ -6,7 +6,7 @@ {% block extra_css %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html index 16e6d0c89..207d88835 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html @@ -6,7 +6,7 @@ {% block extra_css %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html index fb85100fe..f61035aa2 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html @@ -6,7 +6,7 @@ {% block extra_css %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/home.html b/wagtail/wagtailadmin/templates/wagtailadmin/home.html index e61640bcf..65c6b8bc0 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/home.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/home.html @@ -6,7 +6,7 @@ {% block extra_css %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/login.html b/wagtail/wagtailadmin/templates/wagtailadmin/login.html index 8cbbfaf14..cf28de7f1 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/login.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/login.html @@ -6,7 +6,7 @@ {% block extra_css %} {% compress css %} - + {% endcompress %} {% endblock %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html index 3e4ba4e32..721037ff6 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html @@ -10,10 +10,10 @@ {% endcomment %} {% compress css %} - - + + {# 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 #} - + {% endcompress %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html b/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html index b4b5e49ec..8b21e6642 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html @@ -1,4 +1,4 @@ {% load compress %} {% compress css %} - + {% endcompress %} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html b/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html index e6019c4e8..1ddda14d6 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html @@ -18,10 +18,10 @@ {% compress css %} - - - - + + + + {% endcompress %} {% block extra_css %}{% endblock %}