Skip to content

C
coopwire-hypothesis
Commit b91add96 authored by Robert Knight's avatar Robert Knight
Browse files
Options

Migrate .scss files to SASS modules 

Migrate .scss files to SASS modules using:

```
sass-migrator module --load-path=node_modules/ --migrate-deps
src/styles/annotator/annotator.scss src/styles/sidebar/sidebar.scss
```

This was previously done for the lms app in https://github.com/hypothesis/lms/pull/1057
parent 3167a2db
Hide whitespace changes
Inline Side-by-side
Showing with 455 additions and 358 deletions
src/styles/annotator/adder.scss
View file @ b91add96
@use '../variables' as var;
$adder-transition-duration: 80ms;
// Main class for the root element of the "adder" toolbar that appears when the
......@@ -16,7 +18,7 @@ $adder-transition-duration: 80ms;
box-sizing: border-box;
direction: ltr;
position: absolute;
background: $white;
background: var.$white;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
......@@ -58,7 +60,7 @@ $adder-transition-duration: 80ms;
@mixin adder-arrow($rotation) {
transform: rotate($rotation);
background: $white;
background: var.$white;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.2);
content: '';
......@@ -96,11 +98,11 @@ $adder-transition-duration: 80ms;
}
.annotator-adder-actions:hover .annotator-adder-actions__button {
color: $gray-light !important;
color: var.$gray-light !important;
}
.annotator-adder-actions:hover .annotator-adder-actions__label {
color: $gray-light !important;
color: var.$gray-light !important;
}
.annotator-adder-actions__button {
......@@ -108,7 +110,7 @@ $adder-transition-duration: 80ms;
font-family: h;
font-size: 18px;
background: transparent !important;
color: $gray-dark !important;
color: var.$gray-dark !important;
display: flex;
flex-direction: column;
align-items: center;
......@@ -124,10 +126,10 @@ $adder-transition-duration: 80ms;
}
.annotator-adder-actions .annotator-adder-actions__button:hover {
color: $gray-dark !important;
color: var.$gray-dark !important;
.annotator-adder-actions__label {
color: $gray-dark !important;
color: var.$gray-dark !important;
}
}
......@@ -135,6 +137,6 @@ $adder-transition-duration: 80ms;
font-size: 11px;
margin: 2px 0px;
font-family: sans-serif;
color: $gray-dark !important;
color: var.$gray-dark !important;
transition: color $adder-transition-duration;
}
src/styles/annotator/annotator.scss
View file @ b91add96
@import '../variables';
@import '../mixins/icons';
@import '../mixins/focus';
@import '../mixins/reset';
@import '../mixins/shadow';
@use "sass:meta";
@use '../variables' as var;
@use '../mixins/icons';
@use '../mixins/focus';
@use '../mixins/reset';
@use '../mixins/shadow';
@import './adder';
@import './bucket-bar';
@use './adder';
@use './bucket-bar';
$base-font-size: 14px;
var.$base-font-size: 14px;
//HIGHLIGHTS////////////////////////////////
.annotator-highlights-always-on {
.annotator-hl {
background-color: $highlight-color;
background-color: var.$highlight-color;
cursor: pointer;
}
.annotator-hl .annotator-hl {
background-color: $highlight-color-second;
background-color: var.$highlight-color-second;
}
.annotator-hl .annotator-hl .annotator-hl {
background-color: $highlight-color-third;
background-color: var.$highlight-color-third;
}
}
.annotator-hl.annotator-hl-focused {
background-color: $highlight-color-focus !important;
background-color: var.$highlight-color-focus !important;
.annotator-hl {
background-color: transparent !important;
......@@ -41,16 +42,16 @@ $base-font-size: 14px;
// FIXME - This component and other annotator components which currently
// live on the page could be isolated from the host page's CSS/JS via
// transparent same-origin iframes
@import '../reset';
@include nested-reset;
@include reset-box-model;
@include meta.load-css('../reset');
@include reset.nested-reset;
@include reset.reset-box-model;
// frame styles
user-select: none;
direction: ltr;
background: none;
font-size: $base-font-size;
line-height: $base-line-height;
font-size: var.$base-font-size;
line-height: var.$base-line-height;
height: 100%;
position: fixed;
top: 0;
......@@ -78,7 +79,7 @@ $base-font-size: 14px;
position: relative;
}
@include icons {
@include icons.icons {
font-family: 'h';
}
......@@ -92,7 +93,7 @@ $base-font-size: 14px;
// have higher specificity
.annotator-toolbar {
position: absolute;
left: -($bucket-bar-width + 18px - 7px);
left: -(var.$bucket-bar-width + 18px - 7px);
width: 37px;
z-index: 2;
......@@ -104,19 +105,19 @@ $base-font-size: 14px;
li {
box-sizing: border-box;
list-style: none;
@include reset-box-model;
@include reset.reset-box-model;
}
}
.annotator-frame-button {
@include outline-on-keyboard-focus;
@include focus.outline-on-keyboard-focus;
transition: background-color 0.25s;
@include smallshadow;
background: $white;
border: solid 1px $gray-lighter;
@include shadow.smallshadow;
background: var.$white;
border: solid 1px var.$gray-lighter;
border-radius: 4px;
color: $gray-light;
color: var.$gray-light;
text-decoration: none;
height: 30px;
width: 30px;
......@@ -125,12 +126,12 @@ $base-font-size: 14px;
margin-bottom: 5px;
&:active {
background-color: $gray-light;
background-color: var.$gray-light;
}
&:focus,
&:hover {
color: $text-color;
color: var.$text-color;
}
}
......@@ -141,7 +142,7 @@ $base-font-size: 14px;
padding-right: 6px;
width: 36px;
margin-bottom: 10px;
height: $top-bar-height;
height: var.$top-bar-height;
}
.annotator-frame-button--sidebar_close {
......
src/styles/annotator/bucket-bar.scss
View file @ b91add96
@use "../mixins/reset";
@use "../mixins/shadow";
@use "../variables" as var;
// Bucket-bar styles are nested inside `.annotator-frame` to ensure they take
// precedence over the CSS reset applied to `.annotator-frame`.
.annotator-frame {
......@@ -6,14 +10,14 @@
pointer-events: none;
position: absolute;
height: 100%;
width: $bucket-bar-width;
left: -($bucket-bar-width);
width: var.$bucket-bar-width;
left: -(var.$bucket-bar-width);
}
.annotator-bucket-indicator {
box-sizing: border-box;
background: $white;
border: solid 1px $gray-lighter;
background: var.$white;
border: solid 1px var.$gray-lighter;
border-radius: 2px 4px 4px 2px;
right: 0;
pointer-events: all;
......@@ -27,12 +31,12 @@
cursor: pointer;
.label {
@include reset-box-model;
@include reset-font;
@include reset.reset-box-model;
@include reset.reset-font;
background: none;
color: $text-color;
color: var.$text-color;
font-weight: bold;
font-family: $sans-font-family;
font-family: var.$sans-font-family;
font-size: 10px;
line-height: 14px;
margin: 0 auto;
......@@ -53,19 +57,19 @@
&:before {
border-width: 8px;
border-right: 5px solid $gray-lighter;
border-right: 5px solid var.$gray-lighter;
margin-top: -8px;
}
&:after {
border-width: 7px;
border-right: 4px solid $white;
border-right: 4px solid var.$white;
margin-top: -7px;
}
&.lower,
&.upper {
@include smallshadow;
@include shadow.smallshadow;
z-index: 1;
&:before,
......@@ -89,13 +93,13 @@
&:before {
border-width: 13px;
border-bottom: 6px solid $gray-lighter;
border-bottom: 6px solid var.$gray-lighter;
margin-left: -13px;
}
&:after {
border-width: 12px;
border-bottom: 5px solid $white;
border-bottom: 5px solid var.$white;
margin-left: -12px;
}
}
......@@ -111,13 +115,13 @@
&:before {
border-width: 13px;
border-top: 6px solid $gray-lighter;
border-top: 6px solid var.$gray-lighter;
margin-left: -13px;
}
&:after {
border-width: 12px;
border-top: 5px solid $white;
border-top: 5px solid var.$white;
margin-left: -12px;
}
}
......
src/styles/forms.scss
View file @ b91add96
@use "mixins/forms";
@use "variables" as var;
// Common form styles.
.form-field {
@include pie-clearfix;
@include forms.pie-clearfix;
clear: both;
margin-bottom: 0.75em;
}
......@@ -12,11 +15,11 @@
}
.form-input {
@include form-input;
@include forms.form-input;
&:focus,
&.js-focus {
@include form-input-focus;
@include forms.form-input-focus;
}
}
......@@ -27,29 +30,29 @@
}
.form-actions {
@include pie-clearfix;
@include forms.pie-clearfix;
margin-top: 0.75em;
}
.btn {
@include btn;
@include forms.btn;
&:hover,
&:focus,
&:active {
@include btn-hover;
@include forms.btn-hover;
}
&:focus {
@include focus-outline;
@include forms.focus-outline;
}
&:active {
@include btn-active;
@include forms.btn-active;
}
&[disabled] {
@include btn-disabled;
@include forms.btn-disabled;
}
}
......@@ -68,15 +71,15 @@
&:focus,
&:hover,
&:active {
color: $link-color;
color: var.$link-color;
}
&:active {
color: $link-color-hover;
color: var.$link-color-hover;
}
&[disabled] {
color: $text-color;
color: var.$text-color;
}
}
......
src/styles/mixins/forms.scss
View file @ b91add96
@use "../variables" as var;
/* Style input placeholders */
@mixin placeholder {
&.placeholder {
......@@ -27,12 +29,12 @@
}
@mixin form-input {
@include font-normal;
border: 1px solid $gray-lighter;
@include var.font-normal;
border: 1px solid var.$gray-lighter;
border-radius: 2px;
padding: 0.5em 0.75em;
font-weight: normal;
color: $gray;
color: var.$gray;
background-color: #fafafa;
}
......@@ -42,44 +44,44 @@
@include focus-outline;
@include placeholder {
color: $gray;
color: var.$gray;
}
}
@mixin form-input-error {
color: $error-color;
border-color: color-weight($error-color, 300);
background-color: color-weight($error-color, 50);
color: var.$error-color;
border-color: var.color-weight(var.$error-color, 300);
background-color: var.color-weight(var.$error-color, 50);
@include placeholder {
color: tint($error-color, 5%);
color: var.tint(var.$error-color, 5%);
}
}
@mixin btn {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background: linear-gradient($button-background-gradient);
background: linear-gradient(var.$button-background-gradient);
display: inline-block;
font-weight: bold;
color: $button-text-color;
color: var.$button-text-color;
text-shadow: 0 1px 0 #fff;
border-radius: 2px;
border: 1px solid $gray-light;
border: 1px solid var.$gray-light;
padding: 0.5em 0.9em;
}
@mixin btn-hover {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
outline: none;
color: $button-text-color;
background: $button-background-start;
color: var.$button-text-color;
background: var.$button-background-start;
border-color: #bababa;
}
@mixin btn-active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
background: $button-background-end;
background: var.$button-background-end;
color: #424242;
border-color: #bababa;
}
......@@ -89,27 +91,27 @@
cursor: default;
background: #f0f0f0;
border-color: #cecece;
color: $gray-light;
color: var.$gray-light;
}
@mixin primary-action-btn {
color: $grey-1;
background-color: $color-dove-gray;
color: var.$grey-1;
background-color: var.$color-dove-gray;
height: 35px;
border: none;
border-radius: 2px;
font-weight: bold;
font-size: $body1-font-size;
font-size: var.$body1-font-size;
padding-left: 12px;
padding-right: 12px;
&:disabled {
color: $gray-light;
color: var.$gray-light;
}
&:hover:enabled {
background-color: $color-mine-shaft;
background-color: var.$color-mine-shaft;
}
}
src/styles/mixins/responsive.scss
View file @ b91add96
@use "sass:list";
@use "sass:meta";
$break-wide-handheld: 480px !default;
$break-tablet: 768px !default;
$break-desktop: 1024px !default;
// DEPRECATED: Use mobile first mixins defined below.
@mixin respond-to($media) {
@if type-of($media) == 'string' {
@if meta.type-of($media) == 'string' {
@if $media == 'handhelds' {
@media only screen and (max-width: $break-wide-handheld) {
@content;
......@@ -22,23 +24,23 @@ $break-desktop: 1024px !default;
@content;
}
}
} @else if type-of($media) == 'list' {
@if index($media, 'handhelds') {
} @else if meta.type-of($media) == 'list' {
@if list.index($media, 'handhelds') {
@media only screen and (max-width: $break-wide-handheld) {
@content;
}
}
@if index($media, 'wide-handhelds') {
@if list.index($media, 'wide-handhelds') {
@media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) {
@content;
}
}
@if index($media, 'tablets') {
@if list.index($media, 'tablets') {
@media only screen and (min-width: $break-tablet + -1) and (max-width: $break-desktop) {
@content;
}
}
@if index($media, 'desktops') {
@if list.index($media, 'desktops') {
@media only screen and (min-width: $break-desktop + 1) {
@content;
}
......
src/styles/reset.scss
View file @ b91add96
@import 'mixins/reset';
@use 'mixins/reset';
/*
Consistency fixes
......@@ -57,7 +57,7 @@ input,
textarea,
button,
select {
@include reset-font;
@include reset.reset-font;
line-height: normal;
margin: 0;
}
......@@ -82,7 +82,7 @@ img::-moz-selection {
ul,
ol,
li {
@include reset-box-model;
@include reset.reset-box-model;
}
ul,
......
src/styles/sidebar/common.scss
View file @ b91add96
@use "../variables" as var;
//ELEMENT STYLES////////////////////////////////
body {
position: relative;
background-color: $body-background;
color: $text-color;
background-color: var.$body-background;
color: var.$text-color;
}
p {
......@@ -18,14 +20,14 @@ em {
}
html {
font-size: $base-font-size;
line-height: $base-line-height;
font-size: var.$base-font-size;
line-height: var.$base-line-height;
}
//MCRANDOM////////////////////////////////
.small {
font-size: $body1-font-size;
font-size: var.$body1-font-size;
}
//CLOSER////////////////////////////////
......@@ -42,8 +44,8 @@ html {
//FORM RELATED////////////////////////////////
.form-vertical {
legend {
font-size: $body1-font-size;
line-height: $body1-line-height;
font-size: var.$body1-font-size;
line-height: var.$body1-line-height;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
......@@ -66,9 +68,9 @@ html {
line-height: 1;
a {
font-family: $sans-font-family;
font-family: var.$sans-font-family;
font-weight: bold;
color: $gray-dark;
color: var.$gray-dark;
cursor: pointer;
border-bottom: 3px solid transparent;
padding-left: 0.153em;
......@@ -86,7 +88,7 @@ html {
}
&.active a {
border-color: $gray-lighter;
border-color: var.$gray-lighter;
}
&:before {
......
src/styles/sidebar/components/annotation-document-info.scss
View file @ b91add96
@use "../../variables" as var;
.annotation-document-info {
font-size: 13px;
color: $grey-5;
color: var.$grey-5;
display: flex;
&__title {
......
src/styles/sidebar/components/annotation-header.scss
View file @ b91add96
@use "../../mixins/forms";
@use "../../variables" as var;
.annotation-header {
@include pie-clearfix;
@include forms.pie-clearfix;
// Margin between top of x-height of username and
// top of the annotation card should be ~15px
margin-top: -$layout-h-margin + 10px;
color: $grey-5;
margin-top: -(var.$layout-h-margin) + 10px;
color: var.$grey-5;
&__row {
display: flex;
......@@ -16,9 +19,9 @@
}
&__timestamp-edited {
@include font-small;
@include var.font-small;
font-style: italic;
color: $grey-4;
color: var.$grey-4;
}
&__timestamp-created-link {
......@@ -28,7 +31,7 @@
}
&__timestamp-created-link {
color: $grey-5;
color: var.$grey-5;
}
&__highlight {
......
src/styles/sidebar/components/annotation-publish-control.scss
View file @ b91add96
@use "../../mixins/forms";
@use "../../variables" as var;
.annotation-publish-control {
display: flex;
&__cancel-btn {
margin-left: 5px;
font-weight: normal;
color: $grey-4;
color: var.$grey-4;
&:hover {
color: $grey-5;
color: var.$grey-5;
}
&__icon {
......@@ -19,9 +22,9 @@
// A split button with a primary submit on the left and a drop-down menu
// of related options to the right
.annotation-publish-control__btn {
$text-color: $grey-1;
$default-background-color: $color-dove-gray;
$hover-background-color: $color-mine-shaft;
$text-color: var.$grey-1;
$default-background-color: var.$color-dove-gray;
$hover-background-color: var.$color-mine-shaft;
$h-padding: 9px;
$height: 35px;
$border-radius: 2px;
......@@ -42,7 +45,7 @@
}
&-primary {
@include primary-action-btn;
@include forms.primary-action-btn;
// the label occupies the entire space of the button and
// shows a darker state on hover
......@@ -67,7 +70,7 @@
margin-left: 8px;
border: none;
background-color: $color-dove-gray;
background-color: var.$color-dove-gray;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
......@@ -81,7 +84,7 @@
button[aria-expanded='true'] &-separator {
// hide the 1px vertical separator when the dropdown arrow
// is hovered or menu is open
background-color: $color-dove-gray;
background-color: var.$color-dove-gray;
}
// 1px vertical separator between label and dropdown arrow
......@@ -95,7 +98,7 @@
width: 1px;
height: 15px;
background-color: $color-gray;
background-color: var.$color-gray;
}
// the ▼ arrow which reveals the dropdown menu when clicked
......
src/styles/sidebar/components/annotation-share-dialog.scss
View file @ b91add96
@use "../../variables" as var;
.annotation-share-dialog.is-open {
display: flex;
flex-direction: column;
......@@ -9,11 +11,11 @@
right: 0;
bottom: 130%;
z-index: 1;
background: $white;
border: 1px solid $gray-lighter;
background: var.$white;
border: 1px solid var.$gray-lighter;
border-radius: 2px;
width: 200px;
font-size: $body1-font-size;
font-size: var.$body1-font-size;
cursor: default;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
......@@ -33,14 +35,14 @@
&:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: $white;
border-top-color: var.$white;
border-width: 5px;
margin-right: -5px;
}
&:before {
border-color: rgba(211, 211, 211, 0);
border-top-color: $gray-lighter;
border-top-color: var.$gray-lighter;
border-width: 6px;
margin-right: -6px;
}
......@@ -60,7 +62,7 @@
}
.annotation-share-dialog-msg {
color: $gray-light;
color: var.$gray-light;
margin: -5px 10px 10px 10px;
line-height: 15px;
font-size: 11px;
......@@ -73,13 +75,13 @@
.annotation-share-dialog-link {
position: relative;
font-size: $body1-font-size;
font-size: var.$body1-font-size;
margin: 10px;
padding: 5px;
color: $text-color;
border: 1px solid $gray-lighter;
color: var.$text-color;
border: 1px solid var.$gray-lighter;
border-radius: 2px;
background: $grey-1;
background: var.$grey-1;
white-space: nowrap;
overflow: hidden;
display: flex;
......@@ -87,7 +89,7 @@
}
.annotation-share-dialog-link:hover {
color: $gray-dark;
color: var.$gray-dark;
}
.annotation-share-dialog-link__text {
......@@ -99,21 +101,21 @@
}
.annotation-share-dialog-link__btn {
color: $grey-5;
color: var.$grey-5;
padding: 0px;
margin-left: 7px;
}
.annotation-share-dialog-link__btn:hover {
color: $grey-7;
color: var.$grey-7;
}
.annotation-share-dialog-target {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid $gray-lighter;
font-size: $body1-font-size;
border-bottom: 1px solid var.$gray-lighter;
font-size: var.$body1-font-size;
padding: 10px;
}
......@@ -122,7 +124,7 @@
}
.annotation-share-dialog-target__icon {
color: $grey-5;
color: var.$grey-5;
text-decoration: none;
font-size: 20px;
cursor: pointer;
......@@ -131,7 +133,7 @@
}
.annotation-share-dialog-target__icon:hover {
color: $grey-7;
color: var.$grey-7;
}
// Feedback message displayed after the user copies the link to the clipboard
......
src/styles/sidebar/components/annotation-share-info.scss
View file @ b91add96
@use "../../variables" as var;
.annotation-share-info {
display: flex;
align-items: baseline;
......@@ -6,8 +8,8 @@
&__private {
display: flex;
align-items: baseline;
font-size: $body1-font-size;
color: $grey-5;
font-size: var.$body1-font-size;
color: var.$grey-5;
}
&__group-info {
......
src/styles/sidebar/components/annotation-thread.scss
View file @ b91add96
@use "../../variables" as var;
.annotation-thread {
display: flex;
flex-direction: row;
......@@ -33,7 +35,7 @@ li:first-child .annotation-thread--top-reply {
// The dashed line at the left edge of replies
.annotation-thread__thread-line {
border-right: 1px dashed $grey-3;
border-right: 1px dashed var.$grey-3;
flex-grow: 1;
}
......@@ -48,7 +50,7 @@ li:first-child .annotation-thread--top-reply {
// when the annotation itself is hovered, not the replies.
.annotation-thread__collapse-toggle:hover,
.annotation-thread__collapse-toggle.is-hovered {
color: $grey-7;
color: var.$grey-7;
}
// Toggle arrow which expands and collapses threads.
......@@ -56,7 +58,7 @@ li:first-child .annotation-thread--top-reply {
// to the left of the threads.
.annotation-thread__collapse-toggle {
width: 10px;
color: $grey-4;
color: var.$grey-4;
display: block;
text-align: center;
......
src/styles/sidebar/components/annotation-user.scss
View file @ b91add96
@use "../../variables" as var;
.annotation-user {
&__user-name {
@include font-normal;
color: $grey-7;
@include var.font-normal;
color: var.$grey-7;
font-weight: bold;
.is-dimmed & {
color: $grey-5;
color: var.$grey-5;
}
.is-highlighted & {
color: $grey-7;
color: var.$grey-7;
}
}
}
src/styles/sidebar/components/annotation.scss
View file @ b91add96
@use "../../mixins/forms";
@use "../../mixins/icons";
@use "../../variables" as var;
@mixin quote {
@include font-normal;
@include var.font-normal;
border-left: 3px solid $gray-lighter;
color: $grey-4;
border-left: 3px solid var.$gray-lighter;
color: var.$grey-4;
font-family: sans-serif;
font-size: 12px;
font-style: italic;
......@@ -12,7 +16,7 @@
// Highlight quote of annotation whenever its thread is hovered
.thread-list__card:hover .annotation-quote {
border-left: $highlight 3px solid;
border-left: var.$highlight 3px solid;
}
// When hovering a top-level annotation, show the footer in a hovered state.
......@@ -23,17 +27,17 @@
.annotation-replies__link,
.annotation-replies__count,
.annotation-action-btn {
color: $grey-6;
color: var.$grey-6;
}
.annotation-header__timestamp-link {
color: $grey-5;
color: var.$grey-5;
}
}
.annotation {
display: block;
font-family: $sans-font-family;
font-family: var.$sans-font-family;
position: relative;
}
......@@ -41,7 +45,7 @@
// Lighten the bodies of dimmed annotations to make other
// annotations which are not dimmed stand out
.annotation-body {
color: $grey-5;
color: var.$grey-5;
}
}
......@@ -50,13 +54,13 @@
// make them stand out next to others, which will have the `is-dimmed` state
// set
.annotation-body {
color: $grey-7;
color: var.$grey-7;
}
}
.annotation-link {
@include font-small;
color: $grey-4;
@include var.font-small;
color: var.$grey-4;
// Decrease the margin between the more/less link
// and the annotation body.
margin-top: -12px;
......@@ -70,16 +74,16 @@
.annotation-quote-list,
.annotation-footer {
@include pie-clearfix;
@include forms.pie-clearfix;
}
.annotation-body {
@include font-normal;
color: $grey-6;
@include var.font-normal;
color: var.$grey-6;
// Margin between top of ascent of annotation body and
// bottom of ascent of annotation-quote should be ~15px.
margin-top: $layout-h-margin - 5px;
margin-bottom: $layout-h-margin;
margin-top: var.$layout-h-margin - 5px;
margin-bottom: var.$layout-h-margin;
margin-right: 0px;
margin-left: 0px;
}
......@@ -100,8 +104,8 @@
height: 60px;
background: repeating-linear-gradient(
to bottom,
$grey-2,
$grey-2 15px,
var.$grey-2,
var.$grey-2 15px,
white 15px,
white 20px
);
......@@ -110,9 +114,9 @@
// the footer at the bottom of an annotation displaying
// the annotation actions and reply counts
.annotation-footer {
@include font-normal;
color: $grey-5;
margin-top: $layout-h-margin;
@include var.font-normal;
color: var.$grey-5;
margin-top: var.$layout-h-margin;
}
.u-flex-spacer {
......@@ -122,10 +126,10 @@
.annotation-quote-list {
// Margin between top of ascent of annotation quote and
// bottom of ascent of username should be ~15px
margin-top: $layout-h-margin - 5px;
margin-top: var.$layout-h-margin - 5px;
// Margin between bottom of ascent of annotation quote and
// top of ascent of annotation-body should be ~15px
margin-bottom: $layout-h-margin - 3px;
margin-bottom: var.$layout-h-margin - 3px;
}
.annotation-quote-list.is-orphan {
......@@ -144,8 +148,8 @@
.annotation-replies__link,
.annotation-replies__count {
@include font-normal;
color: $grey-5;
@include var.font-normal;
color: var.$grey-5;
}
.annotation-actions {
......@@ -155,7 +159,7 @@
}
.annotation-action-btn {
color: $grey-5;
color: var.$grey-5;
font-weight: normal;
padding: 0;
margin: 0px 0px 0px 12px;
......@@ -173,8 +177,8 @@
}
.annotation-citation-domain {
color: $gray-light;
font-size: $body1-font-size;
color: var.$gray-light;
font-size: var.$body1-font-size;
}
.annotation-license {
......@@ -183,15 +187,15 @@
font-size: 0.8em;
padding-top: 0.583em;
@include icons {
font-size: $normal-font-size;
@include icons.icons {
font-size: var.$normal-font-size;
vertical-align: -2px;
margin-right: 1px;
}
}
.annotation-license__link {
color: $gray-light;
color: var.$gray-light;
display: block;
}
......@@ -232,13 +236,13 @@
// Style adjustments for annotation cards that are replies
.annotation--reply {
.annotation-action-btn {
color: $grey-4;
color: var.$grey-4;
}
.annotation-footer {
// Margin between bottom of ascent of annotation body and
// top of annotation footer should be ~15px
margin-top: $layout-h-margin - 8px;
margin-top: var.$layout-h-margin - 8px;
}
.annotation-header {
......@@ -250,14 +254,14 @@
.annotation-body {
// Margin between top of ascent of annotation body and
// bottom of ascent of username should be ~15px
margin-top: $layout-h-margin - 8px;
margin-top: var.$layout-h-margin - 8px;
// Margin between bottom of ascent of annotation body and
// top of annotation footer labels should be ~15px
margin-bottom: $layout-h-margin - 3px;
margin-bottom: var.$layout-h-margin - 3px;
}
}
.annotation--flagged {
color: $brand;
color: var.$brand;
cursor: default;
}
src/styles/sidebar/components/excerpt.scss
View file @ b91add96
@use "../../variables" as var;
@at-root {
$expand-duration: 0.15s;
......@@ -28,11 +30,11 @@
.excerpt__toggle-link {
padding-left: 15px;
background-image: linear-gradient(to right, transparent 0px, white 12px);
line-height: $normal-line-height;
line-height: var.$normal-line-height;
}
.excerpt__toggle-link > a {
color: $text-color;
color: var.$text-color;
font-style: italic;
font-weight: normal;
}
......
src/styles/sidebar/components/focused-mode-header.scss
View file @ b91add96
@use "../../mixins/focus";
@use "../../mixins/forms";
// A dark grey button used for the primary action
// in a form
.focused-mode-header {
......@@ -5,8 +8,8 @@
align-items: center;
&__btn {
@include primary-action-btn;
@include outline-on-keyboard-focus;
@include forms.primary-action-btn;
@include focus.outline-on-keyboard-focus;
display: flex;
margin-left: auto;
height: 30px;
......
src/styles/sidebar/components/group-list-item.scss
View file @ b91add96
@use "../../variables" as var;
// Footer to display at the bottom of a menu item.
.group-list-item__footer {
background-color: $grey-1;
background-color: var.$grey-1;
margin: 0;
padding-top: 15px;
padding: 10px;
......
src/styles/sidebar/components/group-list.scss
View file @ b91add96
@use "../../variables" as var;
.group-list__content {
min-width: 250px;
}
.group-list__menu-label {
align-items: center;
color: $grey-6;
color: var.$grey-6;
display: flex;
// Prevent label from wrapping if top bar is too narrow to fit all of its
// items.
flex-shrink: 0;
font-size: $body2-font-size;
font-size: var.$body2-font-size;
font-weight: bold;
}
......
src/styles/sidebar/components/help-panel.scss
View file @ b91add96
@use "../../variables" as var;
.help-panel {
&__sub-panel-title {
margin: 0;
......@@ -8,10 +10,10 @@
&__content {
padding: 0.5em;
border-top: 1px solid $grey-3;
border-bottom: 1px solid $grey-3;
line-height: $normal-line-height;
font-size: $normal-font-size;
border-top: 1px solid var.$grey-3;
border-bottom: 1px solid var.$grey-3;
line-height: var.$normal-line-height;
font-size: var.$normal-font-size;
}
&__icon {
......@@ -30,7 +32,7 @@
display: flex;
align-items: center;
margin-left: auto;
color: $brand;
color: var.$brand;
&-icon {
margin-left: 2px;
......@@ -46,10 +48,10 @@
&__tab {
flex: 1 1 0px;
margin-top: 0.5em;
border-right: 1px solid $grey-3;
border-right: 1px solid var.$grey-3;
text-align: center;
font-size: 1.25em;
color: $grey-5;
color: var.$grey-5;
&:last-of-type {
border-right: none;
......@@ -57,7 +59,7 @@
}
&__link {
color: $grey-5;
color: var.$grey-5;
}
&__icon {
......
src/styles/sidebar/components/logged-out-message.scss
View file @ b91add96
@use "../../variables" as var;
.logged-out-message {
margin: 25px auto;
width: 70%;
text-align: center;
color: $grey-5;
color: var.$grey-5;
display: flex;
flex-direction: column;
}
.logged-out-message__link {
text-decoration: underline;
color: $grey-5;
color: var.$grey-5;
&:hover {
color: $grey-7;
color: var.$grey-7;
}
}
......@@ -24,9 +26,9 @@
.logged-out-message__logo-icon {
font-size: 30px;
color: $grey-4;
color: var.$grey-4;
&:hover {
color: $grey-7;
color: var.$grey-7;
}
}
src/styles/sidebar/components/markdown-editor.scss
View file @ b91add96
$toolbar-border: 0.1em solid $grey-3;
@use "../../variables" as var;
$toolbar-border: 0.1em solid var.$grey-3;
.markdown-editor__toolbar {
display: flex;
......@@ -22,7 +24,7 @@ $toolbar-border: 0.1em solid $grey-3;
border: none;
background: none;
color: $grey-5;
color: var.$grey-5;
font-size: 16px;
&:hover,
......@@ -31,7 +33,7 @@ $toolbar-border: 0.1em solid $grey-3;
}
&:disabled {
color: $grey-3;
color: var.$grey-3;
}
&.is-text {
......@@ -41,13 +43,13 @@ $toolbar-border: 0.1em solid $grey-3;
.markdown-editor__preview {
border: $toolbar-border;
background-color: $grey-1;
background-color: var.$grey-1;
padding: 10px;
}
@media (pointer: coarse) {
.markdown-editor__input {
font-size: $touch-input-font-size;
font-size: var.$touch-input-font-size;
}
.markdown-editor__toolbar {
......@@ -69,8 +71,8 @@ $toolbar-border: 0.1em solid $grey-3;
// Make the toolbar buttons larger and easier to tap.
.markdown-editor__toolbar-button {
min-width: $touch-target-size;
min-height: $touch-target-size;
min-width: var.$touch-target-size;
min-height: var.$touch-target-size;
font-size: 20px;
}
}
src/styles/sidebar/components/markdown-view.scss
View file @ b91add96
@use "../styled-text";
.markdown-view {
@include styled-text;
@include styled-text.styled-text;
cursor: text;
......
src/styles/sidebar/components/menu-item.scss
View file @ b91add96
@use "sass:color";
@use "../../mixins/focus";
@use "../../variables" as var;
$menu-item-padding: 10px;
.menu-item {
@include outline-on-keyboard-focus;
@include focus.outline-on-keyboard-focus;
$item-height: 40px;
color: $grey-6;
color: var.$grey-6;
display: flex;
flex-direction: row;
flex-grow: 1;
......@@ -23,8 +27,8 @@ $menu-item-padding: 10px;
// An item in a submenu associated with a top-level item.
&--submenu {
min-height: $item-height - 10px;
background: $grey-1;
color: mix($grey-5, $grey-6, $weight: 50%);
background: var.$grey-1;
color: color.mix(var.$grey-5, var.$grey-6, $weight: 50%);
font-weight: normal;
}
......@@ -35,7 +39,7 @@ $menu-item-padding: 10px;
&.is-expanded {
// Set the background color of menu items with submenus to match the
// submenu items.
background: $grey-1;
background: var.$grey-1;
}
}
......@@ -51,26 +55,26 @@ $menu-item-padding: 10px;
padding-left: $menu-item-padding;
&:hover {
background: $grey-1;
background: var.$grey-1;
.menu-item.is-expanded & {
// Since expanded items already have a light grey background, we need to
// make the hover state a little darker. This should match submenu items'
// hover state.
background: $grey-3;
background: var.$grey-3;
}
// Since submenu items already have a light grey background, we need to
// use a slightly darker grey as the hover state.
.menu-item--submenu & {
background: $grey-3;
color: $grey-6;
background: var.$grey-3;
color: var.$grey-6;
}
}
.menu-item.is-selected & {
$border-width: 4px;
border-left: $border-width solid $brand;
border-left: $border-width solid var.$brand;
padding-left: $menu-item-padding - $border-width;
}
}
......@@ -111,16 +115,16 @@ $menu-item-padding: 10px;
}
.menu-item.is-disabled & {
color: $grey-4;
color: var.$grey-4;
}
}
// Toggle button used to expand or collapse the submenu associated with a menu
// item.
.menu-item__toggle {
@include outline-on-keyboard-focus;
@include focus.outline-on-keyboard-focus;
color: $grey-4;
color: var.$grey-4;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -130,7 +134,7 @@ $menu-item-padding: 10px;
// Add a wide transparent border to provide a large-enough hit target (~40px),
// larger than the visual size of the button (~20px).
background-color: $grey-1;
background-color: var.$grey-1;
background-clip: content-box;
border: 7px solid transparent;
......@@ -139,8 +143,8 @@ $menu-item-padding: 10px;
border-radius: 12px;
&:hover {
background-color: $grey-3;
color: $grey-5;
background-color: var.$grey-3;
color: var.$grey-5;
}
&-icon {
......@@ -151,5 +155,5 @@ $menu-item-padding: 10px;
// The container for open submenus
.menu-item__submenu {
border-bottom: solid 1px $grey-2;
border-bottom: solid 1px var.$grey-2;
}
src/styles/sidebar/components/menu-section.scss
View file @ b91add96
@use "../../variables" as var;
.menu-section__content {
border-bottom: solid 1px $grey-3;
border-bottom: solid 1px var.$grey-3;
}
.menu-section__heading {
color: $gray-light;
font-size: $body1-font-size;
color: var.$gray-light;
font-size: var.$body1-font-size;
line-height: 1;
margin: 1px 1px 0;
margin-bottom: 10px;
......
src/styles/sidebar/components/menu.scss
View file @ b91add96
@use "../../mixins/focus";
@use "../../variables" as var;
.menu {
position: relative;
}
// Toggle button that opens the menu.
.menu__toggle {
@include outline-on-keyboard-focus;
@include focus.outline-on-keyboard-focus;
appearance: none;
border: none;
......@@ -36,7 +39,7 @@
// Triangular indicator at the top of the menu that associates it with the
// toggle button.
.menu__arrow {
color: $grey-3;
color: var.$grey-3;
fill: white;
// Position the arrow so that it appears flush with the right edge of the
......@@ -52,9 +55,9 @@
// Content area of the menu.
.menu__content {
background-color: white;
border: 1px solid $grey-3;
border: 1px solid var.$grey-3;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
font-size: $body2-font-size;
font-size: var.$body2-font-size;
position: absolute;
top: calc(100% + 5px);
z-index: 1;
......
src/styles/sidebar/components/moderation-banner.scss
View file @ b91add96
@use "../../variables" as var;
@at-root {
// Horizontal margin between edge of annotation card and content
$h-padding: 15px;
......@@ -8,7 +10,7 @@
color: white;
display: flex;
flex-direction: row;
font-size: $normal-font-size;
font-size: var.$normal-font-size;
font-weight: bold;
}
......@@ -46,10 +48,10 @@
}
.moderation-banner.is-flagged:not(.is-hidden) {
background-color: $brand;
background-color: var.$brand;
}
.moderation-banner.is-hidden {
background-color: $grey-6;
background-color: var.$grey-6;
}
}
src/styles/sidebar/components/new-note.scss
View file @ b91add96
@use "../../variables" as var;
.new-note__create {
background-color: $color-dove-gray;
background-color: var.$color-dove-gray;
border: none;
border-radius: 3px;
color: #fff;
......
src/styles/sidebar/components/primary-action-btn.scss
View file @ b91add96
@use "../../mixins/forms";
@use "../../variables" as var;
// A dark grey button used for the primary action
// in a form
.primary-action-btn {
@include primary-action-btn;
@include forms.primary-action-btn;
}
.primary-action-btn--short {
......@@ -9,7 +12,7 @@
}
.primary-action-btn__icon {
color: $grey-4;
color: var.$grey-4;
display: inline-block;
font-weight: bold;
margin-left: -3px;
......
src/styles/sidebar/components/search-input.scss
View file @ b91add96
@use "../../mixins/focus";
@use "../../variables" as var;
.search-input__form {
display: flex;
flex-flow: row nowrap;
position: relative;
color: $gray-dark;
color: var.$gray-dark;
}
.search-input__icon {
......@@ -11,12 +14,12 @@
}
.search-input__input {
@include outline-on-keyboard-focus;
@include focus.outline-on-keyboard-focus;
flex-grow: 1;
order: 1;
color: $text-color;
color: var.$text-color;
// Disable default browser styling for the input.
border: none;
......@@ -34,7 +37,7 @@
&:disabled {
background: none;
color: $gray-light;
color: var.$gray-light;
}
// Expand the search input when focused (triggered by clicking
......@@ -48,6 +51,6 @@
@media (pointer: coarse) {
.search-input__input {
font-size: $touch-input-font-size;
font-size: var.$touch-input-font-size;
}
}
src/styles/sidebar/components/selection-tabs.scss
View file @ b91add96
@use "../../mixins/focus";
@use "../../variables" as var;
.selection-tabs {
display: flex;
flex-direction: row;
color: $grey-5;
@include font-normal;
color: var.$grey-5;
@include var.font-normal;
&:hover {
color: $grey-6;
color: var.$grey-6;
}
padding-bottom: 10px;
......@@ -16,9 +19,9 @@
}
.selection-tabs__type {
@include outline-on-keyboard-focus;
@include focus.outline-on-keyboard-focus;
color: $grey-6;
color: var.$grey-6;
margin-right: 20px;
cursor: pointer;
min-width: 85px;
......
src/styles/sidebar/components/share-annotations-panel.scss
View file @ b91add96
@use "../../variables" as var;
@use "../../mixins/buttons";
@use "../../mixins/links";
.share-annotations-panel {
color: $grey-5;
color: var.$grey-5;
&__intro {
color: $grey-7;
color: var.$grey-7;
font-weight: 500;
}
......
src/styles/sidebar/components/tags-input.scss
View file @ b91add96
@use "../../mixins/forms";
@use "../../variables" as var;
// Styles for the ngTagsInput plugin.
// http://mbenford.github.io/ngTagsInput/gettingstarted
......@@ -9,10 +12,10 @@ tags-input {
.tags {
display: flex;
flex-wrap: wrap;
@include form-input;
@include forms.form-input;
&.focused {
@include form-input-focus;
@include forms.form-input-focus;
}
// Input
......@@ -21,7 +24,7 @@ tags-input {
outline: none;
border: none !important;
background: none;
color: $gray;
color: var.$gray;
// Firefox and Webkit render input boxes at different heights. This
// causes issues when the tags (which render consistentely) are inserted
......@@ -42,14 +45,14 @@ tags-input {
margin-top: 0.384em;
margin-right: 0.384em;
font-size: 0.866em;
color: $grey-6;
border: 1px solid $grey-4;
background-color: $grey-3;
color: var.$grey-6;
border: 1px solid var.$grey-4;
background-color: var.$grey-3;
border-radius: 2px;
&.selected {
@include btn-hover;
@include focus-outline;
@include forms.btn-hover;
@include forms.focus-outline;
}
.remove-button {
......@@ -71,7 +74,7 @@ tags-input {
}
.tags-read-only {
font-size: $normal-font-size;
font-size: var.$normal-font-size;
margin: 0.4545em 0;
.tag-list {
......@@ -79,25 +82,25 @@ tags-input {
flex-wrap: wrap;
// Margin between bottom of ascent of annotation body and
// top of tags list should be ~15px
margin-top: -$layout-h-margin + 10px;
margin-top: -(var.$layout-h-margin) + 10px;
// Margin between top of x-height of annotation footer
// labels and bottom of tags list should be ~15px
margin-bottom: $layout-h-margin - 10px;
margin-bottom: var.$layout-h-margin - 10px;
.tag-item {
margin: 0 0.4545em 0.4545em 0;
a {
text-decoration: none;
border: 1px solid $grey-3;
border: 1px solid var.$grey-3;
border-radius: 2px;
padding: 0 0.4545em 0.1818em;
color: $grey-6;
background: $grey-2;
color: var.$grey-6;
background: var.$grey-2;
&:hover,
&:focus {
color: $link-color-hover;
color: var.$link-color-hover;
}
}
}
......@@ -126,12 +129,12 @@ tags-input .autocomplete {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: $sans-font-family;
font-family: var.$sans-font-family;
color: black;
background-color: white;
em {
font-family: $sans-font-family;
font-family: var.$sans-font-family;
font-weight: bold;
font-style: normal;
color: black;
......
src/styles/sidebar/components/thread-list.scss
View file @ b91add96
@use "../../variables" as var;
.thread-list {
& > * {
// Default spacing between items in the annotation card list
......@@ -9,8 +11,8 @@
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
border-radius: 2px;
cursor: pointer;
padding: $layout-h-margin;
background-color: $white;
padding: var.$layout-h-margin;
background-color: var.$white;
&:hover {
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
......
src/styles/sidebar/components/tooltip.scss
View file @ b91add96
@use "../../variables" as var;
// Tooltips
// --------
// Custom tooltips that appear instantly, replacing the browser's default
......@@ -5,7 +7,7 @@
@mixin tooltip-arrow($rotation) {
transform: rotate($rotation);
background: $grey-7;
background: var.$grey-7;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.2);
content: '';
......@@ -21,18 +23,18 @@
// The tooltip background
.tooltip {
@include font-small;
@include var.font-small;
border-radius: 2px;
position: fixed;
background-color: $grey-7;
background-color: var.$grey-7;
color: white;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
padding-top: 4px;
padding-bottom: 4px;
z-index: $zindex-tooltip;
z-index: var.$zindex-tooltip;
}
// Arrow at the bottom of the tooltip pointing at the target element
......
src/styles/sidebar/components/top-bar.scss
View file @ b91add96
@use "../../mixins/buttons";
@use "../../variables" as var;
.top-bar {
background: $white;
border-bottom: solid 1px $grey-3;
height: $top-bar-height;
background: var.$white;
border-bottom: solid 1px var.$grey-3;
height: var.$top-bar-height;
// TODO bring into standard rhythm of typography
font-size: 15px;
position: absolute;
......@@ -21,7 +24,7 @@
.top-bar__login-links {
flex-shrink: 0;
font-size: $body2-font-size;
font-size: var.$body2-font-size;
padding-left: 5px;
}
......@@ -54,27 +57,27 @@
}
.top-bar__btn {
@include reset-native-btn-styles;
@include buttons.reset-native-btn-styles;
height: 100%;
color: $gray-light;
color: var.$gray-light;
display: inline-block;
cursor: pointer;
padding: 1px 3px 0 3px;
&:hover {
color: $gray-dark;
color: var.$gray-dark;
}
&.is-active {
color: $gray-dark;
color: var.$gray-dark;
}
&--refresh {
color: $brand;
color: var.$brand;
&:hover {
color: $brand;
color: var.$brand;
}
}
}
src/styles/sidebar/components/tutorial.scss
View file @ b91add96
@use "../../variables" as var;
.tutorial {
&__list {
margin-top: 0em;
......@@ -13,7 +15,7 @@
height: 12px;
margin-right: 1px;
margin-bottom: -1px; // Pull the icon a little toward the baseline
color: $grey-5;
color: var.$grey-5;
}
&__instruction {
......
src/styles/sidebar/components/version-info.scss
View file @ b91add96
@use "../../variables" as var;
@use "../../mixins/buttons";
.version-info {
......@@ -11,14 +13,14 @@
line-height: 1.25em;
text-align: right;
font-weight: 500;
color: $grey-6;
color: var.$grey-6;
}
&__value {
margin-bottom: 0.5em;
margin-left: 8em;
overflow-wrap: break-word; // Keep really long userids from overflowing
color: $grey-6;
color: var.$grey-6;
}
&__actions {
......
src/styles/sidebar/elements.scss
View file @ b91add96
@use "../variables" as var;
// basic standard styling for elements
a {
color: $link-color;
color: var.$link-color;
text-decoration: none;
}
......@@ -11,7 +13,7 @@ a:focus {
a:hover {
text-decoration: none;
color: $link-color-hover;
color: var.$link-color-hover;
}
ol {
......
src/styles/sidebar/sidebar.scss
View file @ b91add96
$base-font-size: 12px;
$base-line-height: 20px;
// Variables and mixins
// --------------------
@import '../variables';
@import '../mixins/buttons';
@import '../mixins/focus';
@import '../mixins/forms';
@import '../mixins/icons';
@import '../mixins/responsive';
@use '../variables' as var with (
$base-font-size: 12px,
$base-line-height: 20px
);
@use '../mixins/buttons';
@use '../mixins/focus';
@use '../mixins/forms';
@use '../mixins/icons';
@use '../mixins/responsive';
// Base styles
// -----------
@import '../reset';
@import '../util';
@import './elements';
@use '../reset';
@use '../util';
@use './elements';
// Misc. legacy :(
// ---------------
@import '../forms';
@import './styled-text';
@import './common';
@use '../forms' as forms2;
@use './styled-text';
@use './common';
// Components
// ----------
@import './components/action-button';
@import './components/annotation';
@import './components/annotation-document-info';
@import './components/annotation-header';
@import './components/annotation-share-dialog';
@import './components/annotation-share-info';
@import './components/annotation-publish-control';
@import './components/annotation-thread';
@import './components/annotation-user';
@import './components/excerpt';
@import './components/focused-mode-header';
@import './components/group-list';
@import './components/group-list-item';
@import './components/help-panel';
@import './components/logged-out-message';
@import './components/markdown-editor';
@import './components/markdown-view';
@import './components/menu';
@import './components/menu-item';
@import './components/menu-section';
@import './components/moderation-banner';
@import './components/new-note';
@import './components/primary-action-btn';
@import './components/search-status-bar';
@import './components/selection-tabs';
@import './components/share-annotations-panel';
@import './components/search-input';
@import './components/sidebar-panel';
@import './components/svg-icon';
@import './components/spinner';
@import './components/tags-input';
@import './components/thread-list';
@import './components/tooltip';
@import './components/top-bar';
@import './components/tutorial';
@import './components/version-info';
@use './components/action-button';
@use './components/annotation';
@use './components/annotation-document-info';
@use './components/annotation-header';
@use './components/annotation-share-dialog';
@use './components/annotation-share-info';
@use './components/annotation-publish-control';
@use './components/annotation-thread';
@use './components/annotation-user';
@use './components/excerpt';
@use './components/focused-mode-header';
@use './components/group-list';
@use './components/group-list-item';
@use './components/help-panel';
@use './components/logged-out-message';
@use './components/markdown-editor';
@use './components/markdown-view';
@use './components/menu';
@use './components/menu-item';
@use './components/menu-section';
@use './components/moderation-banner';
@use './components/new-note';
@use './components/primary-action-btn';
@use './components/search-status-bar';
@use './components/selection-tabs';
@use './components/share-annotations-panel';
@use './components/search-input';
@use './components/sidebar-panel';
@use './components/svg-icon';
@use './components/spinner';
@use './components/tags-input';
@use './components/thread-list';
@use './components/tooltip';
@use './components/top-bar';
@use './components/tutorial';
@use './components/version-info';
// Top-level styles
// ----------------
......@@ -69,8 +70,8 @@ body {
}
body {
background: $grey-2;
font-family: $sans-font-family;
background: var.$grey-2;
font-family: var.$sans-font-family;
font-weight: normal;
-webkit-overflow-scrolling: touch;
}
......@@ -83,15 +84,15 @@ hypothesis-app {
.app-content-wrapper {
$sidebar-h-padding: 9px;
background: $grey-2;
background: var.$grey-2;
min-height: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
padding: $sidebar-h-padding;
padding-top: $sidebar-h-padding + $top-bar-height;
padding-top: $sidebar-h-padding + var.$top-bar-height;
@include respond-to(tablets desktops) {
@include responsive.respond-to(tablets desktops) {
padding-bottom: 4rem;
}
}
......@@ -100,9 +101,9 @@ hypothesis-app {
margin-left: auto;
margin-right: auto;
@include respond-to(tablets desktops) {
@include responsive.respond-to(tablets desktops) {
margin: auto;
max-width: $break-tablet;
max-width: responsive.$break-tablet;
padding-left: 4rem;
padding-right: 4rem;
}
......@@ -112,17 +113,17 @@ hypothesis-app {
// ---------------------------------------
.sheet {
border: solid 1px $gray-lighter;
border: solid 1px var.$gray-lighter;
border-radius: 2px;
font-family: $sans-font-family;
font-family: var.$sans-font-family;
font-weight: 300;
margin-bottom: 0.72em;
padding: 1em;
position: relative;
background-color: $body-background;
background-color: var.$body-background;
.nav-tabs {
border: 1px none $gray-lighter;
border: 1px none var.$gray-lighter;
border-bottom-style: solid;
padding: 0 0 1.1em;
li a {
......@@ -152,7 +153,7 @@ hypothesis-app {
.annotation-unavailable-message {
display: flex;
flex-direction: column;
border: 1px solid $gray-lighter;
border: 1px solid var.$gray-lighter;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 3px;
......
src/styles/sidebar/styled-text.scss
View file @ b91add96
@use "../variables" as var;
@mixin styled-text() {
// Reset the line-height in case any parent elements have set it.
line-height: normal;
......@@ -23,7 +25,7 @@
h4,
h5,
h6 {
font-family: $sans-font-family;
font-family: var.$sans-font-family;
}
// Use a modular scale for headings:
......@@ -105,10 +107,10 @@
}
blockquote {
@include font-normal;
@include var.font-normal;
border-left: 3px solid $grey-3;
color: $grey-4;
border-left: 3px solid var.$grey-3;
color: var.$grey-4;
font-family: sans-serif;
font-size: 12px;
font-style: italic;
......@@ -132,7 +134,7 @@
}
code {
font-family: $mono-font-family;
font-family: var.$mono-font-family;
font-size: 0.875em;
color: black;
}
......@@ -140,7 +142,7 @@
pre code {
padding: 10px;
display: block;
background-color: $grey-1;
background-color: var.$grey-1;
border-radius: 2px;
}
}
src/styles/variables.scss
View file @ b91add96
@use "sass:color";
// Colors and shades of gray
// Names courtesy of http://chir.ag/projects/name-that-color
......@@ -42,11 +43,11 @@ $highlight: #58cef4;
// Tint and shade functions from
// https://css-tricks.com/snippets/sass/tint-shade-functions
@function tint($color, $percent) {
@return mix(white, $color, $percent);
@return color.mix(white, $color, $percent);
}
@function shade($color, $percent) {
@return mix(black, $color, $percent);
@return color.mix(black, $color, $percent);
}
@function color-weight($c, $n: 500) {
......
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