Skip to content

Commit

Permalink
refactor: add height styles to match button component
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebnitu
sebnitu committed May 25, 2021
1 parent 7a94d9b commit dcb86ee
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 48 deletions.
3 changes: 3 additions & 0 deletions docs/dist/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/dist/styles.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/styles.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/styles.min.css.map
View file

Large diffs are not rendered by default.

38 changes: 18 additions & 20 deletions packages/input/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,18 @@ <h1 class="text-size-lg">@vrembem/input</h1>
<h2>Login Form</h2>
</div>
<div class="grid__item span-8">
<form class="gap-y">
<div>
<div class="grid grid_gap-y_sm grid_stack_sm">
<div class="grid__item gap-y-sm">
<label for="user_email">Email address</label>
<input class="input" type="email" name="user[email]" id="user_email" />
</div>
<div class="grid__item gap-y-sm">
<label for="user_password">Password</label>
<input class="input" type="password" name="user[password]" id="user_password" />
</div>
<div class="grid__item grid__item_auto flex flex-align-end">
<button class="button button_color_primary margin-top-md">Submit Form</button>
</div>
<form>
<div class="grid grid_gap-y_sm grid_stack_sm">
<div class="grid__item gap-y-sm">
<label for="user_email">Email address</label>
<input class="input" type="email" name="user[email]" id="user_email">
</div>
<div class="grid__item gap-y-sm">
<label for="user_password">Password</label>
<input class="input" type="password" name="user[password]" id="user_password">
</div>
<div class="grid__item grid__item_auto flex flex-align-end">
<button class="button button_color_primary margin-top-md">Submit Form</button>
</div>
</div>
</form>
Expand All @@ -72,13 +70,13 @@ <h2>Address Form</h2>
<form class="gap-y">
<div class="gap-y-sm">
<label for="address_street">Street address</label>
<input class="input" type="text" name="address[street]" id="address_street" />
<input class="input" type="text" name="address[street]" id="address_street">
</div>
<div>
<div class="grid grid_gap-y_sm grid_stack_sm">
<div class="grid__item gap-y-sm">
<label for="address_city">City</label>
<input class="input" type="text" name="address[city]" id="address_city" />
<input class="input" type="text" name="address[city]" id="address_city">
</div>
<div class="grid__item gap-y-sm">
<label for="address_state">State</label>
Expand All @@ -91,7 +89,7 @@ <h2>Address Form</h2>
</div>
<div class="grid__item gap-y-sm">
<label for="address_zip">Zip</label>
<input class="input" type="text" name="address[zip]" id="address_zip" />
<input class="input" type="text" name="address[zip]" id="address_zip">
</div>
</div>
</div>
Expand All @@ -112,15 +110,15 @@ <h2>Contact Form</h2>
<form class="gap-y">
<div class="gap-y-sm">
<label for="contact_name">Full name</label>
<input class="input" type="text" name="contact[name]" id="contact_name" />
<input class="input" type="text" name="contact[name]" id="contact_name">
</div>
<div class="gap-y-sm">
<label for="contact_email">Email address</label>
<input class="input" type="email" name="contact[email]" id="contact_email" />
<input class="input" type="email" name="contact[email]" id="contact_email">
</div>
<div class="gap-y-sm">
<label for="contact_phone">Phone</label>
<input class="input" type="tel" name="contact[phone]" id="contact_phone" />
<input class="input" type="tel" name="contact[phone]" id="contact_phone">
</div>
<div class="gap-y-sm">
<label for="contact_message">Message</label>
Expand Down
5 changes: 3 additions & 2 deletions packages/input/src/_input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ $_b: var.$prefix-block;
display: block;
width: 100%;
max-width: 100%;
min-height: var.$min-size;
padding: var.$padding;
transition: box-shadow core.$transition-duration core.$transition-timing-function;
border: var.$border;
Expand All @@ -36,11 +37,11 @@ $_b: var.$prefix-block;
}

