scss archetype boilerplate

scss-archetype-boiler.scss

%style-wrapper{
	display: block;
	position: relative;
  	overflow: hidden;
  	width: 100%;
  	height: auto;
	margin: 0;
	padding:0;
	background-color: orange; //$color-bg-default
	text-align: center;
}

%style-container{
	margin: auto;
	max-width: 880px; //$dim-content-wt
	height: auto; 
	padding-left: $dim-gutter-default;
	padding-right: $dim-gutter-default;
	background-color: transparent; //$color-bg-default
}

%style-scrolling-y-ios-friendly {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 !important;  // mobile will "erases" content on scrolling
}

%style-text-input {
  background-color: $background-color;
  color: $text-color-default;
  letter-spacing: $def-letter-spacing;

  border: 2px solid $input-color-border-default;
  padding: .8rem 1.5rem;
  width: calc(100% - 2*1.5rem - 2*2px); // - padding left/right - border

  @include font-family;
  font-size: 1.5rem;
  cursor: text;

  &::-webkit-input-placeholder { /* Chrome */
    color: $input-color-text-default;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: $input-color-text-default;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: $input-color-text-default;
    opacity: 1;
  }
  &:-moz-placeholder { /* Firefox 4 - 18 */
    color: $input-color-text-default;
    opacity: 1;
  }
}