Commit 9d0c14d1 authored by Nick Stenning's avatar Nick Stenning

Merge pull request #3272 from hypothesis/remove-compass-mixins

Remove compass-mixins dependency
parents d15c7aa2 7c8d0fa0
...@@ -181,7 +181,6 @@ gulp.task('build-css', function () { ...@@ -181,7 +181,6 @@ gulp.task('build-css', function () {
var sassOpts = { var sassOpts = {
outputStyle: IS_PRODUCTION_BUILD ? 'compressed' : 'nested', outputStyle: IS_PRODUCTION_BUILD ? 'compressed' : 'nested',
includePaths: ['node_modules/compass-mixins/lib/'],
}; };
var cssURLRewriter = postcssURL({ var cssURLRewriter = postcssURL({
......
...@@ -18,6 +18,7 @@ module.exports = class Host extends Guest ...@@ -18,6 +18,7 @@ module.exports = class Host extends Guest
.attr('allowfullscreen', '') .attr('allowfullscreen', '')
.attr('seamless', '') .attr('seamless', '')
.attr('src', options.app) .attr('src', options.app)
.addClass('h-sidebar-iframe')
@frame = $('<div></div>') @frame = $('<div></div>')
.css('display', 'none') .css('display', 'none')
......
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
} }
.annotator-adder-actions__button { .annotator-adder-actions__button {
@include box-shadow(none); box-shadow: none;
font-family: h; font-family: h;
font-size: 18px; font-size: 18px;
background: transparent !important; background: transparent !important;
......
...@@ -42,8 +42,8 @@ $base-font-size: 14px; ...@@ -42,8 +42,8 @@ $base-font-size: 14px;
// frame styles // frame styles
@import './bucket-bar'; @import './bucket-bar';
@include user-select(none);
@include noise-background; @include noise-background;
user-select: none;
direction: ltr; direction: ltr;
background: none; background: none;
font-size: $base-font-size; font-size: $base-font-size;
...@@ -67,7 +67,8 @@ $base-font-size: 14px; ...@@ -67,7 +67,8 @@ $base-font-size: 14px;
width: initial; width: initial;
} }
& > iframe { .h-sidebar-iframe {
border: none;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
...@@ -98,8 +99,8 @@ $base-font-size: 14px; ...@@ -98,8 +99,8 @@ $base-font-size: 14px;
ul, li { ul, li {
box-sizing: border-box; box-sizing: border-box;
list-style: none;
@include reset-box-model; @include reset-box-model;
@include reset-list-style;
} }
} }
...@@ -129,7 +130,7 @@ $base-font-size: 14px; ...@@ -129,7 +130,7 @@ $base-font-size: 14px;
} }
.annotator-frame-button--sidebar_toggle { .annotator-frame-button--sidebar_toggle {
@include box-shadow(none); box-shadow: none;
border-radius: 0px; border-radius: 0px;
border-style: none none solid solid; border-style: none none solid solid;
padding-right: 6px; padding-right: 6px;
......
@import 'compass';
$base-font-size: 12px; $base-font-size: 12px;
$base-line-height: 20px; $base-line-height: 20px;
......
@import 'compass/css3';
@import 'compass/reset/utilities';
@import "./variables"; @import "./variables";
@import "./util"; @import "./util";
......
@import 'compass/layout/stretching';
@import 'compass/typography/text/force-wrap';
@import './base'; @import './base';
@import './forms'; @import './forms';
@import './grid'; @import './grid';
...@@ -55,7 +52,7 @@ html { ...@@ -55,7 +52,7 @@ html {
//Candidate for cleanup //Candidate for cleanup
.btn-link { .btn-link {
@include box-shadow(none); box-shadow: none;
@include reset-box-model; @include reset-box-model;
background: none; background: none;
background-color: transparent; background-color: transparent;
...@@ -191,7 +188,7 @@ html { ...@@ -191,7 +188,7 @@ html {
// These psuedo-elements add the speech bubble tail / triangle. // These psuedo-elements add the speech bubble tail / triangle.
&:before, &:after { &:before, &:after {
// http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox // http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox
@include scale(.9999); transform: scale(.9999);
border-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0);
border-style: solid; border-style: solid;
......
// Common form styles. // Common form styles.
@import "mixins/forms"; @import "mixins/forms";
@import "compass/css3/images";
@import "compass/utilities/general/clearfix";
.form-field { .form-field {
@include pie-clearfix; @include pie-clearfix;
...@@ -13,6 +11,7 @@ ...@@ -13,6 +11,7 @@
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 1em;
margin-top: 1.5em; margin-top: 1.5em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
...@@ -229,20 +228,20 @@ ...@@ -229,20 +228,20 @@
} }
.btn-danger { .btn-danger {
@include background(linear-gradient(to bottom, $error-color, shade($error-color, 5%))); background: linear-gradient(to bottom, $error-color, shade($error-color, 5%));
color: white; color: white;
border-color: shade($error-color, 15%); border-color: shade($error-color, 15%);
text-shadow: 0 -1px 0 rgba(0, 0, 0, .1); text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
&:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active { &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
@include box-shadow(0 1px 0 rgba(0, 0, 0, .05)); box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
color: white; color: white;
background: tint($error-color, 5%); background: tint($error-color, 5%);
border-color: $error-color; border-color: $error-color;
} }
&:active, &.js-active { &:active, &.js-active {
@include box-shadow(inset 0 1px 0 rgba(0, 0, 0, .3)); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .3);
color: white; color: white;
background: shade($error-color, 10%); background: shade($error-color, 10%);
border-color: shade($error-color, 30%); border-color: shade($error-color, 30%);
...@@ -254,7 +253,7 @@ ...@@ -254,7 +253,7 @@
&, &:focus, &:hover, &:active, &[disabled], &, &:focus, &:hover, &:active, &[disabled],
&.js-hover, &.js-focus, &.js-active, &.js-disabled { &.js-hover, &.js-focus, &.js-active, &.js-disabled {
@include box-shadow(none); box-shadow: none;
background: none; background: none;
} }
...@@ -322,7 +321,7 @@ ...@@ -322,7 +321,7 @@
} }
[status-button-state] .btn-message-text { [status-button-state] .btn-message-text {
@include transition(opacity .2s .6s ease-in); transition: opacity .2s .6s ease-in;
opacity: 0; opacity: 0;
} }
...@@ -331,12 +330,12 @@ ...@@ -331,12 +330,12 @@
} }
[status-button-state] .btn-message-success .btn-message-icon { [status-button-state] .btn-message-success .btn-message-icon {
@include transform(scale(0)); transform: scale(0);
} }
[status-button-state=success] .btn-message-success .btn-message-icon { [status-button-state=success] .btn-message-success .btn-message-icon {
@include transition(transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8)); transition: transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8);
@include transform(scale(1)); transform: scale(1);
} }
// TODO: Move into seperate module stylesheet. // TODO: Move into seperate module stylesheet.
......
@import 'compass';
$base-font-size: 16px; $base-font-size: 16px;
$base-line-height: 22px; $base-line-height: 22px;
......
@import "../base"; @import "../base";
// See http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-pie-clearfix
@mixin pie-clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin focus-outline { @mixin focus-outline {
border-color: #51A7E8; border-color: #51A7E8;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .075) inset, 0px 0px 5px rgba(81, 167, 232, .5); box-shadow: 0px 1px 2px rgba(0, 0, 0, .075) inset, 0px 0px 5px rgba(81, 167, 232, .5);
...@@ -36,7 +45,7 @@ ...@@ -36,7 +45,7 @@
} }
@mixin btn { @mixin btn {
@include box-shadow(0 1px 0 rgba(0, 0, 0, .15)); box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
background: linear-gradient($button-background-gradient); background: linear-gradient($button-background-gradient);
display: inline-block; display: inline-block;
...@@ -49,7 +58,7 @@ ...@@ -49,7 +58,7 @@
} }
@mixin btn-hover { @mixin btn-hover {
@include box-shadow(0 1px 0 rgba(0, 0, 0, .05)); box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
outline: none; outline: none;
color: $button-text-color; color: $button-text-color;
background: $button-background-start; background: $button-background-start;
...@@ -57,16 +66,27 @@ ...@@ -57,16 +66,27 @@
} }
@mixin btn-active { @mixin btn-active {
@include box-shadow(inset 0 1px 0 rgba(0, 0, 0, .1)); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
background: $button-background-end; background: $button-background-end;
color: #424242; color: #424242;
border-color: #bababa; border-color: #bababa;
} }
@mixin btn-disabled { @mixin btn-disabled {
@include box-shadow(none); box-shadow: none;
cursor: default; cursor: default;
background: #F0F0F0; background: #F0F0F0;
border-color: #CECECE; border-color: #CECECE;
color: $gray-light; color: $gray-light;
} }
// Tint and shade functions from
// https://css-tricks.com/snippets/sass/tint-shade-functions
@function tint($color, $percent){
@return mix(white, $color, $percent);
}
@function shade($color, $percent){
@return mix(black, $color, $percent);
}
@import "compass/utilities/general/clearfix";
// Mixins for working with grids. A grid consists of an outer grid container // Mixins for working with grids. A grid consists of an outer grid container
// and internal columns. Each column has a gutter defined by $grid-gutter. // and internal columns. Each column has a gutter defined by $grid-gutter.
// The implementation is largely based on the grid system created by // The implementation is largely based on the grid system created by
......
@mixin reset-font {
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
@mixin reset-box-model {
margin: 0;
padding: 0;
border: 0;
}
// Adapted from http://compass-style.org/reference/compass/reset/utilities/#mixin-nested-reset
@mixin nested-reset {
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
@include reset-box-model;
@include reset-font;
}
}
@import 'compass/reset'; @import './mixins/reset';
/* /*
Consistency fixes Consistency fixes
...@@ -14,7 +14,11 @@ html { ...@@ -14,7 +14,11 @@ html {
text-size-adjust: 100%; text-size-adjust: 100%;
} }
body { min-height: 100%; font-size: 100%; } body {
min-height: 100%;
font-size: 100%;
margin: 0;
}
sub, sup { sub, sup {
font-size: 75%; font-size: 75%;
...@@ -59,6 +63,16 @@ img::-moz-selection { ...@@ -59,6 +63,16 @@ img::-moz-selection {
background: transparent; background: transparent;
} }
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
blockquote {
margin: 0;
}
// Custom elements // Custom elements
markdown { markdown {
display: block; display: block;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
.simple-search-icon { .simple-search-icon {
@include order(0); order: 0;
} }
:not(:focus) ~ .simple-search-icon { :not(:focus) ~ .simple-search-icon {
......
...@@ -6,15 +6,13 @@ ...@@ -6,15 +6,13 @@
// <!-- Three nested spans --> // <!-- Three nested spans -->
// <span class="spinner"><span><span></span></span></span> // <span class="spinner"><span><span></span></span></span>
@import 'compass/css3/_animation';
$container-width: 1em; $container-width: 1em;
$container-height: $container-width; $container-height: $container-width;
$part-width: .1em; $part-width: .1em;
$part-height: 3 * $part-width; $part-height: 3 * $part-width;
@include keyframes(spin) { @keyframes(spin) {
to { @include transform(rotate(1turn)); } to { transform: rotate(1turn); }
} }
.spinner { .spinner {
...@@ -24,7 +22,7 @@ $part-height: 3 * $part-width; ...@@ -24,7 +22,7 @@ $part-height: 3 * $part-width;
height: $container-width; height: $container-width;
text-indent: 999em; text-indent: 999em;
overflow: hidden; overflow: hidden;
@include animation(spin 1.25s infinite steps(12)); animation: spin 1.25s infinite steps(12);
} }
.spinner:before, .spinner:before,
...@@ -41,8 +39,8 @@ $part-height: 3 * $part-width; ...@@ -41,8 +39,8 @@ $part-height: 3 * $part-width;
height: $part-height; height: $part-height;
border-radius: 0.1em; border-radius: 0.1em;
background: #eee; background: #eee;
@include box-shadow(0 ($container-height - $part-height) rgba(0, 0, 0, 0.15)); box-shadow: 0 ($container-height - $part-height) rgba(0, 0, 0, 0.15);
@include transform-origin(50%, $container-height / 2); transform-origin: 50% $container-height / 2;
} }
.spinner:before { .spinner:before {
...@@ -50,26 +48,26 @@ $part-height: 3 * $part-width; ...@@ -50,26 +48,26 @@ $part-height: 3 * $part-width;
} }
.spinner:after { .spinner:after {
@include transform(rotate(-30deg)); transform: rotate(-30deg);
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
} }
.spinner > span:before { .spinner > span:before {
@include transform(rotate(-60deg)); transform: rotate(-60deg);
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.spinner > span:after { .spinner > span:after {
@include transform(rotate(-90deg)); transform: rotate(-90deg);
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
} }
.spinner > span > span:before { .spinner > span > span:before {
@include transform(rotate(-120deg)); transform: rotate(-120deg);
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
.spinner > span > span:after { .spinner > span > span:after {
@include transform(rotate(-150deg)); transform: rotate(-150deg);
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
"classnames": "^2.2.4", "classnames": "^2.2.4",
"coffeeify": "^1.0.0", "coffeeify": "^1.0.0",
"commander": "^2.9.0", "commander": "^2.9.0",
"compass-mixins": "^0.12.7",
"core-js": "^1.2.5", "core-js": "^1.2.5",
"diff-match-patch": "^1.0.0", "diff-match-patch": "^1.0.0",
"document-base-uri": "^1.0.0", "document-base-uri": "^1.0.0",
...@@ -50,7 +49,6 @@ ...@@ -50,7 +49,6 @@
"lodash.debounce": "^4.0.3", "lodash.debounce": "^4.0.3",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"ng-tags-input": "2.2.0", "ng-tags-input": "2.2.0",
"node-sass": "~3.4.1",
"node-uuid": "^1.4.3", "node-uuid": "^1.4.3",
"postcss": "^5.0.6", "postcss": "^5.0.6",
"postcss-url": "^5.1.1", "postcss-url": "^5.1.1",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment