Skip to content

Commit

Permalink
feat(inputs): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Oct 12, 2022
1 parent 912de6e commit 3eb25e7
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 204 deletions.
166 changes: 32 additions & 134 deletions src/core/components/input/input-ios.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
}
}
.item-floating-label {
transform: scale(var(--f7-floating-label-scale))
translateY(calc((var(--f7-input-height) / 2 - 25%) / var(--f7-floating-label-scale)));
transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height) + 25%));
}
.item-input-focused .item-floating-label {
color: var(--f7-label-text-color);
Expand Down Expand Up @@ -79,150 +78,49 @@
}
}

.input-outline:after,
.item-input-outline .item-input-wrap:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid var(--f7-input-outline-border-color);
border-radius: var(--f7-input-outline-border-radius);
transition-duration: 200ms;
pointer-events: none;
.item-input-outline .item-content,
.item-input-outline.item-content {
padding-top: 8px;
padding-bottom: 8px;
margin-left: 16px;
margin-right: 16px;
}
.input-outline.input-focused:after,
.item-input-outline.item-input-focused .item-input-wrap:after {
border-width: 2px;
border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
}
.input-outline.input-invalid:after,
.item-input-outline.item-input-invalid .item-input-wrap:after {
border-width: 2px;
border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
}
.input-outline,
.item-input-outline,
.list .item-input-outline {
input,
textarea,
select {
border-radius: var(--f7-input-outline-border-radius);
padding-left: var(--f7-input-outline-padding-horizontal);
padding-right: var(--f7-input-outline-padding-horizontal);
}
}
.input-outline.input-dropdown,
.item-input-outline .input-dropdown-wrap {
&:before {
.ltr({
right: 8px;
});
.rtl({
left: 8px;
});
}
input,
textarea,
select {
.ltr({
padding-right: 20px;
});
.rtl({
padding-left: 20px;
});
li.item-input-outline:first-child,
li:first-child > .item-input-outline {
padding-top: 16px;
&::after {
top: 16px;
}
}
.input-outline,
.item-input-outline {
.input-clear-button {
.ltr({
right: 8px;
});
.rtl({
left: 8px;
});
li.item-input-outline:last-child,
li:last-child > .item-input-outline {
padding-bottom: 16px;
&::after {
bottom: 16px;
}
}

.item-input-outline {
--f7-input-height: var(--f7-input-outline-height);
.item-inner:after {
display: none !important;
.item-input-outline .item-content,
.item-input-outline.item-content,
.input-outline {
.item-inner {
display: block;
padding-top: 0px;
padding-bottom: 0px;
}
.item-label {
.ltr({
left: var(--f7-input-outline-padding-horizontal);
});
.rtl({
right: var(--f7-input-outline-padding-horizontal);
});
.item-input-wrap {
margin-top: -22px;
}

.item-label,
.item-floating-label {
.ltr({
left: calc(var(--f7-input-outline-padding-horizontal) - 4px);
});
.rtl({
right: calc(var(--f7-input-outline-padding-horizontal) - 4px);
});
padding-left: 4px;
padding-right: 4px;
background: var(--f7-page-bg-color);
z-index: 10;
margin-top: calc(-0.5 * (var(--f7-label-line-height)));
}
&.item-input-with-value .item-floating-label,
&.item-input-focused .item-floating-label {
transform: scale(1) translateY(50%);
}
.item-input-info,
.item-input-error-message {
.ltr({
padding-left: var(--f7-input-outline-padding-horizontal);
});
.rtl({
padding-right: var(--f7-input-outline-padding-horizontal);
});
display: inline-flex;
margin: -8px -4px -4px;
top: -4px;
}
}

.item-input-outline,
.input-outline {
.item-input-wrap {
margin-top: 0;
margin-bottom: 0;
}
.item-input-error-message,
.item-input-info,
.input-error-message,
.input-info {
margin-top: 0;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.item-input-info,
.input-info {
margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
}
.item-input-error-message,
.input-error-message {
margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
}
&.item-input-with-info,
&.input-with-info {
.item-input-wrap {
margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
}
}
&.item-input-with-error-message,
&.input-with-error-message {
.item-input-wrap {
margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
}
.item-floating-label {
transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height)));
}
}
}
43 changes: 2 additions & 41 deletions src/core/components/input/input-md.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,7 @@
&.input-invalid {
&::after {
transform: scaleY(2) !important;
background: var(
--f7-input-outline-invalid-border-color,
var(--f7-input-error-text-color)
);
background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
}
}
}
Expand All @@ -62,57 +59,21 @@
.item-input-outline .item-content,
.item-input-outline.item-content,
.input-outline {
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 8px;
bottom: 8px;
border: 1px solid var(--f7-input-border-color);
border-radius: var(--f7-input-outline-border-radius);
pointer-events: none;
box-sizing: border-box;
transition-duration: 200ms;
}
.item-inner {
padding-top: 16px;
padding-bottom: 16px;
}

.item-label,
.item-floating-label {
pointer-events: none;
--label-height: calc(var(--f7-label-line-height) + 8px);
background: var(--f7-md-surface);
z-index: 1;
padding: 4px;
--label-height: calc(var(--f7-label-height) + 8px);
margin: calc(0px - 16px - var(--label-height) / 2) -4px 4px;
width: auto;
}

.item-floating-label {
transform: scale(var(--f7-floating-label-scale))
translateY(calc((var(--f7-input-height) / 2) + 8px));
}

&.item-input-focused,
&.input-focused {
&::after {
border-width: 2px;
border-color: var(--f7-input-outline-invalid-border-color, var(--f7-theme-color));
}
}
&.item-input-invalid,
&.input-invalid {
&::after {
border-width: 2px;
border-color: var(
--f7-input-outline-invalid-border-color,
var(--f7-input-error-text-color)
);
}
}
}

.item-input-with-error-message,
Expand Down
15 changes: 6 additions & 9 deletions src/core/components/input/input-vars.less
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
:root {
--f7-input-bg-color: transparent;
--f7-label-font-weight: 400;
--f7-label-line-height: 16px;
--f7-label-height: 16px;
--f7-label-font-size: 12px;
--f7-floating-label-scale: calc(16 / 12);

--f7-input-padding-left: 0px;
--f7-input-padding-right: 0px;
--f7-input-error-text-color: #ff3b30;
Expand All @@ -10,10 +13,7 @@
--f7-input-error-font-weight: 400;
--f7-input-info-font-size: 12px;
--f7-input-info-line-height: 1.4;
--f7-input-outline-height: 40px;

--f7-input-outline-border-radius: 4px;
--f7-input-outline-padding-horizontal: 12px;
--f7-textarea-height: 100px;
/*
--f7-input-outline-focused-border-color: var(--f7-theme-color);
Expand All @@ -26,7 +26,6 @@
}
.ios-vars({
--f7-input-item-bg-color: transparent;
--f7-input-item-margin-vertical: 0px;
--f7-input-item-border-radius: 0px;
--f7-input-height: 40px;
--f7-input-font-size: 16px;
Expand All @@ -38,14 +37,13 @@
--f7-input-invalid-border-color: var(--f7-list-item-border-color);
--f7-input-invalid-text-color: var(--f7-input-error-text-color);
*/
--f7-label-font-size: 12px;
--f7-label-text-color: inherit;
/*
--f7-label-focused-text-color: var(--f7-label-text-color);
--f7-label-invalid-text-color: var(--f7-label-text-color);
*/
--f7-floating-label-scale: calc(17 / 12);
--f7-input-clear-button-size: 14px;
--f7-input-outline-border-radius: 8px;
.light-vars({
--f7-input-text-color: #000000;
--f7-input-info-text-color: rgba(0,0,0,0.45);
Expand All @@ -61,18 +59,17 @@
});
.md-vars({
--f7-input-item-bg-color: var(--f7-md-surface-variant);
--f7-input-item-margin-vertical: 16px;
--f7-input-item-border-radius: 4px 4px 0 0;
--f7-input-border-color: var(--f7-md-outline);
--f7-input-height: 24px;
--f7-input-font-size: 16px;
--f7-textarea-padding-vertical: 0px;
--f7-input-outline-border-radius: 4px;
/*
--f7-input-focused-border-color: var(--f7-theme-color);
--f7-input-invalid-border-color: var(--f7-input-error-text-color);
--f7-input-invalid-text-color: var(--f7-input-text-color);
*/
--f7-label-font-size: 12px;
/*
--f7-label-focused-text-color: var(--f7-theme-color);
--f7-label-invalid-text-color: var(--f7-input-error-text-color );
Expand Down
Loading

0 comments on commit 3eb25e7

Please sign in to comment.