&[disabled] {
background-color: var.$background-disabled;
background-color: var.$disabled-background;
}

&[readonly] {
background-color: var.$background-readonly;
background-color: var.$readonly-background;
}

&::placeholder {
Expand Down
2 changes: 2 additions & 0 deletions packages/input/src/_input_size.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ $_m: var.$prefix-modifier;
$_v: var.$prefix-modifier-value;

.#{$_b}input#{$_m}size#{$_v}sm {
min-height: var.$size-sm-min-size;
padding: var.$size-sm-padding;
font-size: var.$size-sm-font-size;
line-height: var.$size-sm-line-height;
}

.#{$_b}input#{$_m}size#{$_v}lg {
min-height: var.$size-lg-min-size;
padding: var.$size-lg-padding;
font-size: var.$size-lg-font-size;
line-height: var.$size-lg-line-height;
Expand Down
50 changes: 27 additions & 23 deletions packages/input/src/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,50 @@
@use "sass:list";
@use "@vrembem/core";

$prefix-block: core.$prefix-block !default;
$prefix-element: core.$prefix-element !default;
$prefix-modifier: core.$prefix-modifier !default;
$prefix-modifier-value: core.$prefix-modifier-value !default;

$padding: nth(core.$padding, 1) 0.5em !default;
$font-size: core.$font-size !default;
$line-height: core.$line-height !default;

$size-sm-padding: core.$padding-sm !default;
$size-sm-font-size: core.$font-size-sm !default;
$size-sm-line-height: core.$line-height-sm !default;

$size-lg-padding: nth(core.$padding-lg, 1) !default;
$size-lg-font-size: core.$font-size-lg !default;
$size-lg-line-height: core.$line-height-lg !default;

$color: core.$color !default;
$color-placeholder: core.$color-subtle !default;

$min-size: 2.5rem !default; // 40px
$padding: list.nth(core.$padding, 1) 0.5em !default;
$border: none !default;
$border-color-hover: null !default;
$border-color-focus: null !default;
$border-radius: (core.$border-radius - 1px) !default;
$background: core.$white !default;
$background-focus: core.$white !default;
$background-disabled: core.$shade !default;
$background-readonly: core.$shade !default;

$box-shadow-values: 0 0 0 1px !default;
$box-shadow-color: core.$border-color-dark !default;
$box-shadow-hover-values: 0 0 0 1px !default;
$box-shadow-hover-color: core.$border-color-darker !default;
$box-shadow-focus-values: 0 0 0 2px !default;
$box-shadow-focus-color: core.$primary !default;

$inset-box-shadow: 0 1px 3px rgba(core.$black, 0.1) !default;
$inset-box-shadow-hover: 0 1px 3px rgba(core.$black, 0.1) !default;
$inset-box-shadow-focus: null !default;
$color: core.$color !default;
$color-placeholder: core.$color-subtle !default;
$font-size: core.$font-size !default;
$line-height: core.$line-height !default;

$border: none !default;
$border-color-hover: null !default;
$border-color-focus: null !default;
$border-radius: (core.$border-radius - 1px) !default;
// disabled
$disabled-background: core.$shade !default;

// readonly
$readonly-background: core.$shade !default;

// input_size_[value]
$size-sm-min-size: 1.875rem !default; // 30px
$size-sm-padding: core.$padding-sm !default;
$size-sm-font-size: core.$font-size-sm !default;
$size-sm-line-height: core.$line-height-sm !default;
$size-lg-min-size: 3.125rem !default; // 50px
$size-lg-padding: list.nth(core.$padding-lg, 1) !default;
$size-lg-font-size: core.$font-size-lg !default;
$size-lg-line-height: core.$line-height-lg !default;

// input_type_[value]
$type-select-icon-color: core.$color !default;
$type-select-icon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="#{core.encodecolor($type-select-icon-color)}"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>' !default;
$type-textarea-min-height: 2.375em !default;

0 comments on commit dcb86ee

Please sign in to comment.