Changeset 616 for trunk/css

Timestamp:

Nov 11, 2017 1:12:58 PM (7 years ago)

Author:

anonymous

Message:

Convert font-size percentages to rem. Fix form input widths and padding.

Location:

trunk/css

Files:

• admin2.inc.css (modified) (13 diffs)
• utilities.inc.css (modified) (2 diffs)

trunk/css/admin2.inc.css

@@ -37 +37 @@
 .sc-help,
 .commandtext,
-.commanditem { font-size: 70%; }
+.commanditem { font-size: 0.7rem; }
 
 /* For fv err applied to tds. */
@@ -87 +87 @@
     margin: 0;
     padding: 0;
-    font-size: 150%;
+    font-size: 1.5rem;
     color: #000;
 }
@@ -113 +113 @@
     margin-left: 0em;
     padding: 1px 0 2px 6px;
-    font-size: 70%;
+    font-size: 0.7rem;
     font-weight: bold;
 }
@@ -125 +125 @@
     color: #999;
     padding-top: 15px;
-    font-size: 90%;
+    font-size: 0.9rem;
     font-weight: bold;
 }
@@ -159 +159 @@
     margin: 0 0 .5em 0;
 }
-#content h1 { font-size: 130%; }
-#content h2 { font-size: 110%; }
-#content h3 { font-size: 90%; }
-#content h4 { font-size: 75%; }
+#content h1 { font-size: 1.3rem; }
+#content h2 { font-size: 1.1rem; }
+#content h3 { font-size: 0.9rem; }
+#content h4 { font-size: 0.75rem; }
 
 #content p {
     margin: 0 0 .5em 0;
-    font-size: 70%;
+    font-size: 0.7rem;
     line-height: 130%;
 }
@@ -172 +172 @@
 #content li {
     margin: 0 0 0 0;
-    font-size: 70%;
+    font-size: 0.7rem;
     line-height: 100%;
 }
@@ -204 +204 @@
 table.list th {
     padding: 0 6px 1px 2px;
-    font-size: 70%;
+    font-size: 0.7rem;
     border-top: 2px solid #eee;
     border-bottom: 2px solid #eee;
@@ -212 +212 @@
 
 table.list td, #commandbox table td, .commandbox table td {
-    font-size: 70%;
+    font-size: 0.7rem;
     padding: 2px 6px 2px 2px;
     border-bottom: 1px dotted #ccc;
@@ -273 +273 @@
     background-color: #DDD;
     border-top: 1px solid gray;
-    font-size: 70%;
+    font-size: 0.7rem;
     line-height: 100%;
 }
@@ -326 +326 @@
 select {
     border: 1px solid #ccc;
-    padding: 2px;
+    margin: 0 0.5rem 0 0;
+    padding: 2px 0.25rem;
+    box-sizing: border-box;
 }
 label.sc-full {
@@ -337 +339 @@
 
 .sc-form-row label {
-    font-size: 70%;
+    font-size: 0.7rem;
     padding-top: 0.25em;
 }
@@ -363 +365 @@
 }
 
-.sc-form input {
-    padding: 2px;
-}
-
 /*.sc-form-row input + input {
     margin-top: .5rem;
@@ -387 +385 @@
 }
 
-input.sc-medium,
-textarea.sc-medium,
-select.sc-medium,
-label.sc-medium {
-/* WFT? */
-/*    width: 21.25rem;*/
-}
-
 label.sc-radio-label {
     width: auto;

trunk/css/utilities.inc.css

@@ -10 +10 @@
 /*_____________________ FORMS ____________________*/
 
+input.sc-micro, textarea.sc-micro, select.sc-micro,
 input.sc-tiny, textarea.sc-tiny, select.sc-tiny,
 input.sc-small, textarea.sc-small, select.sc-small,
@@ -16 +17 @@
 input.sc-full, textarea.sc-full, select.sc-full {
     margin: 0 0.5rem 0 0;
-    padding: 3px 0.25rem;
+    padding: 2px 0.25rem;
     border-width: 1px;
+    box-sizing: border-box;
 }
 
 /*
-The following widths are calculated using `width = (maxwidth - (1.2 * multiple)) / multiple`
+The following widths are calculated to include a small right-margin and be equally divisible so the right edges align.
+The formula is `width = (maxwidth - (rightmargin * multiple)) / multiple`
 where width is the sought value, maxwidth is the width of a sc-large, and multiple is the number
-of times an element fits within maxwidth (i.e. sc-tiny has a multiple of 8).
+of times an element fits within maxwidth (i.e. sc-micro has a multiple of 16).
 The values are dependent on the margin, padding, and border set above.
+(44-(0.5*1))/1 = 43.5
+(44-(0.5*2))/2 = 21.5
+(44-(0.5*4))/4 = 10.5
+(44-(0.5*8))/8 = 5
+(44-(0.5*8))/16 = 2.5
+Note: avoid adding whitespace between input elements, or add `display: flex;` to the inputs' parent.
 */
-input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro      { width: 1.55rem; }
-input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { width: 4.54rem; }
-input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { width: 10.15rem; }
-input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { width: 21.42rem; }
-input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { width: 44rem; }
+input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro      { width: 2.5rem; }
+input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { width: 5rem; }
+input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { width: 10.5rem; }
+input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { width: 21.5rem; }
+input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { width: 43.5rem; }
 input.sc-full, textarea.sc-full, select.sc-full, label.sc-full          { width: 100%; }