examples.scss

/*
|--------------------------------------------------------------------------
| Importing Stylsheets / Partials
|--------------------------------------------------------------------------
*/
@import 'core';
@import 'theme';





/*
|--------------------------------------------------------------------------
| Variables
|--------------------------------------------------------------------------
*/
$color-primary: #444;
$color-secondary: darken($color-primary, 10%);

$container-width: 1200px;

$font-primary: 'Montserrat';
$font-secondary: 'Open Sans';






/*
|--------------------------------------------------------------------------
| Nested Selectors
|--------------------------------------------------------------------------
*/
.header-nav {
	width: 100%;
	height: 70px;
	background-color: #FFF;
	.header-nav--item {
		display: block;
		padding: 4px 10px;
	}
}

.submit-button {
	background-color: $color-primary;
	
	&:hover {
		background-color: darken($color-primary, 5%);
	}

	&.disabled {
		cursor: not-allowed;
		background-color: #444;
		text-decoration: line-through;
	}
}






/*
|--------------------------------------------------------------------------
| Extending Classes
|--------------------------------------------------------------------------
*/

.button {
	display: block;
	padding: 6px 12px;
	font-weight: 700;
}

.button-primary {
	@extend .button;
	background-color: $color-primary;
}

.button-disabled {
	@extend .button;
	background-color: #444;
}






/*
|--------------------------------------------------------------------------
| Operators
|--------------------------------------------------------------------------
*/

.listing-left {
	float: left;
	width: 400px / 1200px * 100%;
}

.listing-right {
	float: right;
	width: 760px / 1200px * 100%;
}






/*
|--------------------------------------------------------------------------
| Mixins
|--------------------------------------------------------------------------
*/

// Mixins would be extracted from primary scss files and grouped in mixins.scss
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

.element {
	opacity: 0;

	&:hover {
		@include transition('opacity 300ms ease');
	}

}