From 4b92ddf35f3c409378772d1b3a892c056c4703d6 Mon Sep 17 00:00:00 2001 From: Robert von Burg Date: Fri, 10 Mar 2017 08:25:02 +0100 Subject: [PATCH] [New] Changes to table layouting, made g-m* and g-p* !important --- bower.json | 2 +- strolch-wc-styles.html | 190 ++++++++++++++++++++++------------------- 2 files changed, 101 insertions(+), 91 deletions(-) diff --git a/bower.json b/bower.json index e496f2d..1e37684 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "strolch-wc-styles", "description": "Strolch WebComponent Styles", - "version": "0.1.4", + "version": "0.1.5", "authors": "Robert von Burg", "keywords": [ "strolch", diff --git a/strolch-wc-styles.html b/strolch-wc-styles.html index 60434ff..cd2c143 100644 --- a/strolch-wc-styles.html +++ b/strolch-wc-styles.html @@ -30,12 +30,47 @@ padding: 0 0 0.5em 0; } + /* + * Alignment + */ + .g-middle { + vertical-align: middle; + } + + .g-center { + text-align: center; + } + + .g-right { + text-align: right; + } + + .g-left { + text-align: left; + } + + .g-pull-right { + float: right; + } + + .g-pull-left { + float: left; + } + + .g-auto-center { + margin-left: auto !important; + margin-right: auto !important; + } + /* * Tables */ .g-table { text-align: left; border-collapse: collapse !important; + table-layout: fixed; + width: calc(100% - 2 * 1.2em); + margin: 1.2em 1.2em 1rem; } .g-table td, @@ -43,12 +78,6 @@ background-color: #fff !important; } - .g-table { - width: 100%; - max-width: 100%; - margin-bottom: 1rem; - } - .g-table th, .g-table td { padding: 0.5rem; @@ -65,8 +94,21 @@ border-top: 2px solid #eceeef; } - .g-table .g-table { - background-color: #fff; + .g-table.g-table-middle td { + vertical-align: middle; + } + + .g-table.g-table-no-border td, + .g-table.g-table-no-border tbody + tbody { + border-top: none; + } + + .g-table.g-table-no-border th { + border-bottom: none; + } + + .g-table.g-table-small { + width: inherit; } /* @@ -189,238 +231,206 @@ * margins */ .g-m-0 { - margin: 0.0em; + margin: 0.0em !important; } .g-m-1 { - margin: 0.2em; + margin: 0.2em !important; } .g-m-2 { - margin: 0.4em; + margin: 0.4em !important; } .g-m-3 { - margin: 0.8em; + margin: 0.8em !important; } .g-m-4 { - margin: 1.2em; + margin: 1.2em !important; } .g-ml-0 { - margin-left: 0.0em; + margin-left: 0.0em !important; } .g-ml-1 { - margin-left: 0.2em; + margin-left: 0.2em !important; } .g-ml-2 { - margin-left: 0.4em; + margin-left: 0.4em !important; } .g-ml-3 { - margin-left: 0.8em; + margin-left: 0.8em !important; } .g-ml-4 { - margin-left: 1.2em; + margin-left: 1.2em !important; } .g-mr-0 { - margin-right: 0.0em; + margin-right: 0.0em !important; } .g-mr-1 { - margin-right: 0.2em; + margin-right: 0.2em !important; } .g-mr-2 { - margin-right: 0.4em; + margin-right: 0.4em !important; } .g-mr-3 { - margin-right: 0.8em; + margin-right: 0.8em !important; } .g-mr-4 { - margin-right: 1.2em; + margin-right: 1.2em !important; } .g-mt-0 { - margin-top: 0.0em; + margin-top: 0.0em !important; } .g-mt-1 { - margin-top: 0.2em; + margin-top: 0.2em !important; } .g-mt-2 { - margin-top: 0.4em; + margin-top: 0.4em !important; } .g-mt-3 { - margin-top: 0.8em; + margin-top: 0.8em !important; } .g-mt-4 { - margin-top: 1.2em; + margin-top: 1.2em !important; } .g-mb-0 { - margin-bottom: 0.0em; + margin-bottom: 0.0em !important; } .g-mb-1 { - margin-bottom: 0.2em; + margin-bottom: 0.2em !important; } .g-mb-2 { - margin-bottom: 0.4em; + margin-bottom: 0.4em !important; } .g-mb-3 { - margin-bottom: 0.8em; + margin-bottom: 0.8em !important; } .g-mb-4 { - margin-bottom: 1.2em; + margin-bottom: 1.2em !important; } /* * padding */ .g-p-0 { - padding: 0.0em; + padding: 0.0em !important; } .g-p-1 { - padding: 0.2em; + padding: 0.2em !important; } .g-p-2 { - padding: 0.4em; + padding: 0.4em !important; } .g-p-3 { - padding: 0.8em; + padding: 0.8em !important; } .g-p-4 { - padding: 1.2em; + padding: 1.2em !important; } .g-pl-0 { - padding-left: 0.0em; + padding-left: 0.0em !important; } .g-pl-1 { - padding-left: 0.2em; + padding-left: 0.2em !important; } .g-pl-2 { - padding-left: 0.4em; + padding-left: 0.4em !important; } .g-pl-3 { - padding-left: 0.8em; + padding-left: 0.8em !important; } .g-pl-4 { - padding-left: 1.2em; + padding-left: 1.2em !important; } .g-pr-0 { - padding-right: 0.0em; + padding-right: 0.0em !important; } .g-pr-1 { - padding-right: 0.2em; + padding-right: 0.2em !important; } .g-pr-2 { - padding-right: 0.4em; + padding-right: 0.4em !important; } .g-pr-3 { - padding-right: 0.8em; + padding-right: 0.8em !important; } .g-pr-4 { - padding-right: 1.2em; + padding-right: 1.2em !important; } .g-pt-0 { - padding-top: 0.0em; + padding-top: 0.0em !important; } .g-pt-1 { - padding-top: 0.2em; + padding-top: 0.2em !important; } .g-pt-2 { - padding-top: 0.4em; + padding-top: 0.4em !important; } .g-pt-3 { - padding-top: 0.8em; + padding-top: 0.8em !important; } .g-pt-4 { - padding-top: 1.2em; + padding-top: 1.2em !important; } .g-pb-0 { - padding-bottom: 0.0em; + padding-bottom: 0.0em !important; } .g-pb-1 { - padding-bottom: 0.2em; + padding-bottom: 0.2em !important; } .g-pb-2 { - padding-bottom: 0.4em; + padding-bottom: 0.4em !important; } .g-pb-3 { - padding-bottom: 0.8em; + padding-bottom: 0.8em !important; } .g-pb-4 { - padding-bottom: 1.2em; - } - - /* - * Alignment - */ - .g-middle { - vertical-align: middle; - } - - .g-center { - text-align: center; - } - - .g-right { - text-align: right; - } - - .g-left { - text-align: left; - } - - .g-pull-right { - float: right; - } - - .g-pull-left { - float: left; - } - - .g-auto-center { - margin-left: auto; - margin-right: auto; + padding-bottom: 1.2em !important; } \ No newline at end of file