Move styling for wrapper element into separate SASS component
MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
-.wrapper {
- margin: 0 auto;
- width: 90%;
- max-width: 1280px;
-
- &.wrapper--narrow {
- max-width: 560px;
- }
-}
-
@import 'variables/colors';
@import 'variables/dimensions';
@import 'components/typography';
@import 'components/row';
@import 'components/navigation';
+@import 'components/wrapper';
@import 'components/box';
@import 'components/input';
@import 'components/helpers';

ADD
resources/assets/sass/components/wrapper.scss
+.wrapper {
+ margin: 0 auto;
+ width: 90%;
+ max-width: $dimensions-wrapper-width;
+
+ &.wrapper--narrow {
+ max-width: $dimensions-wrapper-narrow-width;
+ }
+}

MODIFY
resources/assets/sass/variables/dimensions.scss
resources/assets/sass/variables/dimensions.scss
@@ -2,3 +2,5 @@ $dimensions-navigation-height: 70px;
$dimensions-box-border-radius: 5px;
$dimensions-input-padding: 10px;
$dimensions-box-padding: 20px;
+$dimensions-wrapper-width: 1200px;
+$dimensions-wrapper-narrow-width: 500px;

Move styling for wrapper element into separate SASS component