From f1ac80e9d2cf6050e743dfa10ea822b8712de7d1 Mon Sep 17 00:00:00 2001
From: Peter Feij <peter.feij@aareon.nl>
Date: Thu, 26 Nov 2015 20:04:35 +0000
Subject: [PATCH] FSN#34307 type button, veel restyling, inputs/selects etc
 even breed, buttons groter enfin: weer even wat moderner

svn path=/Website/trunk/; revision=27147
---
 APPL/Shared/default.csx | 192 +++++++++++++++++++++-------------------
 APPL/Shared/iface.inc   |   1 +
 2 files changed, 103 insertions(+), 90 deletions(-)

diff --git a/APPL/Shared/default.csx b/APPL/Shared/default.csx
index 91e9bf7c76..e7c22f9621 100644
--- a/APPL/Shared/default.csx
+++ b/APPL/Shared/default.csx
@@ -98,10 +98,10 @@ th {
 }
 #logintable #buttons ul li,
 #logintable #buttons ul li a {
-    border-radius:4px;
+    border-radius: 4px;
     font-weight: 500;
     font-size: 13px;
-    margin-left:0px;
+    margin-left: 0px;
     padding: 6px 10px 7px 11px;
     border: 0px;
 }
@@ -174,7 +174,8 @@ input, textarea, select {
   font-size: 1em;
   padding: 2px 2px 2px 2px;
   margin: 0;
-  border:1px solid #ccc;
+  border: 1px solid #ccc;
+  border-radius: 2px;
   background-color: #FFFDF6;
 }
 td, th {
@@ -185,7 +186,16 @@ td, th {
   vertical-align: top;
   font-weight: normal;
 }
-
+/* Safari is ugly, dan maar zo voor iedereen */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url(../appl/pictures/togglerdown.png) ;
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+}
+select::-ms-expand { display: none;}
 input[type=text], select {
   background-color: #FFFDF6;
 }
@@ -230,12 +240,6 @@ input[readonly]:hover, select[readonly]:hover, textarea[readonly]:hover {
   background-color: ==backgroundcolor==;
 }
 
-/* de roomselector is een readonly input */
-#sel_room {
-  border:0px solid #ccc;
-  min-width: 202px;
-  font-weight: normal;
-}
 /* label tag =  de tekst */
 label {
   color: #444;
@@ -345,9 +349,6 @@ th {
     padding-right: 4px;
 }
 #productsearch {
-    text-align: left;
-    border: 1px solid #333;
-    font-weight: bold;
 }
 
 #headerdate {
@@ -595,7 +596,7 @@ div.widget {
     border-radius: 4px;
 }
 body.modal .fcltblock {
-    background-color:#F1F1F1;
+    background-color: ==backgroundcolor==;
     border:1px solid #eee;
 }
 
@@ -914,7 +915,6 @@ padding-right: 15px!important;
 #buttons {
     float:right;
     text-align:right;
-    margin-right:10px;
     margin-left:5px;
     margin-bottom:5px;
     margin-top:0px;
@@ -940,6 +940,8 @@ padding-right: 15px!important;
 #buttons ul li,
 #buttons ul li a,
 .mv,
+input[type=button],
+input[type=text].button,
 input.button,
 span.button {
     cursor: pointer;
@@ -947,13 +949,15 @@ span.button {
     color: ==buttoncolor==;
     background-color:==buttonbackgroundcolor==;
     text-align: center;
-    border-radius:4px;
+    border-radius: 2px;
     font-size: 13px;
     font-weight: normal;
     margin: 1px;
     border: 0px;
 }
 input.button:hover,
+input[type=button]:hover,
+input[type=text].button:hover,
 span.button:hover {
     color: ==buttonhovercolor==;
     background-color:==buttonhoverbackgroundcolor==;
@@ -1145,12 +1149,12 @@ label.cadselect:hover,
     width: 16px;
     height: 16px;
     background-image: url(../appl/pictures/fileopen.png);
+    background-repeat: no-repeat;
+    background-color: transparent !important;
 }
 .bijlage, .bijlage1, .materiaal {
     background-repeat: no-repeat;
     background-position: 6px;
-    padding: 4px 0 4px 25px;
-    width: 140px;
     text-align: left;
 }
 .bijlage1 {
@@ -1177,7 +1181,10 @@ label.cadselect:hover,
     background-repeat: no-repeat;
     background-position: 6px;
 }
-
+.fldr_objs{
+    background: none;
+    border: 0;
+}
 .frametab {
     width: 100%;
     padding: 0px!important;
@@ -1278,12 +1285,12 @@ td.rsfooter
 /* Voor fin facturen */
 .withinmargin td {
   background: linear-gradient(to bottom, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0) 80%); /*#C6EFCE*/
-  background-color: #C6EFCE;
+  background-color: #C6EFCE\9;
   color: #006100;
 }
 .outsidemargin td {
-  background: linear-gradient(to bottom, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0) 80%); /*#FFC7CE*/
-  background-color: #FFC7CE;
+  background: linear-gradient(to top, rgba(255, 199, 207, 0.6), rgba(255, 199, 207, 0.5) 50%); /*#FFC7CE*/
+  background-color: #FFC7CE\9; /* IE 8 and below */
   color: #9C0006;
 }
 tr.rejected td {
@@ -1394,12 +1401,12 @@ span.expired2 {
 .cntrappel td, .expired1 td {
   background: -webkit-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 80%); /* For Safari 5.1 to 6.0 */
   background: -moz-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 80%); /* For Firefox 3.6 to 15 */
-  background: linear-gradient(to bottom, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 50%); /* Standard syntax */
+  background: linear-gradient(to top, rgba(255, 254, 156, 0.6), rgba(255, 254, 156, 0.4) 50%); /* Standard syntax */
   background-color: #FFEB9C\9; /* IE 8 and below */
   color: #9C6500;
 }
 .cntopzeg td, .expired2 td {
-  background: linear-gradient(to bottom, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.4) 50%); /*#FFC7CE*/
+  background: linear-gradient(to top, rgba(255, 199, 207, 0.6), rgba(255, 199, 207, 0.5) 50%); /*#FFC7CE*/
   background-color: #FFC7CE\9; /* IE 8 and below */
   color: #9C0006;
 }
