extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-30 12:04:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form group styles

Browse Source
This commit is contained in:
zombieFox 2019-10-22 20:12:47 +01:00
parent 933b16ad8c
commit d8101e09e1
2 changed files with 144 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/css/form.css
View File

@ -1149,6 +1149,7 @@ input[type="range"]:disabled::-moz-range-progress {
border-style: solid;
border-color: transparent;
border-radius: var(--theme-radius);
white-space: nowrap;
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
}
@ -1192,8 +1193,9 @@ input[type="range"]:disabled::-moz-range-progress {
flex-basis: 50%;
}
.form-group button,
.form-group .form-group-text,
.form-group .button,
.form-group>select,
.form-group>input[type="email"],
.form-group>input[type="number"],
.form-group>input[type="password"],
@ -1203,26 +1205,34 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group>input[type="color"] {
margin: 0;
border-radius: 0;
height: inherit;
min-height: 2.5em;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
z-index: 1;
}
.form-group .form-group-text {
margin-bottom: 0;
border-radius: 0;
z-index: 1;
position: relative;
flex-shrink: 0;
}
.form-group>input[type="email"],
.form-group>input[type="number"],
.form-group>input[type="password"],
.form-group>input[type="search"],
.form-group>input[type="tel"],
.form-group>input[type="text"],
.form-group>input[type="color"] {
.form-group .form-group-text:focus,
.form-group .button:focus,
.form-group>select:focus,
.form-group>input[type="email"]:focus,
.form-group>input[type="number"]:focus,
.form-group>input[type="password"]:focus,
.form-group>input[type="search"]:focus,
.form-group>input[type="tel"]:focus,
.form-group>input[type="text"]:focus,
.form-group>input[type="color"]:focus {
z-index: 2;
}
.form-group>.form-group-text:hover,
.form-group .form-group-text:hover,
.form-group .button:hover,
.form-group>select:hover,
.form-group>input[type="email"]:hover,
.form-group>input[type="number"]:hover,
.form-group>input[type="password"]:hover,
@ -1233,28 +1243,9 @@ input[type="range"]:disabled::-moz-range-progress {
z-index: 3;
}
.form-group>.form-group-text:active,
.form-group>.form-group-text:focus,
.form-group>input[type="email"]:active,
.form-group>input[type="email"]:focus,
.form-group>input[type="number"]:active,
.form-group>input[type="number"]:focus,
.form-group>input[type="password"]:active,
.form-group>input[type="password"]:focus,
.form-group>input[type="search"]:active,
.form-group>input[type="search"]:focus,
.form-group>input[type="tel"]:active,
.form-group>input[type="tel"]:focus,
.form-group>input[type="text"]:active,
.form-group>input[type="text"]:focus,
.form-group>input[type="color"]:active,
.form-group>input[type="color"]:focus {
z-index: 4;
}
.form-group>.form-group-text:first-child,
.form-group>button:first-child,
.form-group>.button:first-child,
.form-group .form-group-text:first-child,
.form-group .button:first-child,
.form-group>select:first-child,
.form-group>input[type="email"]:first-child,
.form-group>input[type="number"]:first-child,
.form-group>input[type="password"]:first-child,
@ -1265,9 +1256,9 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}
.form-group>.form-group-text:last-child,
.form-group>button:last-child,
.form-group>.button:last-child,
.form-group .form-group-text:last-child,
.form-group .button:last-child,
.form-group>select:last-child,
.form-group>input[type="email"]:last-child,
.form-group>input[type="number"]:last-child,
.form-group>input[type="password"]:last-child,

115
src/style-guide.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en" style="background-color: rgb(38, 40, 49)" class="is-theme-style-dark">
<head>
<meta charset="utf-8">
<meta name="theme-color" content="#262831">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Style Guide</title>
<!-- css-block -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/edge.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/state.css">
<link rel="stylesheet" href="css/typography.css">
<link rel="stylesheet" href="css/spacing.css">
<link rel="stylesheet" href="css/button.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/shade.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="css/tip.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/date.css">
<link rel="stylesheet" href="css/clock.css">
<link rel="stylesheet" href="css/greeting.css">
<link rel="stylesheet" href="css/transitional.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="css/group.css">
<link rel="stylesheet" href="css/link.css">
<link rel="stylesheet" href="css/auto-suggest.css">
<link rel="stylesheet" href="css/fontawesome.css">
<!-- end-css-block -->
</head>
<body>
<main class="layout my-5">
<p>Buttons</p>
<div class="button-wrap">
<button class="button button-small mb-0" tabindex="1">Small</button>
</div>
<div class="button-wrap">
<button class="button mb-0" tabindex="1">Medium</button>
</div>
<div class="button-wrap">
<button class="button button-large mb-0" tabindex="1">Large</button>
</div>
<hr>
<p>Form</p>
<div class="input-wrap">
<input id="style-guide-checkbox" type="checkbox" tabindex="1">
<label for="style-guide-checkbox">Checkbox</label>
</div>
<div class="input-wrap">
<input id="style-guide-radio-1" type="radio" name="style-guide-radio" tabindex="1">
<label for="style-guide-radio-1">Radio 1</label>
</div>
<div class="input-wrap">
<input id="style-guide-radio-2" type="radio" name="style-guide-radio" tabindex="1">
<label for="style-guide-radio-2">Radio 2</label>
</div>
<div class="input-wrap">
<input id="style-guide-radio-3" type="radio" name="style-guide-radio" tabindex="1">
<label for="style-guide-radio-3">Radio 3</label>
</div>
<div class="input-wrap">
<label for="input-text">Input Text</label>
<input id="input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="placeholder" tabindex="1">
</div>
<div class="input-wrap">
<label for="textarea">Textarea</label>
<textarea id="textarea" class="textarea mb-0" spellcheck="false" placeholder="placeholder" tabindex="1"></textarea>
</div>
<div class="input-wrap">
<label for="input-range">Input Range</label>
<input id="input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
</div>
<div class="input-wrap">
<label for="input-colour">Input Colour</label>
<input id="input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
</div>
<div class="input-wrap">
<label for="select-1">Select</label>
<select id="select-1" class="mb-0" tabindex="1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="input-wrap">
<label for="form-group-1">Form Group</label>
<div class="form-group mb-0">
<input id="form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="form-group-3" class="form-group-item-half mb-0" type="color" value="#000000" tabindex="1">
<button class="button mb-0" tabindex="1">Button</button>
<select id="select-2" class="mb-0" tabindex="1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div class="form-group-text" tabindex="1">Form Group Text</div>
</div>
</div>
</main>
</body>
</html>