Skip to content

Commit

Permalink
Merge pull request #5662 from matuzalemsteles/issue-5506
Browse files Browse the repository at this point in the history 
feat(@clayui/css): adds new size small to DatePicker
  • Loading branch information
@matuzalemsteles
matuzalemsteles authored Aug 25, 2023
2 parents ecd9f5e + 7df224d commit c7e092a
Show file tree
Hide file tree
Showing 21 changed files with 495 additions and 166 deletions.
2 changes: 1 addition & 1 deletion packages/clay-css/src/scss/_license-text.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Clay 3.95.0
* Clay 3.102.0
*
* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
* SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-css/src/scss/atlas/variables/_date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
$date-picker-dropdown-menu: () !default;
$date-picker-dropdown-menu: map-deep-merge(
(
max-width: 368px,
max-width: 352px,
),
$date-picker-dropdown-menu
);
Expand Down
71 changes: 69 additions & 2 deletions packages/clay-css/src/scss/cadmin/components/_date-picker.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
.date-picker {
.input-group-item {
@include clay-input-group-item-variant(
$cadmin-date-picker-input-group-item
);
}

.input-group-text {
@include clay-input-group-text-variant(
$cadmin-date-picker-input-group-text
Expand Down Expand Up @@ -37,8 +43,8 @@
.date-picker-nav-item {
align-items: center;
display: flex;
padding-left: 4px;
padding-right: 4px;
padding-left: 2px;
padding-right: 2px;
}

.date-picker-nav-item-expand {
Expand All @@ -58,14 +64,62 @@

.date-picker-calendar-header {
@include clay-css($cadmin-date-picker-calendar-header-container);

$_media-breakpoint-down: map-get(
$cadmin-date-picker-calendar-header-container,
media-breakpoint-down
);
$_media-breakpoint-up: map-get(
$cadmin-date-picker-calendar-header-container,
media-breakpoint-up
);

@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
@include clay-generate-media-breakpoints(
$cadmin-date-picker-calendar-header-container,
'clay-css'
);
}
}

.date-picker-calendar-body {
@include clay-css($cadmin-date-picker-calendar-body-container);

$_media-breakpoint-down: map-get(
$cadmin-date-picker-calendar-body-container,
media-breakpoint-down
);
$_media-breakpoint-up: map-get(
$cadmin-date-picker-calendar-body-container,
media-breakpoint-up
);

@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
@include clay-generate-media-breakpoints(
$cadmin-date-picker-calendar-body-container,
'clay-css'
);
}
}

.date-picker-calendar-footer {
@include clay-css($cadmin-date-picker-calendar-footer-container);

$_media-breakpoint-down: map-get(
$cadmin-date-picker-calendar-footer-container,
media-breakpoint-down
);
$_media-breakpoint-up: map-get(
$cadmin-date-picker-calendar-footer-container,
media-breakpoint-up
);

@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
@include clay-generate-media-breakpoints(
$cadmin-date-picker-calendar-footer-container,
'clay-css'
);
}
}

.date-picker-calendar-item {
Expand Down Expand Up @@ -125,6 +179,19 @@

@include clay-css($cadmin-_c-selected-end);
}

$_media-breakpoint-down: map-get(
$cadmin-date-picker-col,
media-breakpoint-down
);
$_media-breakpoint-up: map-get(
$cadmin-date-picker-col,
media-breakpoint-up
);

@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
@include clay-generate-media-breakpoints($cadmin-date-picker-col);
}
}

.date-picker-days-row {
Expand Down
3 changes: 0 additions & 3 deletions packages/clay-css/src/scss/cadmin/variables/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,6 @@ $cadmin-btn: map-deep-merge(
font-weight: $cadmin-btn-section-font-weight,
line-height: $cadmin-btn-section-line-height,
),
lexicon-icon: (
font-size: 16px,
),
),
$cadmin-btn
);
Expand Down
123 changes: 112 additions & 11 deletions packages/clay-css/src/scss/cadmin/variables/_date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,20 @@ $cadmin-date-picker-dropdown-menu: () !default;
$cadmin-date-picker-dropdown-menu: map-deep-merge(
(
max-height: none,
max-width: 368px,
max-width: 352px,
padding-bottom: 0,
padding-left: 0,
padding-right: 0,
padding-top: 0,
width: 100%,
media-breakpoint-down: (
xs: (
font-size: 12px,
margin: 0,
max-height: 255px,
max-width: 264px,
),
),
),
$cadmin-date-picker-dropdown-menu
);
Expand All @@ -20,8 +28,8 @@ $cadmin-date-picker-nav-row: () !default;
$cadmin-date-picker-nav-row: map-deep-merge(
(
display: flex,
margin-left: -4px,
margin-right: -4px,
margin-left: -2px,
margin-right: -2px,
),
$cadmin-date-picker-nav-row
);
Expand Down Expand Up @@ -56,7 +64,18 @@ $cadmin-date-picker-nav-btn-monospaced: () !default;
$cadmin-date-picker-nav-btn-monospaced: map-deep-merge(
(
margin-bottom: 0,
margin-left: 2px,
margin-right: 2px,
margin-top: 0,
media-breakpoint-down: (
xs: (
font-size: 12px,
height: 24px,
max-height: 24px,
max-width: 24px,
min-width: 24px,
),
),
),
$cadmin-date-picker-nav-btn-monospaced
);
Expand Down Expand Up @@ -85,6 +104,12 @@ $cadmin-date-picker-nav-select: map-deep-merge(
background-color: transparent,
color: $cadmin-input-disabled-color,
),
media-breakpoint-down: (
xs: (
font-size: 12px,
height: 24px,
),
),
),
$cadmin-date-picker-nav-select
);
Expand All @@ -100,15 +125,22 @@ $cadmin-date-picker-row: map-deep-merge(
margin-bottom: 8px,
margin-top: 8px,
padding: 0,
media-breakpoint-down: (
xs: (
margin-bottom: 4px,
margin-top: 4px,
),
),
),
$cadmin-date-picker-row
);

