Skip to content

Commit 93c4879

Browse files
moyusmoyus
committed
Optimize code style
1 parent db836bf commit 93c4879

10 files changed

Lines changed: 189 additions & 217 deletions

File tree

‎scss/_vars.scss‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ $color-black: #000 !default;
2323
$color-white: #fff !default;
2424

2525
// colors used for form validation etc.
26-
$color-success: #4caf50 !default;
27-
$color-danger: #f44336 !default;
28-
$color-warning: #ff9800 !default;
26+
$color-success: #4caf50 !default;
27+
$color-danger: #f44336 !default;
28+
$color-warning: #ff9800 !default;
2929

3030
$divider-color: rgba($color-black, 0.1) !default;
3131
$border-color: #ddd !default;
@@ -202,53 +202,67 @@ $drop-content-gutter: $space-stack-xs;
202202

203203
// Modal
204204
// -----------------------------------------------------------------------------
205-
$modal-width-sm: 480px !default;
206-
$modal-width-base: 600px !default;
207-
$modal-width-lg: 900px !default;
208-
$modal-bg-color: $element-bg-color !default;
209-
$modal-margin: $space-inset-base !default;
210-
$modal-padding: $space-inset-base !default;
211-
$modal-border-radius: $border-radius-lg !default;
212-
$modal-border-width: $border-width !default;
213-
$modal-divider-color: $divider-color !default;
205+
$modal-padding: $space-inset-base;
206+
$modalCard-width-sm: 480px !default;
207+
$modalCard-width-base: 600px !default;
208+
$modalCard-width-lg: 900px !default;
209+
$modalCard-title-font-size: $font-size-lg;
210+
$modalCard-bg-color: $element-bg-color !default;
211+
$modalCard-padding: $space-inset-base !default;
212+
$modalCard-border-radius: $border-radius-lg !default;
213+
$modalCard-border-width: $border-width !default;
214+
$modalCard-divider-color: $divider-color !default;
214215
$backdrop-bg-color: rgba($color-black,.5) !default;
215216

216217
// Nav
217218
// -----------------------------------------------------------------------------
218-
$nav-inline-item-margn-x: $space-inline-xs !default;
219-
$nav-stacked-item-margin-y: $space-stack-xxs !default;
220-
$nav-link-padding-sm-y: $space-squish-s-y !default;
221-
$nav-link-padding-sm-x: $space-squish-s-x !default;
222-
$nav-link-padding-base-y: $space-squish-base-y !default;
223-
$nav-link-padding-base-x: $space-squish-base-x !default;
224-
$nav-link-padding-lg-y: $space-squish-l-y !default;
225-
$nav-link-padding-lg-x: $space-squish-l-x !default;
226-
$nav-border-color: $border-color !default;
227-
$nav-border-width: $border-width !default;
228-
$nav-divider-color: $divider-color !default;
229-
$nav-sub-margin-x: $space-stack-s !default;
219+
$nav-menus-item-margin-y: $space-stack-xxs !default;
220+
$nav-menus-link-border-radius-sm: $border-radius-sm !default;
221+
$nav-menus-link-border-radius-base: $border-radius-base !default;
222+
$nav-menus-link-hover-bg: $element-bg-hover-color !default;
223+
$nav-menus-link-active-bg: map-get($master-palette, 'primary') !default;
224+
$nav-menus-link-padding-sm-y: $space-squish-s-y !default;
225+
$nav-menus-link-padding-sm-x: $space-squish-s-x !default;
226+
$nav-menus-link-padding-base-y: $space-squish-base-y !default;
227+
$nav-menus-link-padding-base-x: $space-squish-base-x !default;
228+
$nav-menus-link-padding-lg-y: $space-squish-l-y !default;
229+
$nav-menus-link-padding-lg-x: $space-squish-l-x !default;
230+
$nav-menus-divider-color: $divider-color !default;
230231