@@ -1573,13 +1580,12 @@ border-color: #ddd;
 #ph_gotoFgraph { text-decoration: underline; cursor: pointer; background-color: transparent; }
 
 /* pas op: option's css kent alleen background-color by IE */
-/* IE6 wil ze apart hebben */
-* html .required, .required, .required:focus, input.required
-{
-    background-color: rgba(252, 247, 222, 0.7);
-    background-color: #fcf7de\9; /* IE8 */
-    border-left:2px solid #ee5f5b;
-}
+
+/* field colors for required fields */
+* html .required,
+.required,
+.required:focus,
+input.required,
 input[type=text].required,
 input[type=password].required,
 select.required, option.required,
@@ -1587,38 +1593,29 @@ textarea.required
 {
     background-color: rgba(252, 247, 222, 0.7);
     background-color: #fcf7de\9;  /* IE8 */
-    border-left:2px solid #ee5f5b;
+    border: 1px solid ==labelbackgroundcolor==;
 }
-input[type=button].required
+/* but maintain the button properties even if required */
+input[type=button].required, input[type=text].button.required
 {
-    color: ==buttoncolor==;
     background-color:==buttonbackgroundcolor==;
-    border-left:2px solid #ee5f5b;
+    border: 1px solid ==labelbackgroundcolor==;
 }
-
-input[type=button].required:hover
+input[type=button].required:hover, input[type=text].button.required:hover
 {
     color: ==buttonhovercolor==;
     background-color:==buttonhoverbackgroundcolor==;
 }
 
