Translation of min to Stylus (http://mincss.com/)

min.styl

/*
* min
* a tiny framework that makes websites pretty
* https://github.com/owenversteeg/min
*
* translated to stylus by armornick
*/

// __var-lib.scss

//-------------------------------------------------------------------
// Variable Library
//
// The purpose of the variable library is to have a centralized
// location for various reusable values for the Min Framework.
//
// Instead of hunting through the different Sass files to update
// values, simply change the variable in question to update all
// instances of that value.
//
//-------------------------------------------------------------------
// Dark Colors
$c-black = #000
$c-off-black = #999
$c-darker = #888
$c-dark = #777

// Medium Colors
$c-grey-dark = #aaa
$c-grey = #ccc
$c-grey-light = #eee

// Light Colors
$c-white = #fff

// Inputs
$c-focus = #5ab

//-------------------------------------------------------------------

// _general.scss

//-------------------------------------------------------------------
//  General Min Styling
//-------------------------------------------------------------------
body,
textarea, input {
  background: 0;
  border-radius: 0;
  font: 16px sans-serif;
  margin: 0;
}

* {
  outline: 0;
}

// apply a smooth transition effect to an element's state change
.smooth {
  transition: all .2s;
}

.container {
  margin: 0 20px;
  width: auto;

  @media(min-width:1310px) {
    margin: auto;
    width: 1270px;
  }
}

// this extends into both nav a and .btn
$no-underline {
  text-decoration: none;
}

// shared large text size
$txt-large {
  font-size: 2em;
}

// shared smaller text size
$shared-font-size {
  font-size: 14px;
}

//-------------------------------------------------------------------


// ------------------------------------------------------------------
//  Customize Optional Components
//
//  Set undesired components to false to exclude them from
//  the final Min CSS output.
// ------------------------------------------------------------------
$import-headings ?= true
$import-buttons ?= true
$import-forms ?= true
$import-navbar ?= true
$import-tables ?= true
$import-messages ?= true
$import-icons ?= true
$import-grid ?= true
$import-messages ?= true

//-------------------------------------------------------------------
// Button Colors
//-------------------------------------------------------------------

$a--bg = #0ae
$a--hover = #09d
$a--active = #08b

$b--bg = #3c5
$b--hover = #2b4
$b--active = #2a4

$c--bg = #d33
$c--hover = #c22
$c--active = #b22

//-------------------------------------------------------------------
// Mixin to set btn background for inactive, active & hover states
//-------------------------------------------------------------------
// set default variables to be base button colors.
btn-style($bg = $c-off-black, $bg-hover = $c-darker, $bg-active = $c-dark) {
	background: $bg
	
	&:hover {
		background: $bg-hover
	}
	
	&:active, &:focus {
		background: $bg-active
	}
}

//-------------------------------------------------------------------

// _button.scss

if $import-buttons == true {

//-------------------------------------------------------------------
// Button Styles & Classes
//-------------------------------------------------------------------

// Set Generic <button> and .btn styling.
// use .btn on any element to give it the styling of a button

.btn {
	@extend $txt-large
	@extend $no-underline
	btn-style()
	
	border: 0
  	border-radius: 6px // rounded corners
  	
  	color: $c-white
	cursor: pointer
	display: inline-block // Enables non-inline-block elements like <a>s to be buttons
	
	margin: .2em .3em .2em 0
	padding: 12px 30px 14px
}

// Set colors for your buttons, see the button mixin at the top of this
// file to see how the hex colors are allocated
.btn-a {
  btn-style($a--bg, $a--hover, $a--active)
}
.btn-b {
  btn-style($b--bg, $b--hover, $b--active)
}
.btn-c {
  btn-style($c--bg, $c--hover, $c--active)
}

// Add this class to a <button> or element with a .btn class
// to create a smaller sized button.
.btn-sm {
	@extend $shared-font-size
  	border-radius: 4px // rounded corners
  	padding: 10px 15px 11px
}

}

//-------------------------------------------------------------------

// _grid.scss

if $import-grid == true {


//-------------------------------------------------------------------
//  Grid system responsive code is in _general.scss
//
// Since every column has 2% padding (1% on each side) its width is
// (((its number/12) * 100)-2) percent (truncated, to avoid spillage.)
// Thus, c12 has width 98%.
//-------------------------------------------------------------------

$w-100 {
	width: 100%
}

.row {
  margin: 1% 0;
  overflow: auto; // needed for proper formed layout
}

.col {
  float: left;
}

.c12 {
  @extend $w-100;
}

$grid-list = {
  c1:    8.33%,
  c2:   16.66%,
  c3:   25%,
  c4:   33.33%,
  c5:   41.66%,
  c6:   50%,
  c7:   58.33%,
  c8:   66.66%,
  c9:   75%,
  c10:  83.33%,
  c11:  91.66%
}

for key, value in $grid-list {
	.{key} {
		width: value;
	}
}

@media (max-width:870px) {
  .row .col {
    width: 100%;
  }
}


}

//-------------------------------------------------------------------

// _headings.scss

if $import-headings == true {

//-------------------------------------------------------------------
//  Headings
//-------------------------------------------------------------------

// Set style for <h1> -- larger than 'normal'
h1 {
  font-size: 4em;
}

// Sets style for <h2>
h2 {
  @extend $txt-large;
}

}

//-------------------------------------------------------------------

// _icons.scss

if $import-icons == true {

//-------------------------------------------------------------------
//  Icons
//-------------------------------------------------------------------

.ico {
  font: 33px Arial Unicode MS, Lucida Sans Unicode;

  // This combo of Unicode fonts means Min's icons
  // support OSX 10.5+, Windows 98+, and Ubuntu.

  // We don't use ems because 33px is a great size
  // cross-browser and OS for nice icons
}
	

}

//-------------------------------------------------------------------

// _forms.scss

if $import-forms == true {


//-------------------------------------------------------------------
//  Form Elements
//-------------------------------------------------------------------

form > * {
  display: block;
  margin-bottom: 10px;
}

label > * {
  display: inline;
}

input, textarea {
  @extend $shared-font-size;
  border: 1px solid $c-grey;
  padding: 8px;

  &:focus {
    border-color: $c-focus;
  }
}

input[type='text'], textarea {
  -webkit-appearance: none; // make iOS inputs pretty
  width: 13em;
}


.addon {
  @extend $shared-font-size;
  box-shadow: 0 0 0 1px $c-grey;
  padding: 8px 12px;
}


}

//-------------------------------------------------------------------

// _navbar.scss

if $import-navbar == true {


//-------------------------------------------------------------------
//  Navigation Bar
//-------------------------------------------------------------------

// CSS reused in multiple selectors
$nav-global {
  background: $c-black;
  color: $c-white;
}

.nav {
  @extend $nav-global;
  height: 24px;
  padding: 11px 0 15px;

   // TODO: migrate to ems
   // (currently we don't use them because of iOS compatibility problems
   // -- has to do with unicode icon for close) */

  // Uncomment for animations
  // max-height: 1.5em;

  a {
    @extend $shared-font-size;
    @extend $no-underline;
    color: $c-grey-dark;
    padding-right: 1em;
    position: relative;
    top: -1px;

    &:hover {
      @extend $nav-global;
    }
  }

  .pagename {
    font-size: 22px;
    top: 1px;
  }

  .current {
    @extend $nav-global;
  }
}

.btn.btn-close {
  background: $c-black;
  display: none;
  float: right;
  font-size: 25px;
  margin-top: -54px;
}

// Update styling of .nav for small screens
@media(max-width:500px) {
  .btn.btn-close {
    display: block;
  }

  .nav {
    overflow: hidden;
    // transition: max-height .5s ease-in-out, height .5s ease-in-out;

    &:focus {
      height: auto;
      // -- Necessary for animations
      // height: 100%;
      // max-height: 500px;
    }

    & div:before {
      background: $c-black;
      border-top: 3px solid;
      border-bottom: 10px double;
      content: '';
      float: right;
      height: 4px;
      position: relative;
      right: 3px;
      top: 14px;
      width: 20px;
    }

    a {
      display: block;
      padding: .5em 0;
      width: 50%;
    }
  }

  .pagename {
    margin-top: -11px;
  }
}

}

//-------------------------------------------------------------------

// _table.scss

if $import-tables == true {

//-------------------------------------------------------------------
//  Tables
//-------------------------------------------------------------------

.table {
  @extend $w-100 !optional;

  th, td {
    padding: .5em;
    text-align: left;
  }

  tbody>*:nth-child(2n-1) {
    background: $c-grey;
    // We use tbody to ensure that we don't shade the heading
    // this preserves the order of the shading
  }
}


}

//-------------------------------------------------------------------

// _messages.scss

if $import-messages == true {


//-------------------------------------------------------------------
//  Messages
//-------------------------------------------------------------------

.msg {
  background: #def;
  border-left: 5px solid #59d;
  padding: 1.5em;
}


}

//-------------------------------------------------------------------