diff options
Diffstat (limited to 'demo/index.css')
-rw-r--r-- | demo/index.css | 178 |
1 files changed, 0 insertions, 178 deletions
diff --git a/demo/index.css b/demo/index.css deleted file mode 100644 index ef71773..0000000 --- a/demo/index.css +++ /dev/null @@ -1,178 +0,0 @@ -/* GENERAL */ -body { - margin: 0; - color: #333333; - /*font-family: 'Open Sans Condensed';*/ - font-family: 'Overlock'; - font-size: 16px; - display: flex; - flex-wrap: wrap; - height: auto; -} - -h1 { font-size: 1.5em; } -h2 { font-size: 1.3em; } -h3 { font-size: 1.2em; } -h1, h2, h3 { margin: 2em 0 0.5em 0; color: #009fdb; } -p { margin: 6px 0; } - -/* LAYOUT */ -header { - order: 1; - width: 100%; - background-color: #ffffff; -} - -footer { - order: 4; - width: 100%; -} - -#main-navigation { - order: 2; - width: 100%; -} - -#main-content { - order: 3; - width: 100%; -} - -/* HEADER */ -header { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); - height: 50px; - line-height: 50px; - z-index: 9; - display: flex; - flex-direction: row; - padding: 0 1vw; -} - -header .logo { - font-size: 22px; - font-weight: 700; -} - -header .title { - font-size: 20px; - margin-left: 2vw; -} - -/* FOOTER */ -footer { - height: 50px; - line-height: 50px; - z-index: 6; - display: flex; - flex-direction: row; - padding: 0 1vw; - border-top: solid 1px #dddddd; -} - -/* MAIN NAVIGATION */ -#main-navigation { - align-content: stretch; - z-index: 8; - box-shadow: 2px 0 0 0 rgba(68,68,68,0.2); -} - -#main-navigation .title { - font-size: 20px; - font-weight: 700; - background-color: #ffffff; - color: #009fdb; - border-bottom: 1px solid #d2d2d2; - height: 30px; - line-height: 30px; - padding: 0.3em; -} - -#main-navigation ul { - padding: 0; -} - -#main-navigation ul li { - background-color: #f8f8f8; - border-bottom: 1px solid #d2d2d2; - height: 30px; - line-height: 30px; - cursor: pointer; - padding: 0.3em; -} - -#main-navigation ul li.selected { - background-color: #009fdb; - color: #ffffff; -} - -/* MAIN CONTENT */ -#main-content { - -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; /* Firefox, other Gecko */ - box-sizing: border-box; /* Opera/IE 8+ */ - align-content: stretch; - padding: 2vh 2vw; - z-index: 7; -} - -/* RESPONSIVE */ -@media screen and (min-width: 800px) { - #main-navigation { width: 20%; } - #main-content { width: 80%; } -} - -/* OTHERS */ -.component { - background-color: #009fdb; - color: #ffffff; - font-size: 20px; - padding: 0.5em 1em; - margin: 0 0 0.5em 0; -} - -pre { - padding: 1em; - display: block; - margin: 1em 0; - font-family: 'PT Sans Narrow'; - font-size: 1em; -} - -/* SPECIFIC COMPONENT - TILE */ -.sdc-tile-showcase-tiles { - display: flex; - flex-direction: row; -} -.sdc-tile-showcase-tiles > div.sdc-tile-catalog { - margin: 0 5px 5px 5px; -} -.sdc-tile-showcase-tiles > div.sdc-tile-catalog:first-child { margin-left: 0; } -.sdc-tile-showcase-tiles > div.sdc-tile-catalog:last-child { margin-right: 0; } - -/* SPECIFIC COMPONENT - COLORS */ -.sdc-colors-showcase li { - padding: 1vw; - margin: 1vw; -} - -/* SPECIFIC COMPONENTS - BUTTONS */ -.buttons-showcase li { - display: flex; - flex-direction: column; - margin-top: 2vh; -} -.buttons-showcase li pre { - flex-grow: 1; - margin: 1vw 0 0.5vw 0; -} - -@media screen and (min-width: 600px) { - .buttons-showcase li { - margin-top: 0; - flex-direction: row; - } - .buttons-showcase li pre { - margin: 0.5vw 0 0.5vw 2vw; - } -} |