diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss index 743f33d..5275e0c 100644 --- a/src/scss/_boilerplate.scss +++ b/src/scss/_boilerplate.scss @@ -9,4 +9,5 @@ @import 'boilerplate/fonts'; @import 'boilerplate/buttons'; @import 'boilerplate/inputs'; -@import 'boilerplate/forms'; \ No newline at end of file +@import 'boilerplate/forms'; +@import 'boilerplate/product'; \ No newline at end of file diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss index 34734c9..7250975 100644 --- a/src/scss/boilerplate/_buttons.scss +++ b/src/scss/boilerplate/_buttons.scss @@ -30,6 +30,15 @@ button { border: $button-primary-hover-border; color: $button-primary-hover-color; } + + &.tocart { + font-size: $button-primary-font-size; + } + + &#product-addtocart-button { + font-size: $button-primary-font-size; + } + } &.secondary { @@ -47,3 +56,4 @@ button { } } + diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss index 5c09a2f..35228ac 100644 --- a/src/scss/boilerplate/_fonts.scss +++ b/src/scss/boilerplate/_fonts.scss @@ -35,6 +35,7 @@ html, body { font-size: $font-default-font-size; font-weight: $font-default-font-weight; color: $font-default-color; + line-height: $font-default-font-line-height; } a { diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss index 00c2c76..0652cce 100644 --- a/src/scss/boilerplate/_forms.scss +++ b/src/scss/boilerplate/_forms.scss @@ -1,4 +1,4 @@ -input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], select, textarea { +input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea { background-color: $input-default-background-color; border: $input-default-border; border-radius: $input-default-border-radius; @@ -46,72 +46,79 @@ input[type="checkbox"] { width: $input-choice-default-width; } -/**** -** Form -****/ - -.form { - /**** ** Fieldset ****/ - .fieldset { - border: $form-fieldset-border; - margin: $form-fieldset-margin; - padding: $form-fieldset-padding; - - > legend.legend { - color: $form-fieldset-legend-color; - font-size: $form-fieldset-legend-font-size; - font-family: $form-fieldset-legend-font-family; - font-weight: $form-fieldset-legend-font-weight; - font-style: $form-fieldset-legend-font-style; - line-height: $form-fieldset-legend-line-height; - margin: $form-fieldset-legend-margin; - padding: $form-fieldset-legend-padding; - width: $form-fieldset-legend-width; +.fieldset { + border: $form-fieldset-border; + margin: $form-fieldset-margin; + padding: $form-fieldset-padding; + + > legend.legend { + color: $form-fieldset-legend-color; + font-size: $form-fieldset-legend-font-size; + font-family: $form-fieldset-legend-font-family; + font-weight: $form-fieldset-legend-font-weight; + font-style: $form-fieldset-legend-font-style; + line-height: $form-fieldset-legend-line-height; + margin: $form-fieldset-legend-margin; + padding: $form-fieldset-legend-padding; + width: $form-fieldset-legend-width; + } + + > div.field { + margin: $form-fieldset-field-margin; + box-sizing: $form-fieldset-field-box-sizing; + + &:not(.choice) { + > label.label { + padding: $form-fieldset-field-label-padding; + text-align: $form-fieldset-field-label-text-align; + width: $form-fieldset-field-label-width; + float: $form-fieldset-field-label-float; + font-weight: $form-fieldset-field-label-font-weight; + } + + > legend.label { + padding: $form-fieldset-field-label-padding; + text-align: $form-fieldset-field-label-text-align; + width: $form-fieldset-field-label-width; + float: $form-fieldset-field-label-float; + font-weight: $form-fieldset-field-label-font-weight; + } + + > div.control { + width: $form-fieldset-field-control-width; + float: $form-fieldset-field-control-float; + } } - > div.field { - margin: $form-fieldset-field-margin; - box-sizing: $form-fieldset-field-box-sizing; - - &:not(.choice) { - > label.label { - padding: $form-fieldset-field-label-padding; - text-align: $form-fieldset-field-label-text-align; - width: $form-fieldset-field-label-width; - float: $form-fieldset-field-label-float; - font-weight: $form-fieldset-field-label-font-weight; - } - > div.control { - width: $form-fieldset-field-control-width; - float: $form-fieldset-field-control-float; - } + &.choice { + &:before { + width: $form-fieldset-field-choice-before-width; + padding: $form-fieldset-field-choice-before-padding; + height: $form-fieldset-field-choice-before-height; + float: $form-fieldset-field-choice-before-float; } - &.choice { - &:before { - width: $form-fieldset-field-choice-before-width; - padding: $form-fieldset-field-choice-before-padding; - height: $form-fieldset-field-choice-before-height; - float: $form-fieldset-field-choice-before-float; - } - - label.label { - margin: $form-fieldset-field-choice-label-margin; - } + label.label { + margin: $form-fieldset-field-choice-label-margin; } } } +} +/**** +** Form +****/ + +form { div.actions-toolbar { - margin-left: $form-action-toolbar-margin !important; + margin: $form-action-toolbar-margin; } } - /**** ** Sidebar input ****/ diff --git a/src/scss/boilerplate/_product.scss b/src/scss/boilerplate/_product.scss new file mode 100644 index 0000000..06959c7 --- /dev/null +++ b/src/scss/boilerplate/_product.scss @@ -0,0 +1,8 @@ +.price-wrapper { + span.price { + font-size: $font-default-font-size; + font-weight: $font-default-font-weight; + line-height: $font-default-font-line-height; + color: $font-default-color; + } +} \ No newline at end of file diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 0854cea..6fe6571 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -24,6 +24,7 @@ $font-default-font-family-primary: 'Montserrat'; $font-default-font-family-secondary: 'Open Sans'; $font-default-font-size: 12px; $font-default-font-weight: 400; +$font-default-font-line-height: 18px; $font-default-color: black; $font-default-heading-color: $primary-color; @@ -31,6 +32,7 @@ $font-family: $font-default-font-family-primary; $font-family-headings: $font-default-font-family-secondary; $font-family-headings-color: blue; $font-family-headings-weight: 600; +$font-family-heading-line-height: 1.2; $font-default-link-color: red; $font-default-link-hover-color: red; @@ -103,7 +105,7 @@ $input-default-font-size: $font-default-font-size; $input-default-color: black; $input-default-font-family: $font-default-font-family-secondary; $input-default-font-weight: $font-default-font-weight; -$input-default-font-style: italic; +$input-default-font-style: normal; $input-default-line-height: 36px; /* Placeholder */ @@ -174,4 +176,7 @@ $form-fieldset-field-control-width: auto; $form-fieldset-field-control-float: none; /* Action toolbar */ -$form-action-toolbar-margin: 0; +$form-action-toolbar-margin: 20px 0; +$form-action-toolbar-padding: 0; + +