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

@ -1,20 +1,5 @@
.b-admin-general {
.flag-selector {
padding-top: 5px;
}
.flag-name {
border-bottom: 1px dashed #555;
cursor: pointer;
padding: 2px 0;
&:focus {
outline: 1px;
outline-style: dotted;
}
}
}

View file

@ -82,7 +82,6 @@
.input-block-level {
font-size: 18px;
height: 40px;
line-height: 20px;
padding-left: 12px;
}
.inputIcon {
@ -90,20 +89,15 @@
}
input, .btn {
border: 1px solid none;
background: none !important;
text-shadow: none;
box-shadow: none;
border: 1px solid @glass-m-color;
color: @glass-color;
border-color: @glass-m-color;
}
input {
&:placeholder {
color: @glass-color;
text-shadow: none;
}
&:focus, &:hover {
@ -158,10 +152,6 @@
opacity: 0;
}
.flag-selector {
margin-bottom: 0;
}
.language-buttons {
margin-top: 5px;
}

View file

@ -1,19 +1,4 @@
.b-settings-general {
.flag-selector {
padding-top: 5px;
}
.flag-name {
border-bottom: 1px dashed #555;
cursor: pointer;
padding: 2px 0;
&:focus {
outline: 1px;
outline-style: dotted;
}
}
}

View file

@ -21,22 +21,15 @@
<div class="control-group" style="margin-bottom: 10px;">
<label class="control-label" data-i18n="TAB_GENERAL/LABEL_LANGUAGE"></label>
<div class="controls">
<div class="flag-selector">
<span class="flag-name" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, onSpace: selectLanguage, onEnter: selectLanguage"></span>
<span data-bind="saveTrigger: languageTrigger"></span>
</div>
<span class="select" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, onSpace: selectLanguage, onEnter: selectLanguage"></span>
<span data-bind="saveTrigger: languageTrigger"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" data-i18n="TAB_GENERAL/LABEL_LANGUAGE_ADMIN"></label>
<div class="controls">
<div class="flag-selector">
<span class="flag-wrapper">
<span data-bind="css: 'flag flag-' + languageAdmin().toLowerCase()"></span>
</span>
<span class="flag-name" tabindex="0" data-bind="text: languageAdminFullName, click: selectLanguageAdmin, onSpace: selectLanguageAdmin, onEnter: selectLanguageAdmin"></span>
<span data-bind="saveTrigger: languageAdminTrigger"></span>
</div>
<span class="select" tabindex="0" data-bind="text: languageAdminFullName, click: selectLanguageAdmin, onSpace: selectLanguageAdmin, onEnter: selectLanguageAdmin"></span>
<span data-bind="saveTrigger: languageAdminTrigger"></span>
</div>
</div>
<div class="control-group">
@ -109,7 +102,7 @@
<span data-bind="saveTrigger: attachmentLimitTrigger"></span>
<br />
<br />
<span class="well well-small" data-bind="visible: '' !== uploadDataDesc">
<span class="well" data-bind="visible: '' !== uploadDataDesc">
<b>PHP:</b>
&nbsp;
<span data-bind="text: uploadDataDesc"></span>

View file

@ -13,10 +13,8 @@
<div class="control-group" data-bind="visible: allowLanguagesOnSettings">
<label class="control-label" data-i18n="SETTINGS_GENERAL/LABEL_LANGUAGE"></label>
<div class="controls">
<div class="flag-selector">
<span class="flag-name" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, onSpace: selectLanguage, onEnter: selectLanguage"></span>
<span data-bind="saveTrigger: languageTrigger"></span>
</div>
<span class="select" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, onSpace: selectLanguage, onEnter: selectLanguage"></span>
<span data-bind="saveTrigger: languageTrigger"></span>
</div>
</div>
<div class="control-group">

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;
}