Merge pull request #5419 from /issues/5414

Consolidate core CSS styles

h/static/styles/admin.scss

@@ -1,19 +1,32 @@
-@import 'partials/base';
-@import 'partials/util';
+// Admin area
+// ============================================================================
+
+// Core
+// ----------------------------------------------------------------------------
+
+@import 'core/color';
+@import 'core/typography';
+@import 'core/layout';
+@import 'core/icons';
+@import 'core/utilities';
 
 // Components
-@import 'partials/admin-navbar';
-@import 'partials/btn';
-@import 'partials/form-actions';
-@import 'partials/form-checkbox';
-@import 'partials/form-container';
-@import 'partials/form-input';
-@import 'partials/form';
-@import 'partials/list-input';
-@import 'partials/search-form';
-@import 'partials/svg-icon';
-@import 'partials/tooltip';
-@import 'partials/warning-box';
+// ----------------------------------------------------------------------------
+
+@import 'components/admin-navbar';
+@import 'components/btn';
+@import 'components/form';
+@import 'components/form-actions';
+@import 'components/form-checkbox';
+@import 'components/form-container';
+@import 'components/form-input';
+@import 'components/list-input';
+@import 'components/search-form';
+@import 'components/tooltip';
+@import 'components/warning-box';
+
+// Rules
+// ----------------------------------------------------------------------------
 
 .flashbar {
   margin-top: 20px;

h/static/styles/partials/_form.scss → h/static/styles/components/_form.scss

@@ -1,3 +1,24 @@
+// Components: Form
+// ============================================================================
+
+// Mixins
+// ----------------------------------------------------------------------------
+
+@mixin focus-outline {
+  border-color: #51A7E8;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, .075) inset, 0px 0px 5px rgba(81, 167, 232, .5);
+}
+
+/* Style input placeholders */
+@mixin placeholder {
+  &.placeholder { @content; }
+  &:placeholder { @content; }
+  &::placeholder { @content; }
+}
+
+// Rules
+// ----------------------------------------------------------------------------
+
 // Standard layout for forms
 // -------------------------
 // Specs: https://goo.gl/pEV9E1

h/static/styles/core/_color.scss

@@ -0,0 +1,32 @@
+// Core: Color
+// ============================================================================
+
+// Variables
+// ----------------------------------------------------------------------------
+
+$white: white;
+$black: black;
+
+$grey-1: #f2f2f2;
+$grey-2: #ececec;
+$grey-3: #dbdbdb;
+$grey-4: #a6a6a6;
+$grey-5: #7a7a7a;
+$grey-6: #3f3f3f;
+$grey-7: #202020;
+
+$brand: #d00032;
+$highlight: #58cef4;
+$group-organization-color: #6d676d;
+
+// Functions
+// ----------------------------------------------------------------------------
+
+// Tint/shade functions from https://css-tricks.com/snippets/sass/tint-shade-functions
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}

h/static/styles/core/_icons.scss

@@ -0,0 +1,42 @@
+// Core: Icons
+// ============================================================================
+
+// Vendor
+// ----------------------------------------------------------------------------
+
+// Variables
+// ----------------------------------------------------------------------------
+
+// Mixins
+// ----------------------------------------------------------------------------
+
+// Mixin for targeting icomoon fonts. This keeps the class namespace in one
+// place rather than spreading it through individual files.
+// NOTE: If you want to target a specific icon in a component give it a
+// distinct class name rather than using the icon class.
+//
+// Usage:
+//
+//  .my-element {
+//    @include icons {
+//      color: red; // Make any icon red.
+//    }
+//  }
+@mixin icons {
+  [class^="h-icon-"], [class*=" h-icon-"] {
+    @content;
+  }
+}
+
+// Rules
+// ----------------------------------------------------------------------------
+
+.svg-icon {
+  // This apparently no-op transform triggers snapping of the <svg> element to
+  // the nearest pixel, resulting in sharper rendering of icons, assuming that
+  // the icon itself has been pixel-fitted.
+  //
+  // See also https://bugzilla.mozilla.org/show_bug.cgi?id=608812 and
+  // https://github.com/hypothesis/h/pull/4215#issuecomment-267012849
+  transform: translateX(0);
+}

h/static/styles/core/_layout.scss

