Skip to content

C
coopwire-hypothesis
Commit b7861a7c authored by Jake Hartnell's avatar Jake Hartnell
Browse files
Options

Merge pull request #1351 from hypothesis/scss-variables 

Convert SCSS variables into hyphen case
parents 9f9b4ab9 8ee90b8e
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 166 deletions
h/static/styles/app.scss
View file @ b7861a7c
......@@ -10,7 +10,7 @@
body {
@extend .noise;
font-family: $sansFontFamily;
font-family: $sans-font-family;
word-wrap: break-word;
}
......@@ -96,8 +96,8 @@ ol {
.sheet {
@include border-radius(2px);
border: solid 1px $grayLighter;
font-family: $sansFontFamily;
border: solid 1px $gray-lighter;
font-family: $sans-font-family;
margin-bottom: .72em;
position: relative;
......@@ -115,7 +115,7 @@ ol {
font-weight: bold;
font-size: 1.1em;
&:hover {
color: $linkColorHover;
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
......@@ -129,7 +129,7 @@ ol {
.dropdown-toggle {
.provider {
color: $grayLight;
color: $gray-light;
display: none;
}
&:hover {
......
h/static/styles/base.scss
View file @ b7861a7c
@import 'compass/css3';
$white: #fff !default;
$black: #000 !default;
// GRAYS
$gray: #777 !default;
$grayDark: darken($gray, 12%) !default;
$grayDarker: darken($gray, 36%) !default;
$grayLight: lighten($gray, 12%) !default;
$grayLighter: lighten($gray, 36%) !default;
$grayLightest: #f9f9f9 !default;
$gray-dark: #585858;
$gray-light: #969696 !default;
$gray-lighter: #d3d3d3 !default;
$gray-lightest: #f9f9f9 !default;
//COLORS
$hypothered: #bd1c2b !default;
$hypothered-desat: #bd5862 !default;
$inputBorder: $grayLight !default;
$inputDisabledBackground: $grayLight !default;
$inputBackground: white !default;
// Accent colors
// -------------------------
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
$red: #9d261d !default;
$yellow: #ffc40d !default;
$orange: #f89406 !default;
$pink: #c3325f !default;
$purple: #7a43b6 !default;
$error-red: $hypothered-desat !default;
$error-red-light: #e0b0b0 !default;
$error-red-lightest: #fff1f3 !default;
$focus-yellow: #fffbeb !default;
$focus-yellow-dark: #ece3c5 !default;
$focus-yellow-darker: #cbbb95 !default;
$button-text-color: $gray-dark !default;
$button-background-start: $white !default;
$button-background-end: #f0f0f0 !default;
$button-background-gradient: top, $button-background-start, $button-background-end !default;
$success-green: #76B800 !default;
// Scaffolding
// -------------------------
$bodyBackground: $white !default;
$textColor: $grayDark !default;
$body-background: $white !default;
$text-color: $gray-dark !default;
//LINKS
$linkColor: $hypothered-desat !default;
$linkColorHover: $hypothered !default;
$link-color: $hypothered-desat !default;
$link-color-hover: $hypothered !default;
// Typography
// -------------------------
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
$sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$serif-font-family: Georgia, "Times New Roman", Times, serif !default;
$mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace !default;
$baseFontSize: 16px !default;
$baseFontFamily: $sansFontFamily !default;
$baseLineHeight: 20px !default;
$altFontFamily: $serifFontFamily !default;
$base-font-size: 16px !default;
$base-font-family: $sans-font-family !default;
$base-line-height: 20px !default;
$alt-font-family: $serif-font-family !default;
$headingsFontFamily: inherit !default;
$headingsFontWeight: bold !default;
$headingsColor: inherit !default;
$headings-font-family: inherit !default;
$headings-color: inherit !default;
//STANCE COLORS
$positive: #3aab39;
......@@ -60,8 +58,8 @@ $negative: #d11c2b;
$neutral: #0171ba;
//OTHER VARIABLES
$highlightColor: rgba(201, 215, 241, .5);
$highlightModeColor: rgba(255, 255, 60, .5);
$highlight-color: rgba(201, 215, 241, .5);
$highlight-mode-color: rgba(255, 255, 60, .5);
$thread-padding: 1em;
$threadexp-width: .72em;
$score-width: 40px;
......@@ -86,7 +84,7 @@ $input-border-radius: 2px;
@mixin plainform {
color: $gray;
background-color: white;
border: 1px solid $grayLighter;
border: 1px solid $gray-lighter;
border-radius: .2em;
font-family: "Source Sans Pro", "Open Sans", sans-serif;
font-size: 1em;
......@@ -94,16 +92,13 @@ $input-border-radius: 2px;
&:focus, &.js-focus {
outline: 0;
border: 1px solid $gray;
@include box-shadow( inset 1px 1px 6px -1px $grayLighter);
@include box-shadow( inset 1px 1px 6px -1px $gray-lighter);
}
&:disabled {
background-color: $grayLightest;
background-color: $gray-lightest;
}
&.ng-dirty.ng-invalid {
border: 1px solid $red;
}
&.ng-valid {
border: 1px solid $green;
border: 1px solid $error-red-light;
}
}
......@@ -121,8 +116,8 @@ $input-border-radius: 2px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
color: $grayDark;
border-color: $grayLight $grayLight $gray;
color: $gray-dark;
border-color: $gray-light $gray-light $gray;
&:hover, &:focus, &:active, &.js-focus, &.js-hover, &.js-active {
@include background-image(
......@@ -140,14 +135,14 @@ $input-border-radius: 2px;
@include box-shadow(
inset 0 .15em .25em rgba(0, 0, 0, .15),
0 .05em .1em rgba(0, 0, 0, .0));
border-color: $grayLight $grayLight $gray;
border-color: $gray-light $gray-light $gray;
top: 1px;
}
&:disabled {
color: $grayLight;
border-color: $grayLighter;
background: $grayLightest;
color: $gray-light;
border-color: $gray-lighter;
background: $gray-lightest;
cursor: default;
}
}
......@@ -176,7 +171,7 @@ $input-border-radius: 2px;
@include border-radius(.1em);
@include box-shadow(inset 2px 1px 1px hsla(0, 0%, 0%, .1));
@include single-transition(opacity, .2s);
font-family: $sansFontFamily;
font-family: $sans-font-family;
line-height: 29px;
opacity: 0;
position: relative;
......
h/static/styles/common.scss
View file @ b7861a7c
......@@ -8,26 +8,23 @@
@import 'yui_grid';
$baseFontSize: 16px;
$baseLineHeight: 26px;
$sansFontFamily: "Source Sans Pro", $sansFontFamily;
$serifFontFamily: "Merriweather", $serifFontFamily;
$headingsColor: $textColor;
$base-font-size: 16px;
$base-line-height: 26px;
$sans-font-family: "Source Sans Pro", $sans-font-family;
$serif-font-family: "Merriweather", $serif-font-family;
$headings-color: $text-color;
//ELEMENT STYLES////////////////////////////////
a {
color: $linkColor;
&:hover { color: $linkColorHover; }
color: $link-color;
&:hover { color: $link-color-hover; }
text-decoration: none;
}
body {
background-color: $bodyBackground;
color: $textColor;
// FIXME
// font-smoothing: antialiased;
// -webkit-font-smoothing: antialiased;
background-color: $body-background;
color: $text-color;
line-height: 1.4;
}
......@@ -44,8 +41,8 @@ p {
em { font-style: italic; }
html {
font-size: $baseFontSize / 16px * 1em;
line-height: $baseLineHeight / 16px * 1em;
font-size: $base-font-size / 16px * 1em;
line-height: $base-line-height / 16px * 1em;
@include yui_grid();
......@@ -67,8 +64,8 @@ html {
}
h1, h2, h3, h4, h5, h6 {
font-family: $sansFontFamily;
color: $headingsColor;
font-family: $sans-font-family;
color: $headings-color;
}
h1 {
......@@ -116,11 +113,11 @@ h6 {
text-decoration: underline;
border: none;
cursor: pointer;
color: $linkColor;
color: $link-color;
position: static;
&:hover, &:focus, &.js-focus, &.js-hover {
color: $linkColorHover;
color: $link-color-hover;
}
}
......@@ -194,7 +191,7 @@ h6 {
}
.more, .less {
font-size: .9em;
font-family: $sansFontFamily;
font-family: $sans-font-family;
display: block;
text-align: right;
}
......@@ -202,13 +199,13 @@ h6 {
blockquote {
color: $gray;
font-family: $serifFontFamily;
font-family: $serif-font-family;
font-size: 1em;
margin-bottom: 1em;
padding: 0 .8em;
&:before, &:after {
color: $grayLighter;
color: $gray-lighter;
font-family: "h";
position: absolute;
}
......@@ -252,7 +249,7 @@ blockquote {
.dropdown-menu {
@include rotateX(90deg);
background: $white;
border: solid 1px $grayLighter;
border: solid 1px $gray-lighter;
margin-top: .8em;
top: 100%;
float: left;
......@@ -282,10 +279,10 @@ blockquote {
}
&.inactive {
font-weight: 400;
color: $grayLighter;
color: $gray-lighter;
cursor: default;
&:hover {
color: $grayLighter;
color: $gray-lighter;
}
& * {
cursor: default;
......@@ -293,7 +290,7 @@ blockquote {
}
& + li {
border-top: dotted 1px $grayLighter;
border-top: dotted 1px $gray-lighter;
}
}
......@@ -317,7 +314,7 @@ blockquote {
}
&:before {
border-bottom-color: $grayLighter;
border-bottom-color: $gray-lighter;
top: -7px;
}
......@@ -360,8 +357,8 @@ blockquote {
//TABS////////////////////////////////
.nav-tabs {
background-color: $bodyBackground;
border: 1px none $grayLighter;
background-color: $body-background;
border: 1px none $gray-lighter;
border-bottom-style: solid;
padding: 1em;
......@@ -370,9 +367,9 @@ blockquote {
line-height: 1;
a {
font-family: $sansFontFamily;
font-family: $sans-font-family;
font-weight: bold;
color: $grayDark;
color: $gray-dark;
cursor: pointer;
}
......@@ -411,7 +408,7 @@ blockquote {
.paper {
@include border-radius(2px);
background: $white;
border: solid 1px $grayLighter;
border: solid 1px $gray-lighter;
}
......@@ -419,25 +416,25 @@ blockquote {
//This is for everything that is formatted as an annotation.
.annotation {
@include pie-clearfix;
font-family: $sansFontFamily;
font-family: $sans-font-family;
position: relative;
&:hover fuzzytime a, &:hover .reply-count {
color: $linkColor;
color: $link-color;
}
fuzzytime {
margin: 0 .4em;
a {
color: $textColor;
&:hover { color: $linkColorHover; }
color: $text-color;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
}
}
.reply-count {
color: $textColor;
&:hover { color: $linkColorHover; }
color: $text-color;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }
}
......@@ -445,7 +442,7 @@ blockquote {
font-weight: bold;
font-size: 1.1em;
&:hover {
color: $linkColorHover;
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
......@@ -501,7 +498,7 @@ blockquote {
.annotation-displayer {
.user {
&:hover {
color: $linkColorHover;
color: $link-color-hover;
cursor: pointer;
text-decoration: underline;
}
......@@ -526,13 +523,13 @@ blockquote {
.load-more {
@include pie-clearfix;
font-family: $sansFontFamily;
font-family: $sans-font-family;
font-weight:bold;
font-size: .8em;
}
.thread {
border-left: 1px dotted $grayLight;
border-left: 1px dotted $gray-light;
height: 100%;
padding: 0;
padding-left: $thread-padding;
......@@ -585,7 +582,7 @@ blockquote {
display: block !important;
&:hover {
background-color: $grayLightest;
background-color: $gray-lightest;
}
& > ul {
......@@ -678,24 +675,24 @@ blockquote {
}
.card-emphasis {
@include box-shadow(6px 6px 8px -2px $grayLight);
@include box-shadow(6px 6px 8px -2px $gray-light);
}
}
//SEARCH HIGHLIGHTS////////////////////////////////
.search-hl-active {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px -1px #999999;
&::-moz-selection {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px #999999;
}
&::-moz-selection, &::-moz-window-inactive, &::window-inactive {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px #999999;
}
&::selection, &::selection:window-inactive {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px #999999;
}
}
......@@ -822,9 +819,9 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
@include smallshadow(0);
border-bottom-right-radius: 24px 72px;
border-bottom-left-radius: 24px 72px;
font-family: $sansFontFamily;
font-family: $sans-font-family;
background: $white;
border: solid 1px $grayLighter;
border: solid 1px $gray-lighter;
padding: 0 10px;
margin: 0 3px;
display: inline-block;
......
h/static/styles/forms.scss
View file @ b7861a7c
......@@ -10,28 +10,6 @@
margin-bottom: 1em;
}
%form-input-error-state {
&, &:focus, &.js-focus {
color: #b4777a;
border-color: #f5adb7;
background-color: #fff1f3;
}
@include placeholder {
color: #e0b0b0;
}
}
.form-field-error {
.form-input {
@extend %form-input-error-state;
}
.form-error-list {
display: block;
}
}
.form-input,
.form-label {
width: 100%;
......@@ -48,24 +26,24 @@
.form-hint {
font-size: 12px;
margin-left: 5px;
color: #949292;
color: $gray-light;
-webkit-font-smoothing: antialiased;
}
.form-required, .form-required[title] {
cursor: help;
color: #949292;
color: $gray-light;
border-bottom: none;
-webkit-font-smoothing: antialiased;
}
.form-input {
border: 1px solid #d8ddde;
border: 1px solid $gray-lighter;
border-radius: 2px;
padding: 7px 10px;
font-weight: normal;
font-size: 15px;
color: #797979;
color: $gray;
@include placeholder {
-webkit-font-smoothing: antialiased;
......@@ -73,16 +51,34 @@
&:focus, &.js-focus {
outline: none;
color: #7b776a;
border-color: #ece3c5;
background-color: #fffbeb;
border-color: $focus-yellow-dark;
background-color: $focus-yellow;
@include placeholder {
color: #cbbb95;
color: $focus-yellow-darker;
}
}
}
.form-field-error {
.form-input {
&, &:focus, &.js-focus {
color: $error-red;
border-color: $error-red-light;
background-color: $error-red-lightest;
}
@include placeholder {
color: $error-red-light;
}
}
.form-error-list {
display: block;
}
}
.form-select {
display: block;
}
......@@ -98,7 +94,7 @@
.form-error {
font-size: 13px;
line-height: 1.5;
color: #b4777a;
color: $error-red;
}
.form-checkbox-item {
......@@ -163,13 +159,13 @@
}
.btn {
@include background(linear-gradient(top, #fff, #f0f0f0));
@include background(linear-gradient($button-background-gradient...));
@include box-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
display: inline-block;
font-size: 13px;
font-weight: bold;
color: #585858;
color: $button-text-color;
text-shadow: 0 1px 0 #FFF;
border-radius: 2px;
border: 1px solid #ACACAC;
......@@ -178,14 +174,14 @@
&:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
@include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
outline: none;
color: #585858;
background: #fff;
color: $button-text-color;
background: $button-background-start;
border-color: #bababa;
}
&:active, &.js-active {
@include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.1));
background: #F0F0F0;
background: $button-background-end;
color: #424242;
border-color: #bababa;
}
......@@ -195,7 +191,7 @@
cursor: default;
background: #F0F0F0;
border-color: #CECECE;
color: #999;
color: $gray-light;
}
}
......@@ -209,11 +205,11 @@
}
&:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
color: $linkColor;
color: $link-color;
}
&:active, &.js-active {
color: $linkColorHover;
color: $link-color-hover;
}
}
......@@ -237,7 +233,7 @@
.btn-message {
font-size: 13px;
font-style: italic;
color: #999;
color: $gray-light;
margin-right: 6px;
position: absolute;
right: 100%;
......@@ -250,7 +246,7 @@
display: inline-block;
position: relative;
top: 0px;
background: #76B800;
background: $success-green;
border-radius: 50%;
color: #FFF;
font-size: 12px;
......
h/static/styles/inject.scss
View file @ b7861a7c
......@@ -3,12 +3,12 @@
@import 'compass/layout/stretching';
@import 'compass/reset/utilities';
$baseFontSize: 14px;
$base-font-size: 14px;
//ADDER////////////////////////////////
.annotator-adder {
$border: $gray;
$hoverborder: $grayDark;
$hoverborder: $gray-dark;
@include box-sizing(border-box);
height: 40px;
margin-left: -20px;
......@@ -56,7 +56,7 @@ $baseFontSize: 14px;
}
&:hover {
@include box-shadow(1px 1px 6px -2px $grayLight);
@include box-shadow(1px 1px 6px -2px $gray-light);
border-color: $hoverborder;
&:before {
......@@ -79,7 +79,7 @@ $baseFontSize: 14px;
svg {
@include stretch-y;
background: hsla(0, 0, 0, .1);
border-left: solid 1px $grayLighter;
border-left: solid 1px $gray-lighter;
height: 100%;
left: 18px;
width: $heatmap-width;
......@@ -112,9 +112,9 @@ $baseFontSize: 14px;
@include reset-box-model;
@include reset-font;
background: none;
color: $textColor;
color: $text-color;
font-weight: bold;
font-family: $sansFontFamily;
font-family: $sans-font-family;
font-size: 11px;
line-height: 20px;
left: 5px;
......@@ -203,24 +203,24 @@ $baseFontSize: 14px;
//HIGHLIGHTS////////////////////////////////
.annotator-highlights-always-on .annotator-hl,
.annotator-hl-active, .annotator-hl-temporary, .annotator-hl-focused {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px -1px #999999;
&::-moz-selection {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px #999999;
}
&::-moz-selection, &::-moz-window-inactive, &::window-inactive {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px #999999;
}
&::selection, &::selection:window-inactive {
background: $highlightColor;
background: $highlight-color;
box-shadow:3px 3px 4px #999999;
}
}
.annotator-highlights-always-on .annotator-hl {
background: $highlightModeColor;
background: $highlight-mode-color;
}
.annotator-highlights-always-on .annotator-hl-active,
......@@ -233,8 +233,8 @@ $baseFontSize: 14px;
@include reset-box-model;
@include user-select(none);
@extend .noise;
font-size: $baseFontSize;
line-height: $baseLineHeight;
font-size: $base-font-size;
line-height: $base-line-height;
height: 100%;
position: fixed;
top: 0;
......@@ -311,7 +311,7 @@ $baseFontSize: 14px;
@include transition-delay(0);
@include transition-timing-function(cubic-bezier(0, .55, .1, 1));
background: $white;
border: solid 1px $grayLighter;
border: solid 1px $gray-lighter;
left: 0;
margin-bottom: 5px;
overflow: hidden;
......@@ -333,7 +333,7 @@ $baseFontSize: 14px;
z-index: 1;
a, a:hover, a:active, a:visited, a:link, a:link:hover {
color: $linkColor;
color: $link-color;
}
}
......@@ -350,19 +350,19 @@ $baseFontSize: 14px;
text-decoration: none;
text-shadow:
0 0 2px $grayLightest,
0 0 2px $gray-lightest,
0 0 0 $gray;
&:focus { outline: 0; }
&:hover { color: $linkColorHover; }
&:hover { color: $link-color-hover; }
&.icon-comment {
text-shadow:
0 0 2px $grayLightest,
0 0 2px $gray-lightest,
0 0 0 $gray;
&:hover {
color: fade-out($grayLightest, .9);
color: fade-out($gray-lightest, .9);
}
}
}
......@@ -371,7 +371,7 @@ $baseFontSize: 14px;
// Toolbar notification counter
.annotator-notification-counter {
font-family: $sansFontFamily;
font-family: $sans-font-family;
pointer-events: none;
position: absolute;
margin-left: 11px;
......
h/static/styles/topbar.scss
View file @ b7861a7c
......@@ -20,7 +20,7 @@ body {
.topbar {
background: $white;
border: solid 1px $grayLighter;
border: solid 1px $gray-lighter;
border-style: solid none;
height: 30px;
line-height: 28px;
......@@ -54,7 +54,7 @@ body {
&.pull-right {
display: inline-block;
font-family: $sansFontFamily;
font-family: $sans-font-family;
}
& > * { margin: 0 .72em; }
......
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