Improved and cleanup CSS and language selectors

This commit is contained in:
djmaze 2021-08-27 16:30:42 +02:00
parent f192902827
commit 45662b39b0
8 changed files with 14 additions and 133 deletions

View file

@ -45,6 +45,7 @@ button,
input,
optgroup,
select,
.select,
textarea {
font-family: inherit;
font-size: @baseFontSize;
@ -58,6 +59,7 @@ textarea {
// Shared size and type resets
select,
.select,
textarea,
input {
box-sizing: border-box;
@ -112,7 +114,7 @@ input[type="checkbox"] {
}
// Make select elements obey height by applying a border
select {
select, .select {
appearance: none;
background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid @inputBorder;
@ -123,6 +125,7 @@ select {
// Focus for select, file, radio, and checkbox
select:focus,
.select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@ -130,16 +133,6 @@ input[type="checkbox"]:focus {
}
// Placeholder
// -------------------------
// Placeholder text gets special styles; can't be bundled together though for some reason
input::placeholder,
textarea::placeholder {
color: @placeholderText;
}
// INPUT SIZES
// -----------

View file

@ -10,7 +10,6 @@
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@ -18,21 +17,8 @@
@white: #fff;
// Accent colors
// -------------------------
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: @grayDark;
@ -70,15 +56,12 @@
@btnSuccessBackground: #84AB04;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnWarningBackground: lighten(#f89406, 15%);
@btnWarningBackgroundHighlight: #f89406;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms
// -------------------------
@ -119,11 +102,6 @@
@zindexModal: 1101;
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
@ -134,13 +112,6 @@
@wellBackground: #f5f5f5;
// Pagination
// -------------------------
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@ -170,27 +141,3 @@
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

View file

@ -5,18 +5,8 @@
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @wellBackground;
border: 1px solid darken(@wellBackground, 7%);
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
display: inline-block;
}
// Sizes
.well-small {
padding: 9px;
border-radius: 3px;
}