@@ -0,0 +1,167 @@
+// Core: Layout
+// ============================================================================
+
+// Vendor
+// ----------------------------------------------------------------------------
+
+// Variables
+// ----------------------------------------------------------------------------
+
+// Z-index scale
+// -------------
+$zindex-modal-backdrop: 5; // Backdrop of a modal dialog or form
+$zindex-modal-content: 6;  // Content of a modal dialog or form
+$zindex-dropdown-menu: 10;
+$zindex-tooltip: 20;
+
+// Mobile device size breakpoints
+// ------------------------------
+// See the CSS width/height values at http://mydevice.io/devices/
+
+$max-phone-width: 500px;
+$tablet-width: 768px;
+$touch-target-size: 44px;
+
+$break-wide-handheld: 480px !default;
+$break-tablet: 768px !default;
+$break-desktop: 1024px !default;
+
+// Misc
+// ----
+$search-results-max-width: 950px;
+$search-results-margin-right: 30px;
+$search-result-sidebar-width: 285px;
+
+$content-max-width: $search-results-max-width + $search-results-margin-right + $search-result-sidebar-width;
+
+$content-padding-left: 30px;
+$content-padding-right: 60px;
+$content-padding-left-on-small-screens: 10px;
+$content-padding-right-on-small-screens: 10px;
+
+// Mixins
+// ----------------------------------------------------------------------------
+
+// Mixins for working with grids. A grid consists of an outer grid container
+// and internal columns. Each column has a gutter defined by $grid-gutter.
+// The implementation is largely based on the grid system created by
+// Harry Roberts <http://csswizardry.com/csswizardry-grids/> and the Yahoo
+// Pure system <http://git.io/ogODXA>
+
+// Sets up styles for the grid wrapper.
+@mixin grid-row($gutter: 0) {
+  margin: 0;
+  padding: 0;
+  // Remove the margin from the first column.
+  margin-left: -$gutter;
+  // Removes whitespace on browsers that do not support flexbox.
+  letter-spacing: -0.31em;
+  // Remove optimizeLegibility if applied.
+  text-rendering: optimizespeed;
+
+  // Removes whitespaec between elements in supporting browsers.
+  display: -webkit-flex;
+  -webkit-flex-flow: row wrap;
+  display: -ms-flexbox;
+  -ms-flex-flow: row wrap;
+
+  @content;
+}
+
+// Defines a column, can be included in any selector, widths can be provided
+// by passing a @content block.
+//
+// Example
+//
+// .my-awkward-item {
+//   @include grid-column($default-gutter) { width: 43%; }
+// }
+@mixin grid-column($gutter: 0) {
+  display: inline-block;
+  vertical-align: top;
+  padding-left: $gutter;
+  vertical-align: top;
+  width: 100%;
+  box-sizing: border-box;
+
+  // Reset letter spacing.
+  letter-spacing: normal;
+  text-rendering: auto;
+
+  @content;
+}
+
+// Defines selectors for a class based grid system. Only includes a few common
+// sizes at the moment, but can be expanded as necessary.
+@mixin grid-setup($namespace: "") {
+  .#{$namespace}1-1 { width: 100%; }
+  .#{$namespace}1-2 { width: 50%; }
+  .#{$namespace}1-3 { width: 33.333%; }
+  .#{$namespace}2-3 { width: 66.666%; }
+  .#{$namespace}1-4 { width: 25%; }
+  .#{$namespace}3-4 { width: 75%; }
+}
+
+
+@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;
+  }
+}
+
+// Mixin for styling elements to make them more finger-friendly on touch-input
+// devices.
+//
+// Use interaction media queries where available (see
+// http://caniuse.com/#feat=css-media-interaction) or fall back to relying on a
+// JS-added class on the <html> or <body> elements otherwise.
+@mixin touch-input {
+  @media (pointer: coarse) {
+    @content;
+  }
+  .env-touch {
+    @content;
+  }
+}
+
+// Rules
+// ----------------------------------------------------------------------------
+
+// 1. Fixes for https://github.com/hypothesis/h/issues/4236
+// --------------------------------------------------------
+
+html {
+  display: flex; // 1
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-height: 100vh; // 1
+  width: 100vw; // 1
+}
+
+main {
+  flex-grow: 1; // 1
+}