Skip to content

C
coopwire-hypothesis
Commit 12ef5bf0 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner
Browse files
Options

Remove unused SASS

parent a283ad28
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 785 deletions
src/styles/mixins/a11y.scss deleted 100644 → 0
View file @ a283ad28
// Hide content from sighted users but make it visible to screen readers.
//
// Resources:
// - https://webaim.org/techniques/css/invisiblecontent/ (see "CSS clip")
// - https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/#showing-additional-content-for-screen-readers
@mixin screen-reader-only {
// Take the content out of the normal layout flow.
position: absolute;
width: 1px;
height: 1px;
white-space: nowrap;
// Visually hide the content and prevent it from interfering with mouse/touch
// text selection by clipping it to an empty box. Compared to moving content with
// `top`/`left` this is less likely to cause the browser to scroll to a
// different part of the page when the hidden text has screen-reader focus.
clip: rect(0 0 0 0);
overflow: hidden;
}
src/styles/mixins/buttons.scss deleted 100644 → 0
View file @ a283ad28
/**
* Button mixins for use by the `Button` component or any component that wishes
* to override default `Button`-component styling. These mixins are meant to be
* applied to `<button>` HTML elements, with an optional contained icon
* (i.e. `SvgIcon` component or `<svg>` element).
*
* To customize default `Button` styling, start with an appropriate button mixin
* and extend or or override rules as necessary in your component's SCSS module.
*
* e.g., let's pretend you wish the `Button` used in `MyComponent`
* to have a pink background. In `my-component.scss`, you might do something like:
*
* .my-component-button {
* @include button--labeled;
* background-color: pink;
* }
*
* And pass 'my-component-button' as the `className` prop to `Button`.
*/
@use '@hypothesis/frontend-shared/styles/mixins/focus';
@use './layout';
@use './utils';
@use '../variables' as var;
@mixin reset-native-btn-styles {
@include focus.outline-on-keyboard-focus;
padding: 0;
margin: 0;
background-color: transparent;
border-style: none;
}
@mixin button-hover {
&:hover:not([disabled]),
&:focus:not([disabled]) {
color: var.$grey-7;
}
}
/**
* Basic color, sizing, padding and hover for buttons.
*/
@mixin button {
@include reset-native-btn-styles;
@include layout.row(center, center);
padding: 0.5em;
border-radius: var.$border-radius;
border: none;
transition: color 0.2s ease-out, background-color 0.2s ease-out,
opacity 0.2s ease-out;
// Icon
svg {
@include utils.icon--medium;
}
@include button-hover;
}
/*
* A button with an icon and no displayed text.
*
* @param {boolean} [$with-active-state] - Adds an active state color when pressed / expanded
* @param {boolean} [$coarse-min-size] - Overrides the minimum height and width in mobile view.
*/
@mixin button--icon-only(
$with-active-state: true,
$coarse-min-size: var.$touch-target-size
) {
@include button;
color: var.$grey-mid;
@media (pointer: coarse) {
min-width: $coarse-min-size;
min-height: $coarse-min-size;
}
@if $with-active-state == true {
&[aria-expanded='true'],
&[aria-pressed='true'] {
color: var.$color-brand;
&:hover:not([disabled]),
&:focus:not([disabled]) {
color: var.$color-brand;
}
}
}
}
/**
* A button with displayed text. It may or may not have an icon. The default
* colors assume the button is displayed on a white background.
*
* @param {CSSColor} [$background-color] - The button's background color when
* neither hovered nor active.
* @param {CSSColor} [$active-background-color]
*/
@mixin button--labeled(
$background-color: var.$grey-1,
$active-background-color: var.$grey-2
) {
@include button;
white-space: nowrap; // Keep multi-word button labels from wrapping
color: var.$grey-mid;
font-weight: 700;
background-color: $background-color;
&:hover:not([disabled]),
&:focus:not([disabled]) {
background-color: $active-background-color;
}
// Icon
svg {
margin: 0 5px 0 0;
}
}
/**
* A labeled button that is a primary action.
*/
@mixin button--primary {
@include button;
@include button--labeled;
color: var.$color-text--inverted;
background-color: var.$grey-mid;
&:hover:not([disabled]),
&:focus:not([disabled]) {
color: var.$color-text--inverted;
background-color: var.$grey-6;
}
&:disabled {
// Note: this color does not meet WCAG contrast requirements,
// but is admissable because it is applied to disabled elements
color: var.$grey-semi;
}
}
src/styles/mixins/forms.scss deleted 100644 → 0
View file @ a283ad28
@use '@hypothesis/frontend-shared/styles/mixins/focus';
@use './utils';
@use '../variables' as var;
/* Style input placeholders */
@mixin placeholder {
&.placeholder {
@content;
}
&:placeholder {
@content;
}
&::placeholder {
@content;
}
}
@mixin form-input-focus {
background-color: var.$white;
@include placeholder {
color: var.$color-text--light;
}
}
/**
* A text input field.
*
* @param {boolean} [$compact] - Style for a compact space, with tighter padding
*/
@mixin form-input($compact: false) {
@if $compact {
@include utils.font--small;
padding: var.$layout-space--xsmall;
} @else {
@include utils.font--medium;
padding: var.$layout-space--xsmall var.$layout-space--small;
}
@include utils.border;
@include focus.outline;
border-radius: var.$border-radius;
color: var.$color-text--light;
background-color: var.$grey-0;
// Tighten up spacing around text in input
line-height: 1;
&:focus {
@include form-input-focus;
}
@media (pointer: coarse) {
font-size: var.$touch-input-font-size;
}
}
src/styles/mixins/layout.scss deleted 100644 → 0
View file @ a283ad28
@use './responsive';
@use '../variables' as var;
@mixin sidebar-content {
margin-left: auto;
margin-right: auto;
@include responsive.respond-to(tablets desktops) {
margin: auto;
max-width: responsive.$break-tablet;
padding-left: 4rem;
padding-right: 4rem;
}
}
/**
* Abstract mixin for establishing basic flex container. External users should
* use `row` or `column` as needed. Default values here reflect default CSS
* values for flex rules.
*
* @param {string} $direction [row] - value for flex-direction (row or column).
* @param {string} $justify [flex-start] - How to align contents on main axis.
* Accepts and maps special value of 'right'
* (roughly analogous to horizontal alignment)
* @param {string} $align [stretch] - How to align contents on cross axis.
* (roughly analogous to vertical alignment)
*/
@mixin flex($direction: row, $justify: flex-start, $align: stretch) {
display: flex;
flex-direction: $direction;
@if $justify == right {
justify-content: flex-end;
} @else {
justify-content: $justify;
}
align-items: $align;
}
/**
* Establish a column (flex-direction: column) flex container.
*
* @param {string} $justify [flex-start] - How to justify flex contents
* @param {string} $align [stretch] - How to align flex contents
*/
@mixin column($justify: flex-start, $align: stretch) {
@include flex(column, $justify, $align);
}
/**
* Establish a row (flex-direction: column) flex container.
*
* @param {string} $justify [flex-start] - How to justify flex contents
* @param {string} $align [stretch] - How to align flex contents
*/
@mixin row($justify: flex-start, $align: stretch) {
@include flex(row, $justify, $align);
}
/**
* Establish a horizontal (margin) rhythm for this element's immediate
* children (i.e. put equal space between children).
*
* This mixin uses `!important` such that it can compete with specificity
* of reset rules that set some of our element's margins to 0. That allows
* these rules—which are applied to a parent element—to be able to assert
* margins, as it should be able to do.
*
* @param $size [5px] - Size of horizontal margin between child elements
*/
@mixin horizontal-rhythm($size: 5px) {
& > * + * {
margin-left: $size !important;
}
}
/**
* Establish a vertical (margin) rhythm for this element's immediate
* children (i.e. put equal space between children).
*
* This mixin uses `!important` such that it can compete with specificity
* of reset rules that set some of our element's margins to 0. That allows
* these rules—which are applied to a parent element—to be able to assert
* margins, as it should be able to do.
*
* @param $size [var.$layout-space--medium]: Spacing size (padding)
* @FIXME Find workaround for SvgIcon exception
*/
@mixin vertical-rhythm($size: var.$layout-space) {
& > * + *:not([class*='SvgIcon--inline']) {
margin-top: $size !important;
}
}
/**
* Establish vertical space outside of elements within the container
*
* @param $size [var.$layout-space--medium]: Spacing size (padding)
*/
@mixin vertical-space($size: var.$layout-space--medium) {
padding-top: $size;
padding-bottom: $size;
}
/**
* Establish horizontal space outside of elements within the container
*
* @param $size [var.$layout-space--medium]: Spacing size (padding)
*/
@mixin horizontal-space($size: var.$layout-space--medium) {
padding-left: $size;
padding-right: $size;
}
src/styles/mixins/molecules.scss deleted 100644 → 0
View file @ a283ad28
@use '../variables' as var;
@use './layout';
@use './utils';
/**
* A straightforward "frame" that serves as a basis for other card-like
* patterns. May be used on its own for components that don't need all of
* `card` or `panel's` bells and whistles.
*/
@mixin card-frame {
@include utils.border;
@include utils.shadow;
border-radius: var.$border-radius;
background-color: var.$color-background;
}
/**
* A pattern for styling a little "pointer" (arrow) icon that attaches to
* menu content and serves as a visual anchor back to the triggering
* button/element. When using, you'll need to provide the appropriate
* positioning details to get the pointer to be where you want it in the
* given menu.
*
* @param {string} [$direction] - Which direction the arrow should "point"
*/
@mixin menu-arrow($direction: 'up') {
position: absolute;
z-index: 2;
color: var.$color-border;
fill: var.$color-background;
@if ($direction == 'down') {
transform: rotateX(180deg);
}
}
src/styles/mixins/reset.scss deleted 100644 → 0
View file @ a283ad28
@mixin reset-font {
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
@mixin reset-box-model {
margin: 0;
padding: 0;
border: 0;
}
// Adapted from http://compass-style.org/reference/compass/reset/utilities/#mixin-nested-reset
@mixin nested-reset {
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
@include reset-box-model;
@include reset-font;
}
}
src/styles/mixins/responsive.scss deleted 100644 → 0
View file @ a283ad28
@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 meta.type-of($media) == 'string' {
@if $media == 'handhelds' {
@media only screen and (max-width: $break-wide-handheld) {
@content;
}
} @else if $media == 'wide-handhelds' {
@media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) {
@content;
}
} @else if $media == 'tablets' {
@media only screen and (min-width: $break-tablet + 1) and (max-width: $break-desktop) {
@content;
}
} @else if $media == 'desktops' {
@media only screen and (min-width: $break-desktop + 1) {
@content;
}
}
} @else if meta.type-of($media) == 'list' {
@if list.index($media, 'handhelds') {
@media only screen and (max-width: $break-wide-handheld) {
@content;
}
}
@if list.index($media, 'wide-handhelds') {
@media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) {
@content;
}
}
@if list.index($media, 'tablets') {
@media only screen and (min-width: $break-tablet + -1) and (max-width: $break-desktop) {
@content;
}
}
@if list.index($media, 'desktops') {
@media only screen and (min-width: $break-desktop + 1) {
@content;
}
}
}
}
@mixin breakpoint($min) {
@media only screen and (min-width: $min) {
@content;
}
}
// Mobile first media queries. Encourages development to work with mobile and
// modify as the viewport grows rather than designing for individual bands.
@mixin wide-handheld-and-up {
@include breakpoint($break-wide-handheld + 1) {
@content;
}
}
@mixin tablet-and-up {
@include breakpoint($break-tablet + 1) {
@content;
}
}
@mixin desktop-and-up {
@include breakpoint($break-desktop + 1) {
@content;
}
}
src/styles/mixins/utils.scss deleted 100644 → 0
View file @ a283ad28
@use '../variables' as var;
@mixin border {
border: var.$border-width solid var.$color-border;
}
@mixin border--top {
border-top: var.$border-width solid var.$color-border;
}
@mixin border--right {
border-right: var.$border-width solid var.$color-border;
}
@mixin border--bottom {
border-bottom: var.$border-width solid var.$color-border;
}
@mixin border--left {
border-left: var.$border-width solid var.$color-border;
}
@mixin icon--xsmall {
width: var.$icon-size--xsmall;
height: var.$icon-size--xsmall;
}
// TODO: This may be only applicable to mobile devices, and maybe should be
// conflated into icon--xsmall
@mixin icon--small {
width: var.$icon-size--small;
height: var.$icon-size--small;
}
@mixin icon--medium {
width: var.$icon-size--medium;
height: var.$icon-size--medium;
}
@mixin icon--large {
width: var.$icon-size--large;
height: var.$icon-size--large;
}
@mixin icon--inline {
width: 1em;
height: 1em;
}
@mixin font-base {
line-height: var.$line-height;
font-weight: normal;
color: var.$color-text;
}
@mixin font--xsmall {
@include font-base;
font-size: var.$font-size--xsmall;
}
@mixin font--small {
@include font-base;
font-size: var.$font-size--small;
}
@mixin font--medium {
@include font-base;
font-size: var.$font-size--medium;
}
@mixin font--large {
@include font-base;
font-size: var.$font-size--large;
font-weight: 500;
}
@mixin font--xlarge {
@include font-base;
font-size: var.$font-size--subheading;
font-weight: 500;
}
@mixin shadow {
box-shadow: 0 1px 1px var.$color-shadow--base;
}
@mixin shadow--active {
box-shadow: 0px 2px 3px 0px var.$color-shadow--active;
}
src/styles/shared/variables/_index.scss deleted 100644 → 0
View file @ a283ad28
@forward 'colors' as color-*;
$border-radius: 2px;
// Minimum recommended size for tap targets on mobile.
// This value originated from Apple's Human Interface Guidelines.
$touch-target-size: 44px;
src/styles/shared/variables/colors.scss deleted 100644 → 0
View file @ a283ad28
// Greys (layout colors)
// These may be used for non-textual styling of components and elements
$white: #fff !default;
// Interim color variable for migration purposes.
// Used as very-subtle background color for form fields. $grey-1 is too dark.
$grey-0: #fafafa;
$grey-1: #f2f2f2;
$grey-2: #ececec;
$grey-3: #dbdbdb;
$grey-4: #a6a6a6;
// Interim color variable for migration purposes, as the step between `$grey-4`
// and `$grey-5` is large. Represents `base-semi` in proposed future palette,
// minus blue tint.
$grey-semi: #9c9c9c;
// This is the lightest grey admissible on a white, $grey-0 or $grey-1
// background to meet WCAG-AA text contrast requirements.
$grey-5: #737373;
// Interim color variable for migration purposes, as the step between `$grey-5`
// and `$grey-6` is large. Represents `base-mid` in proposed future palette,
// minus blue tint.
// This is the lightest grey admissible on $grey-2, $grey-3
$grey-mid: #595959;
$grey-6: #3f3f3f;
$grey-7: #202020;
$brand: #bd1c2b;
$link-hover: #84141e !default;
src/styles/variables.scss deleted 100644 → 0
View file @ a283ad28
@use 'sass:color';
@use 'sass:math';
// Greys (layout colors)
// These may be used for non-textual styling of components and elements
$white: #fff !default;
// Interim color variable for migration purposes.
// Used as very-subtle background color for form fields. $grey-1 is too dark.
$grey-0: #fafafa;
$grey-1: #f2f2f2;
$grey-2: #ececec;
$grey-3: #dbdbdb;
$grey-4: #a6a6a6;
// Interim color variable for migration purposes, as the step between `$grey-4`
// and `$grey-5` is large. Represents `base-semi` in proposed future palette,
// minus blue tint.
$grey-semi: #9c9c9c;
// This is the lightest grey admissible on a white, $grey-0 or $grey-1
// background to meet WCAG-AA text contrast requirements.
$grey-5: #737373;
// Interim color variable for migration purposes, as the step between `$grey-5`
// and `$grey-6` is large. Represents `base-mid` in proposed future palette,
// minus blue tint.
// This is the lightest grey admissible on $grey-2, $grey-3
$grey-mid: #595959;
$grey-6: #3f3f3f;
$grey-7: #202020;
// Text colors
$color-text: $grey-7;
$color-text--light: $grey-5;
// Text color when used on a dark background
$color-text--inverted: $grey-1;
// Other colors
$color-success: #00a36d;
$color-notice: #fbc168;
$color-error: #d93c3f;
$color-brand: #bd1c2b;
$color-quote: #58cef4;
$color-shadow: #000000;
$color-shadow--base: color.scale($color-shadow, $alpha: -90%);
$color-shadow--active: color.scale($color-shadow, $alpha: -85%);
$color-shadow--sidebar: color.scale($color-shadow, $alpha: -50%);
$color-focus-outline: #51a7e8;
$color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);
$color-highlight: rgba(255, 255, 60, 0.4);
$color-highlight-second: rgba(206, 206, 60, 0.4);
$color-highlight-focused: rgba(156, 230, 255, 0.5);
// Scaffolding
// -------------------------
$color-background: $white;
// Links
// -------------------------
$color-link: $color-brand !default;
$color-link-hover: #84141e !default;
// Typography
// -------------------------
$sans-font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
sans-serif !default;
$mono-font-family: Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
$font-size--xsmall: 10px;
$font-size--small: 11px;
$font-size--medium: 13px;
$font-size--large: 14px;
$font-size--subheading: 16px;
$font-size--heading: 18px;
$line-height: 1.4;
// Minimum font size for <input> fields on iOS. If the font size is smaller than
// this, iOS will zoom into the field when focused.
$touch-input-font-size: 16px;
// Layout spacing
// -------------------------
$layout-space: 1em;
$layout-space--xxsmall: math.div($layout-space, 4);
$layout-space--xsmall: math.div($layout-space, 2);
$layout-space--small: math.div($layout-space * 3, 4);
$layout-space--medium: $layout-space;
$layout-space--large: $layout-space * 2;
$layout-space--xlarge: $layout-space * 4;
// Minimum recommended size for tap targets on mobile.
// This value originated from Apple's Human Interface Guidelines.
$touch-target-size: 44px;
// Other Variables
// -------------------------
$top-bar-height: 40px;
$border-radius: 2px;
$color-border: $grey-3;
$border-width: 1px;
$icon-size--xsmall: 10px;
$icon-size--small: 12px;
$icon-size--medium: 16px;
$icon-size--large: 24px;
// Selectors for applying clean-theme styling
$sidebar--theme-clean: '.theme-clean';
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