Skip to content

C
coopwire-hypothesis
Commit 22cbf97f authored by Randall Leeds's avatar Randall Leeds
Browse files
Options

Merge pull request #1414 from hypothesis/tags-input-styles 

Styles the ngTagsInput
parents ccc6f437 9d9a0aae
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 1832 deletions
h/static/scripts/vendor/tag-it.js deleted 100644 → 0
View file @ ccc6f437
This diff is collapsed.
h/static/styles/base.scss
View file @ 22cbf97f
......@@ -18,10 +18,6 @@ $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;
......
h/static/styles/common.scss
View file @ 22cbf97f
......@@ -7,6 +7,7 @@
@import 'threads';
@import 'yui_grid';
@import 'simple-search';
@import 'tags-input';
$base-font-size: 16px;
......@@ -562,58 +563,6 @@ h6 {
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
// Tags for the annotations
.tags {
@include pie-clearfix;
@include reset-box-model;
@include reset-font;
background: none;
clear: both;
margin-top: .2em;
margin-bottom: .2em;
.tagit-choice {
border-radius: 2px;
padding: 0.307em 1.7em 0.307em 0.76em;
}
.tagit-close {
cursor: pointer;
position: absolute;
right: .1em;
top: 50%;
margin-top: -8px;
}
.tagit-new input[type=text] {
padding-top: 5px;
padding-bottom: 5px;
}
.text-icon { display: none; }
li {
cursor: pointer;
display: block;
float: left;
padding: .01em 1.3em .01em .3em;
position: relative;
margin-right: 0.4em;
&:hover { opacity: 1; }
&.tagit-new { padding: 0; }
}
&[readonly] {
.tagit-new, .tagit-close { display: none; }
li {
padding: .1em .3em;
font-size: 12px;
}
li.tagit-choice { margin-top: .1em; }
}
}
// View and Sort tabs ////////////////////
.viewsort {
@include single-transition(top, .25s);
......
h/static/styles/forms.scss
View file @ 22cbf97f
// Common form styles.
@import "mixins/forms";
@import "compass/css3/images";
@import "compass/utilities/general/clearfix";
......@@ -68,36 +69,17 @@
}
.form-input {
border: 1px solid $gray-lighter;
border-radius: 2px;
padding: 7px 10px;
font-weight: normal;
font-size: 15px;
color: $gray;
background-color: #FAFAFA;
@include form-input;
&:focus, &.js-focus {
outline: none;
background-color: #FFF;
border-color: #51A7E8;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 5px rgba(81, 167, 232, 0.5);
@include placeholder {
color: $gray;
}
@include form-input-focus;
}
}
.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;
@include form-input-error;
}
}
......@@ -207,44 +189,23 @@
}
.btn {
@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: $button-text-color;
text-shadow: 0 1px 0 #FFF;
border-radius: 2px;
border: 1px solid #ACACAC;
padding: 7px 12px 6px;
@include btn;
&:hover, &:active, &.js-hover, &.js-active {
@include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
outline: none;
color: $button-text-color;
background: $button-background-start;
border-color: #bababa;
&:hover, &:focus, &:active,
&.js-hover, &.js-focus, &.js-active {
@include btn-hover;
}
&:focus, &.js-focus {
border-color: #51A7E8;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 5px rgba(81, 167, 232, 0.5);
@include focus-outline;
}
&:active, &.js-active {
@include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.1));
background: $button-background-end;
color: #424242;
border-color: #bababa;
@include btn-active;
}
&[disabled], &.js-disabled {
@include box-shadow(none);
cursor: default;
background: #F0F0F0;
border-color: #CECECE;
color: $gray-light;
@include btn-disabled;
}
}
......
h/static/styles/jquery-ui-smoothness.css deleted 100644 → 0
View file @ ccc6f437
This diff is collapsed.
h/static/styles/mixins/forms.scss 0 → 100644
View file @ 22cbf97f
@import "../base";
@mixin focus-outline {
border-color: #51A7E8;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 5px rgba(81, 167, 232, 0.5);
}
@mixin form-input {
border: 1px solid $gray-lighter;
border-radius: 2px;
padding: 7px 10px;
font-weight: normal;
font-size: 15px;
color: $gray;
background-color: #FAFAFA;
}
@mixin form-input-focus {
outline: none;
background-color: #FFF;
@include focus-outline;
@include placeholder {
color: $gray;
}
}
@mixin form-input-error {
color: $error-red;
border-color: $error-red-light;
background-color: $error-red-lightest;
@include placeholder {
color: $error-red-light;
}
}
@mixin btn {
@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: $button-text-color;
text-shadow: 0 1px 0 #FFF;
border-radius: 2px;
border: 1px solid #ACACAC;
padding: 7px 12px 6px;
}
@mixin btn-hover {
@include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
outline: none;
color: $button-text-color;
background: $button-background-start;
border-color: #bababa;
}
@mixin btn-active {
@include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.1));
background: $button-background-end;
color: #424242;
border-color: #bababa;
}
@mixin btn-disabled {
@include box-shadow(none);
cursor: default;
background: #F0F0F0;
border-color: #CECECE;
color: $gray-light;
}
h/static/styles/tags-input.scss 0 → 100644
View file @ 22cbf97f
// Styles for the ngTagsInput plugin.
// http://mbenford.github.io/ngTagsInput/gettingstarted
@import "mixins/forms";
tags-input {
.host {
outline: none;
}
.tags {
@include form-input;
@include clearfix;
&.focused {
@include form-input-focus;
}
// Input
.input {
float: left;
margin-top: .33em;
padding: .2em 0;
outline: none;
border: none !important;
background: none;
color: $gray;
}
}
.tag-list {
margin-top: -.33em; // Absorb the first row of margin-top on the tags.
}
.tag-item {
@include btn;
float: left;
position: relative;
padding: .307em 1.538em .307em .615em;
margin-top: .384em;
margin-right: .384em;
&.selected {
@include btn-hover;
@include focus-outline;
}
.remove-button {
position: absolute;
top: 50%;
right: 5px;
color: #585858;
font-size: 20px;
cursor: pointer;
line-height: 1;
margin-top: -10px;
}
}
}
.tags-read-only {
font-size: 0.92em;
margin: 0.16em 0;
.tag-list, .tag-item {
display: inline;
}
.tag-item a:after {
content: ", ";
color: $text-color;
}
.tag-item:last-child a:after {
content: none;
}
}
karma.config.js
View file @ 22cbf97f
......@@ -23,6 +23,7 @@ module.exports = function(config) {
'h/static/scripts/vendor/angular-resource.js',
'h/static/scripts/vendor/angular-route.js',
'h/static/scripts/vendor/angular-sanitize.js',
'h/static/scripts/vendor/ng-tags-input.js',
'h/static/scripts/vendor/gettext.js',
'h/static/scripts/vendor/annotator.js',
'h/static/scripts/vendor/annotator.auth.js',
......@@ -41,16 +42,6 @@ module.exports = function(config) {
'h/static/scripts/vendor/Markdown.Converter.js',
'h/static/scripts/vendor/polyfills/raf.js',
'h/static/scripts/vendor/sockjs-0.3.4.js',
'h/static/scripts/vendor/jquery.ui.core.js',
'h/static/scripts/vendor/jquery.ui.position.js',
'h/static/scripts/vendor/jquery.ui.widget.js',
'h/static/scripts/vendor/jquery.ui.tooltip.js',
'h/static/scripts/vendor/jquery.ui.autocomplete.js',
'h/static/scripts/vendor/jquery.ui.menu.js',
'h/static/scripts/vendor/jquery.ui.effect.js',
'h/static/scripts/vendor/jquery.ui.effect-blind.js',
'h/static/scripts/vendor/jquery.ui.effect-highlight.js',
'h/static/scripts/vendor/tag-it.js',
'h/static/scripts/vendor/uuid.js',
'h/static/scripts/hypothesis-auth.js',
'h/static/scripts/hypothesis.js',
......
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