common.scss

//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// stylelint-disable

@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");

@import "../packages/mdc-theme/color-palette";

// Base style
$mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
$mdc-theme-secondary: #018786 !default; // baseline teal, 600 tone

// All demo pages have a top toolbar, and most of them use theme variables.
// Import these *after* setting theme colors to override defaults in mdc-theme.
@import "../packages/mdc-theme/mdc-theme";
@import "../packages/mdc-toolbar/mdc-toolbar";
@import "../packages/mdc-typography/mdc-typography";

// Used by ready.js to test whether the CSS has finished loading.
.demo-ready-detect {
  position: relative;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.catalog-title {
  font-family: "Roboto Mono", monospace;
}

.catalog-logo,
.catalog-back {
  color: #eee;
  text-decoration: none;
}

// Use full-opacity equivalent of rgba(0, 0, 0, .05) and expose for demos to reference
$hero-background-color: #f2f2f2;

.hero {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  height: 360px;
  min-height: 360px;
  background-color: $hero-background-color;
}

// Default padding on all examples.
section.example {
  margin: 24px;
  padding: 24px;
}

section.example {
  h2 {
    margin-left: 0;
  }
}