CSS / Layout cleanup

- Remove margin from input,button,select
- Fix some spacing issues
- Switch selects from display:inline-block to display:block so they take up all parent's space
- Let background (required) color show through select tag
- Some layout tweaks on mail account template
This commit is contained in:
nathan 2022-04-22 13:07:22 -06:00
parent 43f7a3b649
commit f8f04071be
8 changed files with 69 additions and 85 deletions

View File

@ -75,14 +75,14 @@
<textbox blur="Hostname or IP" id="acc_imap_host" size="32" maxlength="128" span="all"/>
</row>
<row>
<description for="acc_imap_ssl" value="Secure connection"/>
<hbox>
<select class="emailadmin_ssl" id="acc_imap_ssl" needed="1" onchange="app.admin.wizard_imap_ssl_onchange"/>
<textbox type="integer" label="Port" id="acc_imap_port" needed="1" class="emailadmin_port"/>
</hbox>
<description/>
<description/>
</row>
<description for="acc_imap_ssl" value="Secure connection"/>
<hbox>
<select class="emailadmin_ssl" id="acc_imap_ssl" needed="1"
onchange="app.admin.wizard_imap_ssl_onchange"/>
</hbox>
<description for="acc_imap_port" value="Port"/>
<textbox type="integer" id="acc_imap_port" needed="1" class="emailadmin_port"/>
</row>
<row class="emailadmin_no_single">
<groupbox span="all" class="emailadmin_imap_admin">
<caption label="IMAP administration"/>
@ -327,7 +327,7 @@
<rows>
<row disabled="!@accounts" class="dialogHeader">
<description for="acc_id" value="Mail account"/>
<select id="acc_id" onchange="app.admin.change_account" class="et2_fullWidth"/>
<select id="acc_id" onchange="app.admin.change_account" class="et2_fullWidth" span="2"/>
<description/>
</row>
<row class="dialogHeader">
@ -335,14 +335,15 @@
<textbox id="acc_name" needed="1" size="80" class="et2_fullWidth"/>
<description align="right" value="$cont[acc_id]" class="emailadmin_diagnostic"/>
</row>
<row class="emailadmin_no_user dialogHeader2">
<description for="account_id" value="Valid for"/>
<hbox>
<select-account account_type="both" id="account_id" onchange="app.admin.account_hide_not_applying" empty_label="Everyone" expand_multiple_rows="4"/>
<checkbox label="account editable by user" id="acc_user_editable"/>
</hbox>
<description/>
</row>
<row class="emailadmin_no_user dialogHeader2">
<description for="account_id" value="Valid for"/>
<hbox span="all">
<select-account account_type="both" id="account_id"
onchange="app.admin.account_hide_not_applying" empty_label="Everyone"
expand_multiple_rows="4"/>
<checkbox label="account editable by user" id="acc_user_editable"/>
</hbox>
</row>
<row>
<tabbox id="tabs" span="all" tab_height="420">
<tabs>

View File

@ -27,7 +27,7 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
...super.styles,
css`
:host {
display: inline-block;
display: block;
}
select {
width: 100%

View File

@ -36,12 +36,6 @@
/**
* Basic rules
*/
input,
button,
select {
margin: 1px;
padding: 0px;
}
/*Hide element*/
.hideme {
@ -588,7 +582,6 @@ ul.et2_selectbox {
/* padding between selectbox/textbox and it's label */
input, select {
text-indent: 5px;
max-width: 99% !important;
}
.et2_selectbox li {

View File

@ -3098,7 +3098,7 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background: url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
}

View File

@ -3073,14 +3073,14 @@ div.selectbox-wrapper ul li {
cursor: pointer;
}
select {
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
}
select:active {
background: #ffffff url(../images/arrow_up.svg) no-repeat center right;

View File

@ -178,35 +178,31 @@
/**
* Top level
*/
.et2_container {
padding: 0px;
background-color: transparent;
}
.et2_container > div:not([class]) {
height: 100%;
}
/**
* Basic rules
*/
input,
button,
select {
margin: 1px;
/*-webkit-appearance: none;*/
}
/**
* img gray filter
*/
img.et2_appicon,
.et2_appicon img,
table.egwGridView_grid img.et2_appicon {
/*filter grey*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
.et2_container {
padding: 0px;
background-color: transparent;
}
.et2_container > div:not([class]) {
height: 100%;
}
/**
* Basic rules
*/
/**
* img gray filter
*/
img.et2_appicon,
.et2_appicon img,
table.egwGridView_grid img.et2_appicon {
/*filter grey*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
/*filter: url(grayscale.svg); Firefox 4+ */
filter: gray;
/* IE 6-9 */
@ -3082,14 +3078,14 @@ div.selectbox-wrapper ul li {
cursor: pointer;
}
select {
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
}
select:active {
background: #ffffff url(../images/arrow_up.svg) no-repeat center right;

View File

@ -29,12 +29,6 @@
/**
* Basic rules
*/
input,button,select {
margin: 1px;
//padding: 0px;
// switch off for Safari + Chrome
/*-webkit-appearance: none;*/
}
/**
* img gray filter

View File

@ -96,14 +96,14 @@ div.selectbox-wrapper {
}
select {
position:relative;
padding-right: 20px !important;
-webkit-appearance:none;
-moz-appearance: none;
margin:0;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: ~"calc(100% - 8px)";
position: relative;
padding-right: 20px !important;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: ~"calc(100% - 8px)";
}
select:active {
background: #ffffff url(../images/arrow_up.svg) no-repeat center right;