A Pen by metamn.

Atoms.markdown

Atoms

The atoms from Atomic web design

A Pen by metamn on CodePen.

License.

style.css

/*
  Atoms of the Atomic web design
  - Basic constants, definitions and declarations
  - They cannot be divided further
  - They are reused across molecules, organisms and up
  - Usually this base is kept as is but reconfigured for every new project
*/




/* Grid
--------------------------------------------------------------------------------
*/



/* Default unit for horizontal and vertical spacing
  - combined from $font-size and $line-height
  - used for margin and padding
*/
$pad: 1.25em;

/* Long texts cannot span the entire screen, they have to be organized into lines containing 50-80 characters only
  - See http://www.kaikkonendesign.fi/typography/#section/3
  - Depends on $font-size
*/
$body-text-width: 43.75em; /* 700px / 16px */


/* The width of the content
*/
$container-width: 90%;
$container-margin: 5%;


/* The golden ratio
*/
$major: 61.8%;
$minor: 38.2%;





/* Typography
--------------------------------------------------------------------------------
*/


/* The basic body font size
  - See http://lamb.cc/typograph/
*/
$font-size: 100%; /* 16px, 1em */
$line-height: 1.25; /* 20px, 1.25em */

/* This is to convert em to rem
  - it depends on font-size
  - font-size: 100% => this value is 1, font-size: 65% => this value is .65
*/
$base-font-multiplier: 1; 

/* Line heights for headers and body text
  - See http://www.kaikkonendesign.fi/typography/#section/4
*/
$line-height-body-text: 1.75;
$line-height-headings: 1.1;


/* Letter spacing for uppercase
*/
$letter-spacing-uppercase: 1.1px;





/* Colors
--------------------------------------------------------------------------------
- taken from https://docs.google.com/a/thereboot.org/document/d/1p6zh6tP6nGeXPGAX9NFYj0f26KHHmchAQBSbv0HXbtI/edit?usp=sharing
*/

$background: #FFFFFF; /* Background */
$color: #6D6A64; /* Font, Reboot grey */
$highlight: #ab5728; /* Reboot red */
$grey: #6d6a64; 
$dark-grey: #494744;
$light-grey: #dedad8;

$gray: $grey;
$light-gray: $light-grey;
$dark-gray: $dark-grey;





/* Decorations
--------------------------------------------------------------------------------
*/


$easing: all 0.5s ease-in-out;
$shadow: 15px 20px 25px -10px rgba(0, 0, 0, 0.698), 0 1px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1) inset;
$shadow-remove: 0px 0px 0px 0px transparent;
$shadow: 1px 0 $color, 0 1px $color, 2px 1px $color, 1px 2px $color, 3px 2px $color, 2px 3px $color, 4px 3px $color, 3px 4px $color, 5px 4px $color, 4px 5px $color;


$arrow-down: '\2794';
$arrow-up: '\21E1';
$arrow-left: '\21E0';
$arrow-right: '\21E2';

$checkbox: '\2610';
$checkbox-checked: '\2611';
$radio: '\2610';
$radio-checked: '\25a3';

/* in :before and :after usually the font size is larger for better visibility
*/
$before-font-size: 150%;