232+
$nav-pills-item-margin-x: $space-inline-s !default;
233+
$nav-pills-link-border-radius-sm: $border-radius-sm !default;
234+
$nav-pills-link-border-radius-base: $border-radius-base !default;
235+
$nav-pills-link-hover-bg: $element-bg-hover-color !default;
236+
$nav-pills-link-active-bg: map-get($master-palette, 'primary') !default;
237+
$nav-pills-link-padding-sm-y: $space-squish-s-y !default;
238+
$nav-pills-link-padding-sm-x: $space-squish-s-x !default;
239+
$nav-pills-link-padding-base-y: $space-squish-base-y !default;
240+
$nav-pills-link-padding-base-x: $space-squish-base-x !default;
241+
$nav-pills-link-padding-lg-y: $space-squish-l-y !default;
242+
$nav-pills-link-padding-lg-x: $space-squish-l-x !default;
243+
244+
$nav-tabs-border-color: $border-color !default;
245+
$nav-tabs-border-width: $border-width !default;
231246
$nav-tabs-item-margin-x: $space-inline-s !default;
232247
$nav-tabs-link-border-radius-sm: $border-radius-sm !default;
233248
$nav-tabs-link-border-radius-base: $border-radius-base !default;
234249
$nav-tabs-link-border-width: $border-width !default;
235250
$nav-tabs-link-border-color: $border-color !default;
236251
$nav-tabs-link-hover-bg: $element-bg-hover-color !default;
237-
238-
$nav-pills-item-margin-x: $space-inline-s !default;
239-
$nav-pills-link-border-radius-sm: $border-radius-sm !default;
240-
$nav-pills-link-border-radius-base: $border-radius-base !default;
241-
$nav-pills-link-border-color: $border-color !default;
242-
$nav-pills-link-hover-bg: $element-bg-hover-color !default;
243-
244-
// Navbar @TODO
252+
$nav-tabs-link-padding-sm-y: $space-squish-s-y !default;
253+
$nav-tabs-link-padding-sm-x: $space-squish-s-x !default;
254+
$nav-tabs-link-padding-base-y: $space-squish-base-y !default;
255+
$nav-tabs-link-padding-base-x: $space-squish-base-x !default;
256+
$nav-tabs-link-padding-lg-y: $space-squish-l-y !default;
257+
$nav-tabs-link-padding-lg-x: $space-squish-l-x !default;
258+
259+
// Navbar
245260
// -----------------------------------------------------------------------------
246261
$navbar-height: 50px !default;
247-
$navbar-font-size: $font-size-lg;
262+
$navbar-font-size: $font-size-base;
263+
$navbar-color: $text-color;
248264
$navbar-item-margin-x: $space-inline-l !default;
249265

250-
// @TODO
251-
$navbar-light-color: rgba($color-white, 0.8) !default;
252266

253267
// Pagination
254268
// -----------------------------------------------------------------------------
@@ -261,7 +275,7 @@ $pagination-item-border-color: $border-color !default;
261275
$pagination-item-hover-bg: $element-bg-hover-color !default;
262276
$pagination-item-bg: $element-bg-color !default;
263277

264-
// Notices & Box
278+
// Note & Box
265279
// -----------------------------------------------------------------------------
266280
$box-margin-bottom: $space-stack-l !default;
267281
$box-padding-y: $space-squish-l-y !default;

‎scss/components/_drop.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,6 @@
3636
background-color: $drop-bg-color;
3737
z-index: $drop-zIndex;
3838

