plugins/orders/public/stylesheets/_base.scss
/* use with @extend, CSS clear bugfix */
.clean {
clear: both;
}
.container-clean {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
/* layout base parameters */
$modules: 12;
$base: 8px;
$wireframe: 880px;
/* heights should only use multiples of this */
$height: $base;
/* base measurements */
$intercolumn: 2*$base;
$module: $wireframe/$modules - $intercolumn;
/* widths should only use one of these */
$module01: 01*$module + 00*$intercolumn;
$module02: 02*$module + 01*$intercolumn;
$module03: 03*$module + 02*$intercolumn;
$module04: 04*$module + 03*$intercolumn;
$module05: 05*$module + 04*$intercolumn;
$module06: 06*$module + 05*$intercolumn;
$module07: 07*$module + 06*$intercolumn;
$module08: 08*$module + 07*$intercolumn;
$module09: 09*$module + 08*$intercolumn;
$module09: 09*$module + 08*$intercolumn;
$module10: 10*$module + 09*$intercolumn;
$module11: 11*$module + 10*$intercolumn;
$module12: 12*$module + 11*$intercolumn;
$module01p: percentage($module01/$wireframe);
$module02p: percentage($module02/$wireframe);
$module03p: percentage($module03/$wireframe);
$module04p: percentage($module04/$wireframe);
$module05p: percentage($module05/$wireframe);
$module06p: percentage($module06/$wireframe);
$module07p: percentage($module07/$wireframe);
$module08p: percentage($module08/$wireframe);
$module09p: percentage($module09/$wireframe);
$module10p: percentage($module10/$wireframe);
$module11p: percentage($module11/$wireframe);
$module12p: percentage($module12/$wireframe);
/* paddings and margins should only use one of these
Ps. 1: disccount the borders size from padding, as borders uses padding's space.
Ps. 2: because of W3C's content-box default box sizing, padding sums to width size. If your
box doesn't have a padding, then sum $intercolumn to the width.
*/
$margin: $intercolumn;
$half-margin: $margin/2;
$padding: $intercolumn/2;
$half-padding: $padding/2;
$marginp: percentage($margin/$wireframe);
$half-marginp: percentage($half-margin/$wireframe);
$paddingp: percentage($padding/$wireframe);
$half-paddingp: percentage($half-padding/$wireframe);
$wireframe-padding: 5*$padding;
/* use for borders */
$border: 1px;
$border-radius: 5px;
/* use for text shadows */
$shadow: 2px;
/* Colors */
$border-action-button: #F4A439;
$bg-action-button: #FBCA47;
$bg-selection-button: white;
/* Fonts */
/* Paragraphs Styles (use with @extend) */
.pstyle-none {
font-size: 12px;
}
.pstyle-basic {
font-size: 16px;
}
.pstyle-button {
font-size: 16px;
}
.pstyle-button-small {
font-size: 13px;
}
.pstyle-title {
font-size: 72px;
}
.pstyle-h1 {
font-size: 34px;
}
.pstyle-h2 {
font-size: 26px;
}
.pstyle-h3 {
font-size: 21px;
}
.pstyle-h4 {
font-size: 16px;
}
.pstyle-h5 {
font-size: 13px;
}
.pstyle-title-section {
font-size: 92px;
}
.pstyle-field {
font-size: 13px;
}
.pstyle-menu-big-selected {
font-size: 21px;
}
.pstyle-menu-big-unselected {
font-size: 21px;
}
.pstyle-menu-medium-selected {
font-size: 16px;
}
.pstyle-menu-medium-unselected {
font-size: 16px;
}
.pstyle-menu-small-selected {
font-size: 13px;
}
.pstyle-menu-small-unselected {
font-size: 13px;
}
.pstyle-tp4 {
font-size: 42px;
}
.pstyle-tp3 {
font-size: 34px;
}
.pstyle-tp2 {
font-size: 26px;
}
.pstyle-tp1 {
font-size: 21px;
}
.pstyle-tm1 {
font-size: 13px;
}
.pstyle-tm2 {
font-size: 10px;
}
.subtitle {
@extend .pstyle-tm2;
}
/* Images */
$profile-thumb-size: 4*$base;
$profile-portrait-size: 10*$base;
/* profile-image that can be centered and resized with aspect ratio */
.profile-image {
display: inline-block;
&.thumb {
width: $profile-thumb-size;
height: $profile-thumb-size;
}
&.portrait {
width: $profile-portrait-size;
height: $profile-portrait-size;
}
/* do not put padding in this as background size will consider it. */
.inner {
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-size: contain; /* css3 enabled */
}
}
/* Buttons */
.action-button {
display: inline-block;
padding: $half-padding $padding;
height: auto;
width: auto;
//&:visited, &:active, &:hover { color: white; }
background: $bg-action-button;
border: $border solid $border-action-button;
cursor: pointer;
color: black;
font-weight: bold;
line-height: 2*$height;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow: none;
border-radius: $border-radius;
}
.selection-button {
@extend .action-button;
background: $bg-selection-button;
}