-/* IE6 wil ze apart hebben */
-* html .missing, missing {
-    background-color:#ff5050;
-}
-
+* html .missing,
+missing,
 input[type=text].required.missing,
 input[type=password].required.missing,
 select.required.missing, option.required.missing,
 textarea.required.missing,
 .required.missing {
-    background-color:#ff5050;
-}
-
-input[type=text].button.required
-{
-    background-color:==buttonbackgroundcolor==;
-    border-left:2px solid #ee5f5b;
+    background-color: #ff5050;
+    color: #fff;
 }
 
 input.number.bad, input.float.bad, input.currency.bad, input.flddate.bad, input.fldtime.bad,input.fldflexC.bad,input.fldflexC50.bad   {
@@ -2061,7 +2058,7 @@ select.flddienstfilt { /* de filter van diensten in mldopdr*/
 
 .fldnotresponsive {width: 218px !important;}
 table#vis_tab .fldflexC {width: 218px !important;}
-table#vis_tab .suggest {width: 218px !important;}
+table#vis_tab .suggest, table#vis_tab .suggestBusy{width: 218px !important;}
 
 .fld, .fldkp,
 .fldreg, .flddis, .fldloc, .fldbld, .fldflr, .fldroom, .fldworklocation, .fldwpl, .fldpers, .fldcontactpers, .flduitvoerende,
@@ -2069,12 +2066,12 @@ table#vis_tab .suggest {width: 218px !important;}
 .fldcontract, .fldcntnr, .fldorderby, .fldname,
 .fldoms, .fldr_objs,
 .fldsrtgroup, .fldsrtdeel, .fldsrtdeelmulti, .flditem, .fldsupplier, .fldgroupbysec, .fldordernum,
-.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresroom, .fldresdesc,
-.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldprio, .fldsrt,
+.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresdesc,
+.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldsrt,
 .fldnewvalue, .fldmldobjs, .flddebtor, .fldfintype, .fldfinstatus, .fldreferentie, .fldfinboekm, .fldfincostsrt,
-.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, .flddeliveryAddr, #flddelivery_place,
-.fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldmld_adrkey, .fldfac_prkey, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
-.fldkpn_module, .fldkpn_grpkey, .fldmld_adrlkey, .fldmld_adrfkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
+.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, #flddelivery_place,
+.fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldfac_prkey, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
+.fldkpn_module, .fldkpn_grpkey, .fldmld_adrkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
 .fldmgroep, .fldmmodule, .fldprs_dnstkey, .fldprs_bdrkey, .fldlocs, .fldblds, .fldgroup,
 .fldscenario, .fldmoverequest, .fldprjstatus, .flddaydate, .fldactivity, .fldplace, .fldstopplace, .fldprincipal, .fldcategorie, .fldonderwerp,
 .fldsel_controlemode, .fldsel_srtcontrole, .fldartgroep, .fldbesitem, .fldmailto, .fldusrtabkey, .fldmodule, .fldfac_name, .fldfac_path, .fldfac_query,
@@ -2086,12 +2083,12 @@ table#vis_tab .suggest {width: 218px !important;}
 /* ouderwetse listboxes */
 select, .fldbedrijf, .fldfunc, .fldact, .fldsortout,  .fldgroupby, .fldbdr_key, .fldopstel, .fldsel_activity,
 select.flddienst, select.fldcontract, .fldt_opdr, .fldaltgroep, .fldaltfunctie, .fldBES_srtgroup,
-select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
+select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup, .fldprio, .flddeliveryAddr, .fldmld_adrlkey, .fldmld_adrfkey
 {
-  width: 222px;
+  width: 224px;
 }
 .suggest {
-  background-position: right center;
+  background-position: right 4px center;
 }
 .fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
 .fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
@@ -2100,7 +2097,13 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
 }
 .fldflexR, .fldSflexR
 {
-  width: 222px;
+  width: 224px;
+}
+input.button {
+  width: 206px;
+}
+.fldresroom {
+  width: 204px !important;
 }
 
 @media all and (min-width: 60em) {
@@ -2110,12 +2113,12 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
     .fldcontract, .fldcntnr, .fldorderby, .fldname,
     .fldoms, .fldr_objs,
     .fldsrtgroup, .fldsrtdeel, .fldsrtdeelmulti, .flditem, .fldsupplier, .fldgroupbysec, .fldordernum,
-    .mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresroom, .fldresdesc,
-    .fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldprio, .fldsrt,
+    .mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresdesc,
+    .fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldsrt,
     .fldnewvalue, .fldmldobjs, .flddebtor, .fldfintype, .fldfinstatus, .fldreferentie, .fldfinboekm, .fldfincostsrt,
-    .fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, .flddeliveryAddr, #flddelivery_place,
+    .fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, #flddelivery_place,
     .fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldmld_adrkey, .fldfac_prkey, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
-    .fldkpn_module, .fldkpn_grpkey, .fldmld_adrlkey, .fldmld_adrfkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
+    .fldkpn_module, .fldkpn_grpkey, .fldmld_adrkey, .fldmld_adrfkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
     .fldmgroep, .fldmmodule, .fldprs_dnstkey, .fldprs_bdrkey, .fldlocs, .fldblds, .fldgroup,
     .fldscenario, .fldmoverequest, .fldprjstatus, .flddaydate, .fldactivity, .fldplace, .fldstopplace, .fldprincipal, .fldcategorie, .fldonderwerp,
     .fldsel_controlemode, .fldsel_srtcontrole, .fldartgroep, .fldbesitem, .fldmailto, .fldusrtabkey, .fldmodule, .fldfac_name, .fldfac_path, .fldfac_query,
@@ -2127,9 +2130,9 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
     /* ouderwetse listboxes */
     select, .fldbedrijf, .fldfunc, .fldact, .fldsortout,  .fldgroupby, .fldbdr_key, .fldopstel, .fldsel_activity,
     select.flddienst, select.fldcontract, .fldt_opdr, .fldaltgroep, .fldaltfunctie, .fldBES_srtgroup,
-    select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
+    select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup, .fldprio, .flddeliveryAddr, .fldmld_adrlkey, .fldmld_adrfkey
     {
-      width: 344px;
+      width: 346px;
     }
     .fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
     .fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
@@ -2138,7 +2141,13 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
     }
     .fldflexR, .fldSflexR
     {
-      width: 344px;
+      width: 346px;
+    }
+    input.button {
+      width: 346px;
+    }
+    .fldresroom {
+        width: 326px !important;
     }
 }
 /* In mobile popup, vooralsnog iets korter voor iPhone */