39-
> .c-nav--stacked {
40-
margin: 0;
41-
padding: $drop-content-padding 0;
42-
.c-nav__item {
43-
padding-left: $drop-content-padding;
44-
padding-right: $drop-content-padding;
45-
}
46-
}
47-
4839
&--topStart {
4940
top: auto;
5041
right: auto;

‎scss/components/_modal.scss‎

Lines changed: 44 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,102 @@
11
// .c-modal
22
// .c-modal__content
3-
// .c-modal__header
4-
// .c-modal__title
5-
// .c-modal__close
6-
// .c-modal__body
7-
// .c-modal__footer
3+
// .c-modalCard
4+
// .c-modalCard__header
5+
// .c-modalCard__title
6+
// .c-modalCard__close
7+
// .c-modalCard__body
8+
// .c-modalCard__footer
89

910
// Block
1011
.c-modal {
1112
position: fixed;
1213
display: none;
1314
justify-content: center;
14-
align-items: flex-start;
15+
align-items: center;
1516
top: 0;
1617
left: 0;
1718
right: 0;
1819
bottom: 0;
20+
padding: $modal-padding;
1921
z-index: $modal-zIndex;
20-
overflow: hidden;
21-
22+
overflow: auto;
23+
-webkit-overflow-scrolling: touch;
24+
overflow-scrolling: touch;
2225
&.is-active {
2326
display: flex;
2427
}
2528
}
2629

2730
// Elements
2831
.c-modal__content {
32+
margin: auto;
33+
}
34+
35+
// Modifiers
36+
.c-modal--always {
37+
display: flex;
38+
}
39+
40+
// Block
41+
.c-modalCard {
2942
position: relative;
3043
display: flex;
3144
flex-direction: column;
3245
justify-content: center;
33-
max-width: $modal-width-base;
34-
max-height: calc(100vh - #{$modal-margin * 2});
46+
max-width: $modalCard-width-base;
3547
width: 100%;
36-
margin: $modal-margin;
37-
background-color: $modal-bg-color;
38-
border-radius: $modal-border-radius;
39-
border: $modal-border-width solid rgba(120,130,140,.1);
48+
background-color: $modalCard-bg-color;
49+
border-radius: $modalCard-border-radius;
50+
border: $modalCard-border-width solid rgba(120,130,140,.1);
4051
}
4152

42-
.c-modal__header {
53+
.c-modalCard__header {
4354
position: relative;
4455
flex-shrink: 0;
4556
display: flex;
4657
justify-content: space-between;
4758
align-items: center;
48-
padding: $modal-padding;
49-
border-bottom: $modal-border-width solid $modal-divider-color;
59+
padding: $modalCard-padding;
60+
border-bottom: $modalCard-border-width solid $modalCard-divider-color;
5061
@include clearfix;
5162
}
5263

53-
.c-modal__title {
54-
order: 1;
55-
flex: 1;
64+
.c-modalCard__title {
65+
flex: 1 1 0%;
66+
min-width: 0;
5667
margin: 0;
5768
font-weight: 500;
58-
font-size: $font-size-lg;
69+
font-size: $modalCard-title-font-size;
70+
@include oneline;
5971
}
6072

61-
.c-modal__close {
62-
order: 2;
73+
.c-modalCard__close {
6374
font-size: 22px;
6475
line-height: 1;
65-
color: rgba(0,0,0,.2);
76+
opacity: 0.75;
6677
cursor: pointer;
67-
padding: 0;
68-
margin: 0;
69-
border-radius: 0;
70-
border: 0;
71-
background: none;
72-
box-shadow: none;
7378
}
7479

75-
.c-modal__body {
80+
.c-modalCard__body {
7681
flex: 1 1 auto;
77-
padding: $modal-padding;
82+
padding: $modalCard-padding;
7883
overflow: auto;
7984
-webkit-overflow-scrolling: touch;
8085
overflow-scrolling: touch;
8186
}
8287

83-
.c-modal__footer {
88+
.c-modalCard__footer {
8489
flex-shrink: 0;
85-
padding: $modal-padding;
86-
border-top: $modal-border-width solid $modal-divider-color;
90+
padding: $modalCard-padding;
91+
border-top: $modalCard-border-width solid $modalCard-divider-color;
8792
text-align: right;
8893
}
8994

9095
// Modifiers
91-
.c-modal--always {
92-
display: flex;
96+
.c-modalCard--sm {
97+
max-width: $modalCard-width-sm;
9398
}
9499

95-
.c-modal--sm {
96-
.c-modal__content {
97-
max-width: $modal-width-sm;
98-
}
99-
}
100-
.c-modal--lg {
101-
.c-modal__content {
102-
max-width: $modal-width-lg;
103-
}
104-
}
105-
106-
.c-modal--max {
107-
.c-modal__content {
108-
max-width: none;
109-
align-self: stretch;
110-
}
100+
.c-modalCard--lg {
101+
max-width: $modalCard-width-lg;
111102
}

0 commit comments

Comments
 (0)