mirror of
https://github.com/IfcOpenShell/IfcOpenShell.git
synced 2026-09-28 03:05:33 +00:00
Implement BIMTester web app mockup
This commit is contained in:
Dion Moult
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 640 480">
|
||||||
|
<path fill="#ffce00" d="M0 320h640v160H0z"/>
|
||||||
|
<path d="M0 0h640v160H0z"/>
|
||||||
|
<path fill="#d00" d="M0 160h640v160H0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-fr" viewBox="0 0 640 480">
|
||||||
|
<g fill-rule="evenodd" stroke-width="1pt">
|
||||||
|
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||||
|
<path fill="#00267f" d="M0 0h213.3v480H0z"/>
|
||||||
|
<path fill="#f31830" d="M426.7 0H640v480H426.7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 291 B |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
|
||||||
|
<path fill="#012169" d="M0 0h640v480H0z"/>
|
||||||
|
<path fill="#FFF" d="M75 0l244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
|
||||||
|
<path fill="#C8102E" d="M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
|
||||||
|
<path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
|
||||||
|
<path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 537 B |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-it" viewBox="0 0 640 480">
|
||||||
|
<g fill-rule="evenodd" stroke-width="1pt">
|
||||||
|
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||||
|
<path fill="#009246" d="M0 0h213.3v480H0z"/>
|
||||||
|
<path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 291 B |
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-nl" viewBox="0 0 640 480">
|
||||||
|
<path fill="#21468b" d="M0 0h640v480H0z"/>
|
||||||
|
<path fill="#fff" d="M0 0h640v320H0z"/>
|
||||||
|
<path fill="#ae1c28" d="M0 0h640v160H0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 223 B |
@@ -0,0 +1,212 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>BIMTester Requirements Generator</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="manifest" href="site.webmanifest">
|
||||||
|
<link rel="apple-touch-icon" href="icon.png">
|
||||||
|
<!-- Place favicon.ico in the root directory -->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="normalize.css">
|
||||||
|
<link rel="stylesheet" href="skeleton.css">
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
|
||||||
|
<meta name="theme-color" content="#fafafa">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!--[if IE]>
|
||||||
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<header{{#has_seamless_header}} class="seamless"{{/has_seamless_header}}>
|
||||||
|
<h1>
|
||||||
|
BIMTester Requirements Generator
|
||||||
|
<span style="font-size: 0.5em; font-style: italic;">
|
||||||
|
Because your BIM actually sucks but you don't know it yet.
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
<div class="row">
|
||||||
|
<section class="eight columns">
|
||||||
|
<div class="tcenter">
|
||||||
|
<img src="images/gb.svg" class="flag active-flag" title="English">
|
||||||
|
<img src="images/de.svg" class="flag" title="German">
|
||||||
|
<img src="images/it.svg" class="flag" title="Italian">
|
||||||
|
<img src="images/fr.svg" class="flag" title="French">
|
||||||
|
<img src="images/nl.svg" class="flag" title="Dutch">
|
||||||
|
</div>
|
||||||
|
<select name="micromvd">
|
||||||
|
<option>Project setup</option>
|
||||||
|
</select>
|
||||||
|
<p class="tcenter">
|
||||||
|
In order to ensure quality of the digital built environment<br />
|
||||||
|
As a responsible digital citizen<br />
|
||||||
|
We expect compliant OpenBIM deliverables<br />
|
||||||
|
</p>
|
||||||
|
<h2>
|
||||||
|
Scenario: Receiving a file
|
||||||
|
</h2>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<details>
|
||||||
|
<summary>The data must use the "<code contenteditable>{schema}</code>" schema</summary>
|
||||||
|
<strong>
|
||||||
|
Example: <span>The data must use the "IFC4" schema</span>
|
||||||
|
</strong>
|
||||||
|
<p>
|
||||||
|
BIM data may be structured using a particular version of IFC, known as the "schema" version.
|
||||||
|
Newer versions add lots of capabilities like extra parameters, new data relationships, and
|
||||||
|
improved data classification. The version you choose will affect what data can be stored,
|
||||||
|
and which programs have support for reading and writing that version. At the moment, you are
|
||||||
|
likely to specify either "IFC2X3" or "IFC4".
|
||||||
|
</p>
|
||||||
|
<div style="padding-bottom: 20px;">
|
||||||
|
<div class="onoffswitch">
|
||||||
|
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1" tabindex="0" checked>
|
||||||
|
<label class="onoffswitch-label" for="myonoffswitch1">
|
||||||
|
<span class="onoffswitch-inner"></span>
|
||||||
|
<span class="onoffswitch-switch"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<h2>
|
||||||
|
Scenario: Exempt files
|
||||||
|
</h2>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<details>
|
||||||
|
<summary>The IFC file "<code contenteditable>{file}</code>" is exempt from being provided</summary>
|
||||||
|
<strong>
|
||||||
|
Example: <span>The IFC file "PROJECT.ifc" is exempt from being provided</span>
|
||||||
|
</strong>
|
||||||
|
<p>
|
||||||
|
Sometimes, projects may create BIM data that is purely temporary, or as a workaround that is
|
||||||
|
needed as part of their workflow, but not required from a contractual perspective. In this
|
||||||
|
case, it is advisable for the requirements to explicitly exclude these BIM files so that the
|
||||||
|
client knows what is included in the scope of requirements. Simply specify the name of the
|
||||||
|
file that you know is not required as a deliverable.
|
||||||
|
</p>
|
||||||
|
<div style="padding-bottom: 20px;">
|
||||||
|
<div class="onoffswitch">
|
||||||
|
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" tabindex="0" checked>
|
||||||
|
<label class="onoffswitch-label" for="myonoffswitch2">
|
||||||
|
<span class="onoffswitch-inner"></span>
|
||||||
|
<span class="onoffswitch-switch"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
No further requirements are specified because "<code contenteditable>{reason}</code>"
|
||||||
|
</summary>
|
||||||
|
<strong>
|
||||||
|
Example: <span>No further requirements are specified because "it will be superseded in a future project phase"</span>
|
||||||
|
</strong>
|
||||||
|
<p>
|
||||||
|
The recipient may not necessarily wish to specify more BIM requirements to audit. Scenarios
|
||||||
|
when this is the case may be when the recipient does not have processes in place to use the
|
||||||
|
BIM data or does not know how to use the BIM data, or when the BIM data is temporary or
|
||||||
|
irrelevant for any reason. In this scenario, it may be useful to specify the reason why no
|
||||||
|
further audits will take place. This is the contractual equivalent to "this page is
|
||||||
|
intentionally left blank".
|
||||||
|
</p>
|
||||||
|
<div style="padding-bottom: 20px;">
|
||||||
|
<div class="onoffswitch">
|
||||||
|
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch3" tabindex="0" checked>
|
||||||
|
<label class="onoffswitch-label" for="myonoffswitch3">
|
||||||
|
<span class="onoffswitch-inner"></span>
|
||||||
|
<span class="onoffswitch-switch"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<h2>
|
||||||
|
Scenario: Project metadata is organised and correct
|
||||||
|
</h2>
|
||||||
|
<ol>
|
||||||
|
<li>The project must have an identifier of "<code contenteditable>{guid}</code>"</li>
|
||||||
|
<li>The project name, code, or short identifier must be "<code contenteditable>{name}</code>"</li>
|
||||||
|
<li>The project must have a longer form name of "<code contenteditable>{long_name}</code>"</li>
|
||||||
|
<li>The project must be described as "<code contenteditable>{description}</code>"</li>
|
||||||
|
<li>The project must be categorised under "<code contenteditable>{object_type}</code>"</li>
|
||||||
|
<li>The project must contain information about the "<code contenteditable>{phase}</code>" phase</li>
|
||||||
|
</ol>
|
||||||
|
<h2>
|
||||||
|
Scenario: Project geometry is stored
|
||||||
|
</h2>
|
||||||
|
<ol>
|
||||||
|
<li>The project must contain 3D geometry representing the shape of objects</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<aside class="four columns">
|
||||||
|
<p>
|
||||||
|
BIMTester is an <strong>open source</strong>, <strong>transparent</strong>,
|
||||||
|
<strong>standards-based</strong> auditing system for IFC-based projects, using well-established best
|
||||||
|
practices from the software industry. Requirements can be automatically checked and customised using 100%
|
||||||
|
free software that puts you in control of your OpenBIM data.
|
||||||
|
</p>
|
||||||
|
<h3>
|
||||||
|
Step 1
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Select a requirements template from the dropdown list.
|
||||||
|
</p>
|
||||||
|
<h3>
|
||||||
|
Step 2
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Fill out the requirements by editing the highlighted words line by line. Click on a line to toggle whether the requirement is needed for your project.
|
||||||
|
</p>
|
||||||
|
<h3>
|
||||||
|
Step 3
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Download the requirements file and include it in contracts.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="#" class="button button-primary">Download Requirements</a>
|
||||||
|
|
||||||
|
<a href="#" class="button">Run an automatic Audit</a>
|
||||||
|
</p>
|
||||||
|
<h4>
|
||||||
|
More resources
|
||||||
|
</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Want to write your own requirements? <a href="#">Read more</a>
|
||||||
|
<li>Are you a poweruser or developer? Learn the ropes. <a href="#">Read more</a>
|
||||||
|
<li>Need more help? Engage with the OSArch community. <a href="#">Read more</a>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
BIMTester is built with ♥ on the awesome <a href="http://www.ifcopenshell.org/">IfcOpenShell</a> project by <a href="https://blenderbim.org/community.html">amazing volunteers</a>. You can be one too!
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
<!--
|
||||||
|
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
|
||||||
|
<script src="js/plugins.js"></script>
|
||||||
|
<script>
|
||||||
|
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
|
||||||
|
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
|
||||||
|
</script>
|
||||||
|
<script src="https://www.google-analytics.com/analytics.js" async></script>
|
||||||
|
-->
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
sodipodi:docname="info.svg"
|
||||||
|
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||||
|
id="svg8"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 15 10"
|
||||||
|
height="10mm"
|
||||||
|
width="15mm">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:window-y="25"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-height="1055"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:cy="7.4426888"
|
||||||
|
inkscape:cx="42.12184"
|
||||||
|
inkscape:zoom="8.6683577"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
borderopacity="1.0"
|
||||||
|
bordercolor="#666666"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
id="base" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Layer 1">
|
||||||
|
<path
|
||||||
|
d="M 9.5,5 A 4.5,4.5000019 0 0 1 5,9.5000019 4.5,4.5000019 0 0 1 0.5,5 4.5,4.5000019 0 0 1 5,0.49999809 4.5,4.5000019 0 0 1 9.5,5 Z"
|
||||||
|
style="fill:none;stroke:#3d3242;stroke-width:0.999996;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
|
||||||
|
id="path833" />
|
||||||
|
<g
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5833px;line-height:125%;font-family:'Andale Mono';-inkscape-font-specification:'Andale Mono, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#3d3242;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
id="text837"
|
||||||
|
aria-label="i">
|
||||||
|
<path
|
||||||
|
id="path861"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Webdings;-inkscape-font-specification:Webdings;fill:#3d3242;fill-opacity:1;stroke-width:0.264583px"
|
||||||
|
d="m 9.2322863,5.002584 q 0,1.7518255 -1.2402304,2.9920559 Q 6.7518255,9.2297027 5,9.2297027 q -1.7518255,0 -2.9920559,-1.2350628 Q 0.76771367,6.7544095 0.76771367,5.002584 q 0,-1.7518254 1.24023043,-2.9920559 Q 3.2481745,0.77029771 5,0.77029771 q 1.7518255,0 2.9920559,1.24023039 1.2402304,1.2402305 1.2402304,2.9920559 z m -0.692462,0 q 0,-1.467606 -1.0386929,-2.5062989 Q 6.467606,1.4575921 5,1.4575921 q -1.467606,0 -2.506299,1.038693 -1.038693,1.0386929 -1.038693,2.5062989 0,1.467606 1.038693,2.506299 Q 3.532394,8.5424084 5,8.5424084 q 1.467606,0 2.5011314,-1.0335254 Q 8.5398243,6.47019 8.5398243,5.002584 Z M 5.8681613,2.8218455 q 0,0.3358958 -0.2583813,0.5736066 Q 5.3565662,3.6331629 5,3.6331629 q -0.3617339,0 -0.6149476,-0.2377108 -0.2532137,-0.2377108 -0.2532137,-0.5736066 0,-0.3358957 0.2532137,-0.5736065 Q 4.6382661,2.0105281 5,2.0105281 q 0.3565662,0 0.60978,0.2377109 0.2583813,0.2377108 0.2583813,0.5736065 z M 5.7079649,8.1651716 H 4.2868675 V 4.1344227 h 1.4210974 z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,239 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(.5,.5,.5,.5) rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Works on Chrome/Edge/Safari */
|
||||||
|
*::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(.5,.5,.5,.5);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #e1dcd8;
|
||||||
|
color: #3d3242;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #8daad3;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #c0c0c0;
|
||||||
|
padding-left: 20px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #b85934;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #e18a42;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #3d3242;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
section select {
|
||||||
|
width: 100%;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
line-height: 50px;
|
||||||
|
margin: 0px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1px solid #756180;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol {
|
||||||
|
list-style-type: None;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li {
|
||||||
|
line-height: 40px;
|
||||||
|
margin: 0px;
|
||||||
|
background-position: center right;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
border-left: 5px solid #3e7c52;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li.excluded {
|
||||||
|
border-left: 5px solid #b15a69;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li p {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li:hover {
|
||||||
|
background-color: #756180;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url('info.svg');
|
||||||
|
background-size: 40px;
|
||||||
|
background-position: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li:hover code {
|
||||||
|
background-color: #3d3242;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li code {
|
||||||
|
background-color: #756180;
|
||||||
|
border: 2px solid #999;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li code:focus {
|
||||||
|
background-color: #b85934;
|
||||||
|
border: 2px solid #e18a42;
|
||||||
|
}
|
||||||
|
|
||||||
|
section ol li code:hover {
|
||||||
|
border: 2px solid #e18a42;
|
||||||
|
}
|
||||||
|
|
||||||
|
section p {
|
||||||
|
background-color: #756180;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
margin-left: 0px !important;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside h4 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
|
||||||
|
border: 2px solid #756180;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
|
||||||
|
border: 2px solid #e18a42;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tcenter {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tleft {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tright {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fleft {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nomargin {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.flag {
|
||||||
|
width: 30px;
|
||||||
|
padding: 2px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.active-flag {
|
||||||
|
border: 2px solid #756180;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.onoffswitch {
|
||||||
|
position: relative; width: 110px;
|
||||||
|
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||||
|
}
|
||||||
|
.onoffswitch-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.onoffswitch-label {
|
||||||
|
display: block; overflow: hidden; cursor: pointer;
|
||||||
|
border: 0px solid #999999; border-radius: 17px;
|
||||||
|
}
|
||||||
|
.onoffswitch-inner {
|
||||||
|
display: block; width: 200%; margin-left: -100%;
|
||||||
|
transition: margin 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||||
|
display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
|
||||||
|
font-size: 11px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.onoffswitch-inner:before {
|
||||||
|
content: "REQUIRED";
|
||||||
|
padding-left: 10px;
|
||||||
|
background-color: #3E7C52; color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.onoffswitch-inner:after {
|
||||||
|
content: "EXCLUDED";
|
||||||
|
padding-right: 10px;
|
||||||
|
background-color: #B15A69; color: #EEEEEE;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.onoffswitch-switch {
|
||||||
|
display: block; width: 24px; margin: 0.5px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
position: absolute; top: 0; bottom: 0;
|
||||||
|
right: 86px;
|
||||||
|
border: 0px solid #999999; border-radius: 17px;
|
||||||
|
transition: all 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
/* Hacky mockup */
|
||||||
|
let elements = document.getElementsByTagName('input');
|
||||||
|
for (let i=0; i<elements.length; i++) {
|
||||||
|
console.log(elements[i]);
|
||||||
|
elements[i].addEventListener('click', function() {
|
||||||
|
let input = this;
|
||||||
|
console.log(input);
|
||||||
|
let li = input.parentNode.parentNode.parentNode.parentNode;
|
||||||
|
if (input.checked) {
|
||||||
|
li.classList.remove('excluded');
|
||||||
|
} else {
|
||||||
|
li.classList.add('excluded');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
+349
@@ -0,0 +1,349 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Vendored
+418
@@ -0,0 +1,418 @@
|
|||||||
|
/*
|
||||||
|
* Skeleton V2.0.4
|
||||||
|
* Copyright 2014, Dave Gamache
|
||||||
|
* www.getskeleton.com
|
||||||
|
* Free to use under the MIT license.
|
||||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
|
* 12/29/2014
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Table of contents
|
||||||
|
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||||
|
- Grid
|
||||||
|
- Base Styles
|
||||||
|
- Typography
|
||||||
|
- Links
|
||||||
|
- Buttons
|
||||||
|
- Forms
|
||||||
|
- Lists
|
||||||
|
- Code
|
||||||
|
- Tables
|
||||||
|
- Spacing
|
||||||
|
- Utilities
|
||||||
|
- Clearing
|
||||||
|
- Media Queries
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Grid
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.column,
|
||||||
|
.columns {
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
/* For devices larger than 400px */
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.container {
|
||||||
|
width: 85%;
|
||||||
|
padding: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For devices larger than 550px */
|
||||||
|
@media (min-width: 550px) {
|
||||||
|
.container {
|
||||||
|
width: 80%; }
|
||||||
|
.column,
|
||||||
|
.columns {
|
||||||
|
margin-left: 4%; }
|
||||||
|
.column:first-child,
|
||||||
|
.columns:first-child {
|
||||||
|
margin-left: 0; }
|
||||||
|
|
||||||
|
.one.column,
|
||||||
|
.one.columns { width: 4.66666666667%; }
|
||||||
|
.two.columns { width: 13.3333333333%; }
|
||||||
|
.three.columns { width: 22%; }
|
||||||
|
.four.columns { width: 30.6666666667%; }
|
||||||
|
.five.columns { width: 39.3333333333%; }
|
||||||
|
.six.columns { width: 48%; }
|
||||||
|
.seven.columns { width: 56.6666666667%; }
|
||||||
|
.eight.columns { width: 65.3333333333%; }
|
||||||
|
.nine.columns { width: 74.0%; }
|
||||||
|
.ten.columns { width: 82.6666666667%; }
|
||||||
|
.eleven.columns { width: 91.3333333333%; }
|
||||||
|
.twelve.columns { width: 100%; margin-left: 0; }
|
||||||
|
|
||||||
|
.one-third.column { width: 30.6666666667%; }
|
||||||
|
.two-thirds.column { width: 65.3333333333%; }
|
||||||
|
|
||||||
|
.one-half.column { width: 48%; }
|
||||||
|
|
||||||
|
/* Offsets */
|
||||||
|
.offset-by-one.column,
|
||||||
|
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||||
|
.offset-by-two.column,
|
||||||
|
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||||
|
.offset-by-three.column,
|
||||||
|
.offset-by-three.columns { margin-left: 26%; }
|
||||||
|
.offset-by-four.column,
|
||||||
|
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||||
|
.offset-by-five.column,
|
||||||
|
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||||
|
.offset-by-six.column,
|
||||||
|
.offset-by-six.columns { margin-left: 52%; }
|
||||||
|
.offset-by-seven.column,
|
||||||
|
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||||
|
.offset-by-eight.column,
|
||||||
|
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||||
|
.offset-by-nine.column,
|
||||||
|
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||||
|
.offset-by-ten.column,
|
||||||
|
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||||
|
.offset-by-eleven.column,
|
||||||
|
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||||
|
|
||||||
|
.offset-by-one-third.column,
|
||||||
|
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||||
|
.offset-by-two-thirds.column,
|
||||||
|
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||||
|
|
||||||
|
.offset-by-one-half.column,
|
||||||
|
.offset-by-one-half.columns { margin-left: 52%; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Base Styles
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
/* NOTE
|
||||||
|
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||||
|
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%; }
|
||||||
|
body {
|
||||||
|
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||||
|
line-height: 1.6;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Typography
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 300; }
|
||||||
|
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||||
|
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||||
|
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||||
|
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||||
|
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||||
|
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||||
|
|
||||||
|
/* Larger than phablet */
|
||||||
|
@media (min-width: 550px) {
|
||||||
|
h1 { font-size: 5.0rem; }
|
||||||
|
h2 { font-size: 4.2rem; }
|
||||||
|
h3 { font-size: 3.6rem; }
|
||||||
|
h4 { font-size: 3.0rem; }
|
||||||
|
h5 { font-size: 2.4rem; }
|
||||||
|
h6 { font-size: 1.5rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Links
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
a {
|
||||||
|
color: #1EAEDB; }
|
||||||
|
a:hover {
|
||||||
|
color: #0FA0CE; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Buttons
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
.button,
|
||||||
|
button,
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="button"] {
|
||||||
|
display: inline-block;
|
||||||
|
height: 38px;
|
||||||
|
padding: 0 30px;
|
||||||
|
color: #555;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 38px;
|
||||||
|
letter-spacing: .1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.button:hover,
|
||||||
|
button:hover,
|
||||||
|
input[type="submit"]:hover,
|
||||||
|
input[type="reset"]:hover,
|
||||||
|
input[type="button"]:hover,
|
||||||
|
.button:focus,
|
||||||
|
button:focus,
|
||||||
|
input[type="submit"]:focus,
|
||||||
|
input[type="reset"]:focus,
|
||||||
|
input[type="button"]:focus {
|
||||||
|
color: #333;
|
||||||
|
border-color: #888;
|
||||||
|
outline: 0; }
|
||||||
|
.button.button-primary,
|
||||||
|
button.button-primary,
|
||||||
|
input[type="submit"].button-primary,
|
||||||
|
input[type="reset"].button-primary,
|
||||||
|
input[type="button"].button-primary {
|
||||||
|
color: #FFF;
|
||||||
|
background-color: #33C3F0;
|
||||||
|
border-color: #33C3F0; }
|
||||||
|
.button.button-primary:hover,
|
||||||
|
button.button-primary:hover,
|
||||||
|
input[type="submit"].button-primary:hover,
|
||||||
|
input[type="reset"].button-primary:hover,
|
||||||
|
input[type="button"].button-primary:hover,
|
||||||
|
.button.button-primary:focus,
|
||||||
|
button.button-primary:focus,
|
||||||
|
input[type="submit"].button-primary:focus,
|
||||||
|
input[type="reset"].button-primary:focus,
|
||||||
|
input[type="button"].button-primary:focus {
|
||||||
|
color: #FFF;
|
||||||
|
background-color: #1EAEDB;
|
||||||
|
border-color: #1EAEDB; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="text"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="url"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
height: 38px;
|
||||||
|
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #D1D1D1;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
/* Removes awkward default styles on some inputs for iOS */
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="text"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="url"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none; }
|
||||||
|
textarea {
|
||||||
|
min-height: 65px;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-bottom: 6px; }
|
||||||
|
input[type="email"]:focus,
|
||||||
|
input[type="number"]:focus,
|
||||||
|
input[type="search"]:focus,
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="tel"]:focus,
|
||||||
|
input[type="url"]:focus,
|
||||||
|
input[type="password"]:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
border: 1px solid #33C3F0;
|
||||||
|
outline: 0; }
|
||||||
|
label,
|
||||||
|
legend {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-weight: 600; }
|
||||||
|
fieldset {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0; }
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
display: inline; }
|
||||||
|
label > .label-body {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: .5rem;
|
||||||
|
font-weight: normal; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Lists
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
ul {
|
||||||
|
list-style: circle inside; }
|
||||||
|
ol {
|
||||||
|
list-style: decimal inside; }
|
||||||
|
ol, ul {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 0; }
|
||||||
|
ul ul,
|
||||||
|
ul ol,
|
||||||
|
ol ol,
|
||||||
|
ol ul {
|
||||||
|
margin: 1.5rem 0 1.5rem 3rem;
|
||||||
|
font-size: 90%; }
|
||||||
|
li {
|
||||||
|
margin-bottom: 1rem; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Code
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
code {
|
||||||
|
padding: .2rem .5rem;
|
||||||
|
margin: 0 .2rem;
|
||||||
|
font-size: 90%;
|
||||||
|
white-space: nowrap;
|
||||||
|
background: #F1F1F1;
|
||||||
|
border: 1px solid #E1E1E1;
|
||||||
|
border-radius: 4px; }
|
||||||
|
pre > code {
|
||||||
|
display: block;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
white-space: pre; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Tables
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 12px 15px;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #E1E1E1; }
|
||||||
|
th:first-child,
|
||||||
|
td:first-child {
|
||||||
|
padding-left: 0; }
|
||||||
|
th:last-child,
|
||||||
|
td:last-child {
|
||||||
|
padding-right: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Spacing
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
button,
|
||||||
|
.button {
|
||||||
|
margin-bottom: 1rem; }
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
fieldset {
|
||||||
|
margin-bottom: 1.5rem; }
|
||||||
|
pre,
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
figure,
|
||||||
|
table,
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
form {
|
||||||
|
margin-bottom: 2.5rem; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Utilities
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
.u-full-width {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.u-max-full-width {
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.u-pull-right {
|
||||||
|
float: right; }
|
||||||
|
.u-pull-left {
|
||||||
|
float: left; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
hr {
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
border-width: 0;
|
||||||
|
border-top: 1px solid #E1E1E1; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Clearing
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
|
||||||
|
/* Self Clearing Goodness */
|
||||||
|
.container:after,
|
||||||
|
.row:after,
|
||||||
|
.u-cf {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Media Queries
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
/*
|
||||||
|
Note: The best way to structure the use of media queries is to create the queries
|
||||||
|
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||||
|
on small devices, paste the mobile query code up in the buttons section and style it
|
||||||
|
there.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Larger than mobile */
|
||||||
|
@media (min-width: 400px) {}
|
||||||
|
|
||||||
|
/* Larger than phablet (also point when grid becomes active) */
|
||||||
|
@media (min-width: 550px) {}
|
||||||
|
|
||||||
|
/* Larger than tablet */
|
||||||
|
@media (min-width: 750px) {}
|
||||||
|
|
||||||
|
/* Larger than desktop */
|
||||||
|
@media (min-width: 1000px) {}
|
||||||
|
|
||||||
|
/* Larger than Desktop HD */
|
||||||
|
@media (min-width: 1200px) {}
|
||||||
Reference in New Issue
Block a user