mirror of
https://github.com/the-djmaze/snappymail.git
synced 2025-10-04 19:04:43 +08:00
Improved and cleanup CSS and language selectors
This commit is contained in:
parent
f192902827
commit
45662b39b0
8 changed files with 14 additions and 133 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
<span data-bind="text: uploadDataDesc"></span>
|
||||
|
|
|
@ -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">
|
||||
|
|
15
vendors/bootstrap/less/forms.less
vendored
15
vendors/bootstrap/less/forms.less
vendored
|
@ -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
|
||||
// -----------
|
||||
|
||||
|
|
57
vendors/bootstrap/less/variables.less
vendored
57
vendors/bootstrap/less/variables.less
vendored
|
@ -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);
|
||||
|
|
10
vendors/bootstrap/less/wells.less
vendored
10
vendors/bootstrap/less/wells.less
vendored
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue