Skip to content

Commit

Permalink
Adding input to CSS package. Early staged.
Browse files Browse the repository at this point in the history
  • Loading branch information
@roblevintennis
roblevintennis committed Oct 2, 2020
1 parent 832ca02 commit fe4c379
Show file tree
Hide file tree
Showing 2 changed files with 260 additions and 0 deletions.
158 changes: 158 additions & 0 deletions agnosticui-css/input.css
View file
@@ -0,0 +1,158 @@
.input-base,
.input {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}

.label, .label-base {
box-sizing: border-box;
padding: 0;
font-size: 100%;
font-family: inherit;
border: 0;
}

.label-skin,
.label,
.input-skin,
.input {
--agnosticui-input-font-color: var(--agnosticui-font-color, #333333);
--agnosticui-input-font-weight: var(--agnosticui-font-weight, 300);
--agnosticui-input-font-size: var(--agnosticui-font-size, 16px);
--agnosticui-input-border-size: var(--agnosticui-border-size, 1px);
--agnosticui-input-border-color: var(--agnosticui-border-color, #e9e9e9);
--agnosticui-input-radius: var(--agnosticui-border-radius, 4px);
--agnosticui-input-underlined-color: var(--agnosticui-underlined-color, #cccccc);
--agnosticui-input-underlined-bg-color: var(--agnosticui-underlined-bg-color, #f8f8f8);

/* TODO -- share these with agnosticui buttons */
--agnosticui-input-disabled-bg: var(--agnosticui-disabled-bg, #e9e9e9);
--agnosticui-input-disabled-color: var(--agnostic-disabled-color, #aaaaaa);

/* these can be overriden, but it might mess with the balance of the inputheights across variants */
--agnosticui-input-vertical-pad: .5rem;
--agnosticui-input-line-height: 1.25rem;
--agnosticui-input-side-padding: .75rem;

--agnosticui-input-font-family: var(--agnosticui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
--agnosticui-input-btn-radius: var(--agnosticui-border-radius, 4px);
color: var(--agnosticui-input-font-color);
font-family: var(--agnosticui-input-font-family);
font-weight: var(--agnosticui-input-font-weight);
font-size: var(--agnosticui-input-font-size);
line-height: var(--agnosticui-input-line-height);
width: 100%;
max-width: 100%;
}

.input-skin,
.input {
border-color: var(--agnosticui-input-border-size,
var(--agnosticui-default-btn-bgcolor)
);
/* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
border-style: solid;
/* this can be overriden, but it might mess with the balance of the button heights across variants */
border-width: var(--agnosticui-input-border-size);
border-color: var(--agnosticui-input-border-color);
padding-top: var(--agnosticui-input-vertical-pad);
padding-bottom: var(--agnosticui-input-vertical-pad);
padding-left: var(--agnosticui-input-side-padding);
padding-right: var(--agnosticui-input-side-padding);

/* Note we only want to set properties that we actually want
to transition in. For example, if we transition "all", the
inputs will "grow in" on page load—not a happy effect :) */
transition-property: box-shadow;
transition-duration: 0.3s;
}

.label {
display: inline-block;
margin: 0 0 var(--agnosticui-input-vertical-pad);
vertical-align: initial;
}

.label-inline,
.input-inline {
width: auto;
}

/* When inlined, the margin-bottom will throw the label off-center with adjacent input */
.label-inline {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: var(--agnosticui-input-side-padding);
}

/**
* Underlined inputs
*/
.input-underlined {
border-top: 0;
border-left: 0;
border-right: 0;
border-color: var(--agnosticui-input-underlined-color);
background-color: transparent;
}

.input-underlined-bg {
background-color: var(--agnosticui-input-underlined-bg-color);
}

/**
* Rounded inputs
*/
.input-rounded {
border-radius: var(--agnosticui-input-radius);
}

/**
* Sizes
*/
.input-large {
font-size: calc(var(--agnosticui-input-font-size) + 4px);
height: 48px;
line-height: 48px;
}

.input-small {
font-size: calc(var(--agnosticui-input-font-size) - 4px);
height: 32px;
line-height: 32px;
}

.input:focus {
box-shadow: 0 0 0 3px rgba(55, 149, 225, 0.5);
/* High contrast mode outline */
outline: 3px solid transparent;
}

/*
* Disabled State
*
* The disabled state uses the class .disabled,
* and the form attribute disabled="disabled".
* The use of !important is only added because this is a state
* that must be applied to all inputs when in a disabled state.
*/
.input.disabled,
.input:disabled {
/* High contrast mode outline hacks */
outline: 2px solid transparent;
outline-offset: -2px;
background: var(--agnosticui-input-disabled-bg) !important;
color: var(--agnosticui-input-disabled-color) !important;
cursor: default !important;
appearance: none !important;
box-shadow: none !important;
opacity: 0.8 !important;
cursor: not-allowed;
}
102 changes: 102 additions & 0 deletions agnosticui-css/input.html
View file
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inputs</title>

<link rel="stylesheet" href="./input.css">
<style>
/* these styles are purely demonstration related styles only */
body {
width: 450px;
margin: 40px auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h3 {
font-weight: 300;
margin-bottom: 40px;
}

div,
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-bottom: 40px;
}

.row {
flex-direction: row;
align-items: center;
}
</style>
</head>

<body>
<div>
<h1>Inputs</h1>
</div>

<h3>Text Input</h3>
<div>
<section>
<form>
<div>
<label class="label" for="input-text">Input label</label>
<input placeholder="Placeholder text" class="input" id="input-text" name="input-text" type="text">
</div>
<div>
<label class="label" for="input-text-rounded">Input rounded label</label>
<input placeholder="Placeholder text" class="input input-rounded" id="input-text-rounded"
name="input-text-rounded" type="text">
</div>
<div>
<label class="label" for="input-text-small">Input small label</label>
<input placeholder="Placeholder text" class="input input-small" id="input-text-small" name="input-text-small"
type="text">
</div>
<div>
<label class="label" for="input-text-large">Input large label</label>
<input placeholder="Placeholder text" class="input input-large" id="input-text-large" name="input-text-large"
type="text">
</div>
<div>
<label class="label" for="input-text-underlined">Underlined inputs</label>
<input placeholder="Placeholder text" class="input input-underlined" id="input-text-underlined"
name="input-text-underlined" type="text">
</div>
<div>
<label class="label" for="input-text-underlined-bg">Underlined inputs with background</label>
<input placeholder="Placeholder text" class="input input-underlined input-underlined-bg"
id="input-text-underlined-bg" name="input-text-underlined-bg" type="text">
</div>
<div>
<label class="label" for="input-text-underlined-bg-large">Underlined input combined with size large</label>
<input placeholder="Placeholder text" class="input input-underlined input-underlined-bg input-large"
id="input-text-underlined-bg-large" name="input-text-underlined-bg-large" type="text">
</div>
<div>
<label class="label" for="input-disabled">Input disabled</label>
<input placeholder="disabled" class="input" id="input-disabled" name="input-disabled" type="text" disabled>
</div>
<div class="row" style="justify-content: flex-start;">
<label class="label label-inline" for="input-text-inlined">Input label (inline)</label>
<input placeholder="Placeholder text" class="input input-inline" id="input-text-inlined"
name="input-text-inlined" type="text">
</div>
<div class="row">
<label class="label label-inline" for="input-text-underlined-inline">Input label (inline underlined)</label>
<input placeholder="Placeholder text" class="input input-inline input-underlined"
id="input-text-underlined-inline" name="input-text-underlined-inline"" type=" text">
</div>
</form>
</section>
</div>

</body>

</html>

0 comments on commit fe4c379

Please sign in to comment.