@@ -2189,11 +2198,6 @@ select.fldimport_app_key, .fldfinomsch, .flduitvExist
 }
 
 .fldmldnum, .fldopdrnum, .fldresnum, .flddeel, .fldrfonum, .fldordernum, .fldopdrnr, .fldcntnum, .fldfinnum {
-  color: black;
-  font-weight: bold;
-  text-align: left;
-}
-.fldmldnum, .fldopdrnum, .fldresnum, .fldrfonum, .fldordernum, .fldopdrnr, .fldfinnum {
   width: 124px;
 }
 
@@ -2218,8 +2222,11 @@ select.fldimport_app_key, .fldfinomsch, .flduitvExist
 .fldbescnt {
   width: 32px;
 }
-
-.fldresroomedit { text-decoration: underline; cursor: pointer; background-color: transparent; }
+/* compensate for readonly input props */
+.fldresroomedit {
+  filter: alpha(opacity=100) !important;
+  opacity: 1.0 !important;
+}
 
 .fldtxt, .fldomschr, .fldremark, .fldresroomchange, .flddatechange, .fldcntperiod {
   width: 99.3%;
@@ -2324,14 +2331,14 @@ tr.flexcollapsable td {
 }
 
 .flexcollapsable .lhint {
-  background-image: url(../appl/Pictures/up.png);
+  background-image: url(../appl/pictures/up.png);
   background-repeat: no-repeat;
   background-position: right 7px;
   padding-right: 22px;
 }
 
 .flexcollapsed .lhint {
-  background-image: url(../appl/Pictures/down.png);
+  background-image: url(../appl/pictures/down.png);
   background-repeat: no-repeat;
   background-position: right 5px;
 }
@@ -2346,7 +2353,7 @@ input[readonly].fldflexD {
     width: 100px;
 }
 .fldflexF.missing, .fldflexE.missing {
-    color: red;
+    color: #ff5050;
 }
 .fldflexR.inactive, .fldflexS.inactive {
     color: #FF4301;
@@ -2412,6 +2419,8 @@ body.likemodal {
 #mod_beslever {width:800px;}
 #mod_besretour {width:600px;}
 #mod_besweging {width:500px;}
+#mod_cntsplit {width:450px;}
+#mod_cntsplit .label {width: 180px;}
 #mod_req_move {width:500px;}
 #mod_req_move2 {width:500px;}
 #mod_req_move3 {width:500px;}
@@ -2904,6 +2913,12 @@ input.suggest::-ms-clear
   height: 0;
 }
 
+input.suggestBusy::-ms-clear
+{
+  width : 0;
+  height: 0;
+}
+
 .fatal {
   background-color: red;
   color: yellow;
@@ -3425,13 +3440,13 @@ table.filter p { margin: 0px; }
 
 /* experimentje. is dit leuk? */
 input, textarea, select {
-    outline:none;
-    border-radius:2px;
+    outline: none;
+    border-radius: 0px;
 }
 
 input:focus, textarea:focus, select:focus {
     box-shadow: 0 0 0px #888;
-    border:1px solid #888;
+    border: 1px solid #888;
 }
 input[type=radio]:focus,
 input[type=checkbox]:focus {
@@ -3572,7 +3587,6 @@ body.floorscreen3d {
     width:150px;
 }
 
-
 #scfcolpicker td:hover {
    cursor: move;
 }
@@ -3583,26 +3597,24 @@ body.floorscreen3d {
 
 #buttons ul li.hasIcon,
 #buttons ul li.hasIcon a {
-    padding: 7px 10px 2px 11px;
-    border-radius:10px!important;
+   padding: 9px 10px 5px 12px;  /* is vierkant weer bon-ton? */
+   border-radius: 2px!important;
 }
 
-.ui-widget-content{border:0px;}
+.ui-widget-content{
+   border:0px;
+}
 
 li.hiddenbutton {
-padding: 0px 0px 0px 0px!important;
+   padding: 0px 0px 0px 0px!important;
 }
 
 .ui-widget {
-font-family: ==fontfamily==;
-}
-
-.bijlage {
-border: 0px;
+   font-family: ==fontfamily==;
 }
 
 #prodsearchsearch {
-    border: 0px;
+   border: 0px;
 }
 
 #showlink {
diff --git a/APPL/Shared/iface.inc b/APPL/Shared/iface.inc
index 92d3726c22..b996a663b5 100644
--- a/APPL/Shared/iface.inc
+++ b/APPL/Shared/iface.inc
@@ -308,6 +308,7 @@ function RWFIELD(pname, pclass, plabel, pvalue, params)
     case "float" :       lclass += " float"; break;
     case "currency" :    lclass += " currency"; lstep= " step='0.01'"; break;
     case "text" :        inputtype = " type='text'"; break;
+    case "button" :      inputtype = " type='button'"; break;
     default :            inputtype = ""; break;
   }
 %>