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

admin/templates/default/mailaccount.xet

@@ -77,11 +77,11 @@
 				<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"/>
+                        <select class="emailadmin_ssl" id="acc_imap_ssl" needed="1"
+                                onchange="app.admin.wizard_imap_ssl_onchange"/>
                     </hbox>
-					<description/>
-					<description/>
+                    <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">
@@ -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">
@@ -337,11 +337,12 @@
 				</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"/>
+                    <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>
-					<description/>
                 </row>
 				<row>
 					<tabbox id="tabs" span="all" tab_height="420">

api/js/etemplate/Et2Select/Et2Select.ts

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

api/templates/default/etemplate2.css

@@ -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 {

pixelegg/css/mobile.css

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

pixelegg/css/monochrome.css

@@ -3078,7 +3078,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);
 }

pixelegg/css/pixelegg.css

@@ -182,18 +182,14 @@
         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
    */
@@ -3087,7 +3083,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);
 }

pixelegg/less/etemplate2.less

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

pixelegg/less/layout_content_elements.less

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