$cadmin-date-picker-col: () !default;
$cadmin-date-picker-col: map-deep-merge(
(
padding-left: 8px,
padding-right: 8px,
display: flex,
flex-grow: 1,
justify-content: center,
c-selected: (
background-image:
linear-gradient($cadmin-primary-l3, $cadmin-primary-l3),
Expand Down Expand Up @@ -139,6 +171,11 @@ $cadmin-date-picker-days-row: map-deep-merge(
(
margin-bottom: 16px,
margin-top: 0,
media-breakpoint-down: (
xs: (
margin-bottom: 4px,
),
),
),
$cadmin-date-picker-days-row
);
Expand Down Expand Up @@ -173,16 +210,31 @@ $cadmin-date-picker-calendar-header-container: map-merge(
padding-left: 16px,
padding-right: 16px,
padding-top: 16px,
media-breakpoint-down: (
xs: (
padding-bottom: 4px,
padding-left: 6px,
padding-right: 6px,
padding-top: 8px,
),
),
),
$cadmin-date-picker-calendar-header-container
);

$cadmin-date-picker-calendar-body-container: () !default;
$cadmin-date-picker-calendar-body-container: map-merge(
(
padding-left: 16px,
padding-right: 16px,
padding-left: 8px,
padding-right: 8px,
padding-bottom: 8px,
media-breakpoint-down: (
xs: (
padding-left: 6px,
padding-right: 6px,
padding-bottom: 4px,
),
),
),
$cadmin-date-picker-calendar-body-container
);
Expand All @@ -193,10 +245,17 @@ $cadmin-date-picker-calendar-footer-container: map-merge(
border-color: $cadmin-gray-400,
border-style: solid,
border-width: 1px 0 0 0,
padding-bottom: 16px,
padding-left: 24px,
padding-right: 24px,
padding-top: 16px,
padding-bottom: 8px,
padding-left: 14px,
padding-right: 14px,
padding-top: 8px,
media-breakpoint-down: (
xs: (
padding-left: 6px,
padding-right: 6px,
padding-top: 7px,
),
),
),
$cadmin-date-picker-calendar-footer-container
);
Expand Down Expand Up @@ -228,6 +287,12 @@ $cadmin-date-picker-calendar-item: map-deep-merge(
vertical-align: middle,
white-space: nowrap,
width: 32px,
media-breakpoint-down: (
xs: (
height: 24px,
width: 24px,
),
),
),
$cadmin-date-picker-calendar-item
);
Expand Down Expand Up @@ -288,6 +353,14 @@ $cadmin-date-picker-next-month-date: map-deep-merge(

// Date Picker Input Group

$cadmin-date-picker-input-group-item: () !default;
$cadmin-date-picker-input-group-item: map-deep-merge(
(
margin-left: 2px,
),
$cadmin-date-picker-input-group-item
);

$cadmin-date-picker-input-group-text: () !default;
$cadmin-date-picker-input-group-text: map-deep-merge(
(
Expand All @@ -299,6 +372,34 @@ $cadmin-date-picker-input-group-text: map-deep-merge(
min-width: 32px,
padding-left: 4px,
padding-right: 4px,
media-breakpoint-down: (
xs: (
font-size: inherit,
height: $cadmin-input-height-sm,
min-width: 24px,
),
),
),
$cadmin-date-picker-input-group-text
);

$date-picker-input-form-control: () !default;
$date-picker-input-form-control: map-deep-merge(
(
media-breakpoint-down: (
xs: (
border-radius:
clay-enable-rounded($cadmin-input-border-radius-sm),
font-size: $cadmin-input-font-size-sm,
height: $cadmin-input-height-sm,
line-height: $cadmin-input-line-height-sm,
min-height: $cadmin-input-height-sm,
padding-bottom: $cadmin-input-padding-y-sm,
padding-left: $cadmin-input-padding-x-sm,
padding-right: $cadmin-input-padding-x-sm,
padding-top: $cadmin-input-padding-y-sm,
),
),
),
$date-picker-input-form-control
);
1 change: 1 addition & 0 deletions packages/clay-css/src/scss/cadmin/variables/_time.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ $cadmin-clay-time-form-control-inset: () !default;
$cadmin-clay-time-form-control-inset: map-deep-merge(
(
margin-bottom: 0,
margin-left: 0,
margin-top: 0,
text-align: center,
width: 20px,
Expand Down
Loading

0 comments on commit c7e092a

Please sign in to comment.