Strolch
/
strolch-wc-styles
mirror of https://github.com/strolch-li/strolch-wc-styles.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Project] Initial Commit

This commit is contained in:
Robert von Burg 2017-02-07 10:00:16 +01:00
parent 55424cf1e5
commit a91d0ce783
3 changed files with 376 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
# Created by .ignore support plugin (hsz.mobi) # Created by .ignore support plugin (hsz.mobi)
.idea/ .idea/
bower_components/

74
demo/index.html Normal file
View File

@ -0,0 +1,74 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>strolch-wc-styles demo</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../strolch-wc-styles.html">
</head>
<style is="strolch-wc-styles">
</style>
<body unresolved>
<div class="g-container">
<div class="g-row">
<div class="g-12 g-center">
<h1>strolch-wc-styles demo</h1>
</div>
</div>
<div class="g-row">
<div class="g-offset-1 g-1 g-center">
<h1>some text</h1>
</div>
<div class="g-offset-1 g-1 g-center">
<h1>some text</h1>
</div>
<div class="g-offset-1 g-1 g-center">
<h1>some text</h1>
</div>
<div class="g-offset-1 g-1 g-center">
<h1>some text</h1>
</div>
<div class="g-offset-1 g-1 g-center">
<h1>some text</h1>
</div>
<div class="g-offset-1 g-1 g-center">
<h1>some text</h1>
</div>
</div>
<div class="g-row">
<div class="g-offset-3 g-3 g-center">
<h1>strolch-wc-styles demo</h1>
</div>
<div class="g-offset-3 g-3 g-center">
<h1>strolch-wc-styles demo</h1>
</div>
</div>
<div class="g-row">
<div class="g-6 g-center">
<h1>strolch-wc-styles demo</h1>
</div>
<div class="g-6 g-center">
<h1>strolch-wc-styles demo</h1>
</div>
</div>
<div class="g-row">
<div class="g-12">
<section class="g-card g-m-4 g-p-4">
Hello World
</section>
</div>
</div>
</div>
</body>
</html>

393
strolch-wc-styles.html
View File

@ -1,118 +1,327 @@
<!-- shared-styles.html --> <link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="strolch-wc-styles">
<template>
<style>
h1, h2, h3, h4, h5, h6 { <style is="strolch-wc-styles">
color: #f66f79;
}
a, a:hover, a:focus, a:active { .g-card {
text-decoration: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
color: inherit; 0 1px 5px 0 rgba(0, 0, 0, 0.12),
} 0 3px 1px -2px rgba(0, 0, 0, 0.2);
p { border-radius: 2px;
margin: 1.0em; }
}
.card { /*
background-color: white; * Grid
margin: 0.3em; */
padding: 0.7em; .g-container {
} display: block;
width: 100%;
}
p { .g-row {
margin-left: 0; display: flex;
} }
.size32 { .g-1 {
width: 32px; width: 8.3333333%;
height: 32px; max-width: 8.3333333%;
} }
.minWidth32 { .g-2 {
min-width: 32px; width: 16.666666667%;
} max-width: 16.666666667%;
}
.light-icon { .g-3 {
width: 18px; width: 25%;
height:18px; max-width: 25%;
color: darkgray; }
}
/* .g-4 {
* Table width: 33.333333333%;
*/ max-width: 33.333333333%;
.t-container { }
display: table;
}
.t-row { .g-5 {
display: table-row; width: 41.666666667%;
} max-width: 41.666666667%;
}
.t-cell { .g-6 {
display: table-cell; width: 50%;
} max-width: 50%;
}
.t-100 { .g-7 {
width: 100%; width: 58.3333333%;
} max-width: 58.3333333%;
}
.t-80 { .g-8 {
width: 80%; width: 66.666666667%;
} max-width: 66.666666667%;
}
.t-50 { .g-9 {
width: 50%; width: 75%;
} max-width: 75%;
}
.t-60 { .g-10 {
width: 60%; width: 83.333333333%;
} max-width: 83.333333333%;
}
.t-40 { .g-11 {
width: 40%; width: 91.666666667%;
} max-width: 91.666666667%;
}
.t-20 { .g-12 {
width: 20%; width: 100%;
} max-width: 100%;
}
.t-14 { .g-offset-1 {
width: 14%; margin-left: 8.3333333%;
} }
.t-middle { .g-offset-2 {
vertical-align: middle; margin-left: 16.666666667%;
} }
.t-center { .g-offset-3 {
text-align: center; margin-left: 25%;
} }
.t-right { .g-offset-4 {
text-align: right; margin-left: 33.333333333%;
} }
.t-left { .g-offset-5 {
text-align: left; margin-left: 41.666666667%;
} }
.t-pull-right { .g-offset-6 {
float: right; margin-left: 50%;
} }
.t-pull-left { .g-offset-7 {
float: left; margin-left: 58.3333333%;
} }
.t-auto-center { .g-offset-8 {
margin-left: auto; margin-left: 66.666666667%;
margin-right: auto; }
}
</style> .g-offset-9 {
</template> margin-left: 75%;
</dom-module> }
.g-offset-10 {
margin-left: 83.333333333%;
}
.g-offset-11 {
margin-left: 91.666666667%;
}
/*
* margins
*/
.g-m-1 {
margin: 0.1em;
}
.g-m-2 {
margin: 0.2em;
}
.g-m-3 {
margin: 0.3em;
}
.g-m-4 {
margin: 0.4em;
}
.g-ml-1 {
margin-left: 0.1em;
}
.g-ml-2 {
margin-left: 0.2em;
}
.g-ml-3 {
margin-left: 0.3em;
}
.g-ml-4 {
margin-left: 0.4em;
}
.g-mr-1 {
margin-right: 0.1em;
}
.g-mr-2 {
margin-right: 0.2em;
}
.g-mr-3 {
margin-right: 0.3em;
}
.g-mr-4 {
margin-right: 0.4em;
}
.g-mt-1 {
margin-top: 0.1em;
}
.g-mt-2 {
margin-top: 0.2em;
}
.g-mt-3 {
margin-top: 0.3em;
}
.g-mt-4 {
margin-top: 0.4em;
}
.g-mb-1 {
margin-bottom: 0.1em;
}
.g-mb-2 {
margin-bottom: 0.2em;
}
.g-mb-3 {
margin-bottom: 0.3em;
}
.g-mb-4 {
margin-bottom: 0.4em;
}
/*
* padding
*/
.g-p-1 {
padding: 0.1em;
}
.g-p-2 {
padding: 0.2em;
}
.g-p-3 {
padding: 0.3em;
}
.g-p-4 {
padding: 0.4em;
}
.g-pl-1 {
padding-left: 0.1em;
}
.g-pl-2 {
padding-left: 0.2em;
}
.g-pl-3 {
padding-left: 0.3em;
}
.g-pl-4 {
padding-left: 0.4em;
}
.g-pr-1 {
padding-right: 0.1em;
}
.g-pr-2 {
padding-right: 0.2em;
}
.g-pr-3 {
padding-right: 0.3em;
}
.g-pr-4 {
padding-right: 0.4em;
}
.g-pt-1 {
padding-top: 0.1em;
}
.g-pt-2 {
padding-top: 0.2em;
}
.g-pt-3 {
padding-top: 0.3em;
}
.g-pt-4 {
padding-top: 0.4em;
}
.g-pb-1 {
padding-bottom: 0.1em;
}
.g-pb-2 {
padding-bottom: 0.2em;
}
.g-pb-3 {
padding-bottom: 0.3em;
}
.g-pb-4 {
padding-bottom: 0.4em;
}
/*
* 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;
}
</style>