Skip to content

C
coopwire-hypothesis
Commit b0c07366 authored by Aron Carroll's avatar Aron Carroll
Browse files
Options

Convert SCSS variables into hyphen case 

This makes all the variables consistent with each other and follows
CSS language conventions of lowercase with hyphens separating words.

Also updated form module to use our css color variables.
parent 9f9b4ab9
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 162 deletions
h/static/styles/app.scss
View file @ b0c07366
......@@ -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 @ b0c07366
@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,10 +92,10 @@ $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;
......@@ -121,8 +119,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 +138,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 +174,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 @ b0c07366
......@@ -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 @ b0c07366
......@@ -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 @ b0c07366
......@@ -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 @ b0c07366
......@@ -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