concise.css/src/_base.scss at master · ConciseCSS/concise.css

722 lines (584 loc) · 12.2 KB
// Base styles
// =============================================================================
// Based on sanitize.css v4.1.0 with heavy modifications for Concise CSS
// TODO: Most of the comments are from sanitize.css. Comments for Concise should be added too.
// Contents:
// 1. Display definitions
// 2. Elements of HTML
// 3. Grouping content
// 4. Text-level semantics
// 5. Embedded content
// 6. Links
// 7. Tabular data
// 8. Forms
// 9. WAI-ARIA
// 10. User interaction
// 11. Lobotomized Owl (Margins)
// 1. Display definitions
// --------------------------------------------------
// Add the correct display in IE 9-.
// 1. Add the correct display in Edge, IE, and Firefox.
// 2. Add the correct display in IE.
details, // 1
figcaption,
summary { // 1
	display: block;
// Add the correct display in IE 9-.
	display: inline-block;
// Add the correct display in iOS 4-7.
audio:not([controls]) {
	display: none;
	height: 0;
// Add the correct display in IE 10-.
// 1. Add the correct display in IE.
template, // 1
	display: none;
// 2. Elements of HTML (https://www.w3.org/TR/html5/semantics.html)
// --------------------------------------------------
// 1. Remove repeating backgrounds in all browsers.
// 2. Add box sizing inheritence in all browsers.
	background-repeat: no-repeat; // 1
	box-sizing: inherit; // 2
// 1. Add text decoration inheritance in all browsers.
// 2. Add vertical alignment inheritence in all browsers.
	text-decoration: inherit; // 1
	vertical-align: inherit; // 2
// Root styles
	box-sizing: border-box;
	font-family: $font-primary;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
  background-color: getColor(background, body);
  color: getColor(text, primary);
  font-size: $font-size + px;
  text-rendering: optimizeLegibility;
  @media ($breakpoint) {
    font-size: $font-size-secondary + px;
// 3. Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
// --------------------------------------------------
// 1. Correct font sizing inheritance and scaling in all browsers.
// 2. Correct the odd `em` font sizing in all browsers.
	font-family: $font-mono; // 1
	font-size: typeScale(1); // 2
  background-color: getColor(background, light);
  vertical-align: middle;
  display: inline-block;
  padding: 0 0.4em;
  padding: 0.5lh 1em;
  & > code { white-space: pre; }
  background-color: transparent;
  outline: 1px solid getColor(base, lines);
// 2. Add visible overflow in Edge and IE.
	background-color: getColor(base, lines);
  height: 1px;
	overflow: visible; // 2
  border: 0;
// Remove the list style on navigation lists in all browsers.
  ul { padding-left: 0; }
  li { list-style: none; }
// Make definition lists bold
dt { font-weight: bold; }
// 4. Text-level semantics
// --------------------------------------------------
// Make blockquotes prettier
// 1. Adds an em dash in the cite and footer of the quote
// 2. Use the next smaller size in the scale
blockquote {
  padding: 0 1em;
    color: getColor(text, secondary);
    font-size: 100% / $scale-ratio; // 2
    margin-top: 0.5lh;
    &:before { content: "— "; } // 1
// 1. Add a bordered underline effect in all browsers.
// 2. Remove text decoration in Firefox 40+.
// 3. Change all letters to uppercase
// 4. Turn on small caps for upper and lowercase letters
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; // 4
  text-transform: uppercase; // 3
  &[title] {
    border-bottom: 1px solid getColor(base, lines); // 1
    cursor: help;
    text-decoration: none; // 2
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
	font-weight: inherit;
// Add the correct font weight in Chrome, Edge, and Safari.
	font-weight: bolder;
// Add the correct font style in Android 4.3-.
	font-style: italic;
// Add the correct colors in IE 9-.
	background-color: #ffff00;
	color: #000000;
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
	vertical-align: baseline;
// Correct the font size in all browsers.
	// Use the next smaller size in the scale
  font-size: 100% / $scale-ratio;
// Change the positioning on superscript and subscript elements
// in all browsers.
// 1. Use the next smaller size in the scale
// 2. Enables display of subscript variants
// 3. Enables display of superscript variants
// 4. Adjust position
	line-height: 0;
	position: relative;
	vertical-align: baseline;
  font-size: 100% / $scale-ratio; // 1
  bottom: -0.25em; // 4
  font-feature-settings: "subs" 1; // 2
  top: -0.25em; // 4
  font-feature-settings: "sups" 1; // 3
// 1. Remove the text shadow on text selections.
// 2. Customize the background color on text selections.
::-moz-selection {
	background-color: getColor(base, selection); // 2
	text-shadow: none; // 1
::selection {
	background-color: getColor(base, selection); // 2
	text-shadow: none; // 1
// 5. Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
// --------------------------------------------------
// Change the alignment on media elements in all browers.
	vertical-align: middle;
// Remove the border on images inside links in IE 10-.
	border-style: none;
// Change the fill color to match the text color in all browsers.
	fill: currentColor;
// Hide the overflow in IE.
svg:not(:root) {
	overflow: hidden;
// 6. Links (https://www.w3.org/TR/html5/links.html#links)
// --------------------------------------------------
// 1. Remove the gray background on active links in IE 10.
// 2. Remove the gaps in underlines in iOS 8+ and Safari 8+.
// 3. Add transition by default
	background-color: transparent; // 1
	-webkit-text-decoration-skip: objects; // 2
  color: getColor(base, primary);
  text-decoration: none;
  transition-duration: $transition-duration; // 3
  &:focus { color: darken(getColor(base, primary), 20%); }
// Remove the outline when hovering in all browsers.
	outline-width: 0;
// 7. Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
// --------------------------------------------------
// Remove border spacing in all browsers.
	border-collapse: collapse;
	border-spacing: 0;
// 8. Forms:  (https://www.w3.org/TR/html5/forms.html)
// --------------------------------------------------
// 1. Remove the default styling in all browsers.
	background-color: transparent; // 1
	border-style: none; // 1
	color: inherit; // 1
  font: inherit;
  &:focus { outline: 2px solid getColor(blue, base); }
// Correct the overflow in IE.
// 1. Correct the overflow in Edge.
input { // 1
	overflow: visible;
// Remove the inheritance in Edge, Firefox, and IE.
// 1. Remove the inheritance in Firefox.
select { // 1
	text-transform: none;
// 1. Prevent the WebKit bug where (2) destroys native `audio` and `video`
//    controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
html [type="button"], // 1
[type="reset"],
[type="submit"] {
	-webkit-appearance: button; // 2
  font: inherit;
// Remove the inner border and padding in Firefox.
::-moz-focus-inner {
	border-style: none;
	padding: 0;
// Correct the focus styles unset by the previous rule.
:-moz-focusring {
	outline: 1px dotted ButtonText;
// Correct the border and padding in all browsers.
	border: 1px solid getColor(base, lines);
  padding: 1lh 1em;
// 1. Correct the text wrapping in Edge and IE.
	display: table; // 1
	max-width: 100%; // 1
	white-space: normal; // 1
	padding: 0 0.5em;
// 1. Remove the vertical scrollbar in IE.
// 2. Change the resize direction on textareas in all browsers.
	overflow: auto; // 1
	resize: vertical; // 2
	height: auto;
  padding: 0.25lh 0.5em;
// Remove the padding in IE 10-.
[type="checkbox"],
[type="radio"] {
	padding: 0;
// Correct the cursor style on increment and decrement buttons in Chrome.
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
[type="search"] {
	-webkit-appearance: textfield; // 1
	outline-offset: -2px; // 2
// Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
::-webkit-search-cancel-button,
::-webkit-search-decoration {
	-webkit-appearance: none;
// Correct the text style on placeholders in Chrome, Edge, and Safari.
::-webkit-input-placeholder {
	color: inherit;
	opacity: .54;
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
// Make the range input flat using the Concise settings
input[type="range"] {
  border: none;
  padding: 0;
  width: 100%;
  -webkit-appearance: none;
  &:focus { outline: none; }
  &::range-track {
    background-color: getColor(base, lines);
    border: none;
    height: 0.2lh;
  &::range-thumb {
    border: none;
    border-radius: 50%;
    background-color: getColor(base, primary);
    height: 0.5lh;
    margin-top: -0.15lh;
    width: 0.5lh;
  &::-webkit-slider-thumb { -webkit-appearance: none; }
// Make the buttons flat
  background-color: getColor(base, primary);
  border: none;
  color: getColor(text, inverted);
  cursor: pointer;
  font-size: typeScale(1);
  line-height: 1.5lh;
  padding: 0 1.5em;
  transition: background-color $transition-duration;
  white-space: nowrap;
  &:focus {
    background-color: lighten(getColor(base, primary), 5%);
    text-decoration: none;
    outline: none;
  &:active { background-color: lighten(getColor(base, primary), 10%); }
  &[disabled] {
    background-color: getColor(state, muted);
    color: getColor(text, inverted);
    cursor: not-allowed;
// Make the submit inputs and buttons look the same
input[type="submit"] { @extend button; }
// 9. WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria)
// --------------------------------------------------
// Change the cursor on busy elements.
[aria-busy="true"] {
	cursor: progress;
// Change the cursor on control elements.
[aria-controls] {
	cursor: pointer;
// Change the cursor on disabled, not-editable, or otherwise
// inoperable elements.
[aria-disabled] {
	cursor: default;
// 10. User interaction (https://www.w3.org/TR/html5/editing.html)
// --------------------------------------------------
// Remove the tapping delay on clickable elements.
// 1. Remove the tapping delay in IE 10.
[tabindex] {
	-ms-touch-action: manipulation; // 1
	touch-action: manipulation;
// Change the display on visually hidden accessible elements.
[hidden][aria-hidden="false"] {
	clip: rect(0, 0, 0, 0);
	display: inherit;
	position: absolute;
[hidden][aria-hidden="false"]:focus {
	clip: auto;
// 11. Automatic margins a.k.a Lobotomized Owl
// --------------------------------------------------
@if $automargin {
  * { margin: 0; }
  // A margin top is added to all the elements except the first one in each nesting level
  * + * { margin-top: $block-margin; }
  // These elements shouldn’t get a margin
  textarea,
  [#{$prefix}column]{ margin-top: 0; }
  // First paragraphs below a heading shouldn’t get a margin
  h1, h2, h3, h4, h5, h6 {
    & + p { margin-top: 0; }
FilesExpand file tree

_base.scss

Latest commit

History

_base.scss

File metadata and controls
