Move dimension-related variables to seperate .scss file
MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
}
@import 'variables/colors';
+@import 'variables/dimensions';
@import 'components/reset';
@import 'components/typography';

MODIFY
resources/assets/sass/components/box.scss
resources/assets/sass/components/box.scss
.box {
background: #FFF;
border: 1px solid $colors-border;
- border-radius: 8px;
+ border-radius: $dimensions-box-border-radius;
.box__section {
- padding: 25px;
+ padding: $dimensions-box-padding;
border-bottom: 1px solid $colors-border;
- &.box__section--small {
- padding: 20px;
- }
-
&:last-child {
border-bottom: none;
}
list-style: none;
li {
- padding: 25px;
+ padding: $dimensions-box-padding;
border-bottom: 1px solid $colors-border;
&:last-child {
}
}
}
-
- ul.t {
- li {
- padding: 12px 0;
-
- &:first-child {
- padding-top: 0;
- }
-
- &:last-child {
- padding-bottom: 0;
- }
- }
- }
}

MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
input, button {
font: inherit;
- border-radius: 5px;
+ border-radius: $dimensions-box-border-radius;
}
input {
- padding: 10px;
+ padding: $dimensions-input-padding;
width: 100%;
border: 1px solid $colors-border;
-webkit-appearance: none;

MODIFY
resources/assets/sass/components/navigation.scss
resources/assets/sass/components/navigation.scss
.navigation {
display: flex;
align-items: center;
- height: 70px;
+ height: $dimensions-navigation-height;
background: $colors-navigation;
.wrapper {

ADD
resources/assets/sass/variables/dimensions.scss
+$dimensions-navigation-height: 70px;
+$dimensions-box-border-radius: 5px;
+$dimensions-input-padding: 10px;
+$dimensions-box-padding: 20px;

Move dimension-related variables to seperate .scss file