uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Made colors column 12

writing-page-updates
Anxhelo Lushka 6 years ago
parent
f17e1a6053
commit
90317fe549
No known key found for this signature in database GPG Key ID: 86086158C83770F8
3 changed files with 26 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      _includes/components/buttons.html
  2. 57
      _includes/design/colors.html
  3. 2
      _site/components/index.html

2
_includes/components/buttons.html
View File

@ -20,7 +20,5 @@
<button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button> <button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button>
<button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button> <button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button>
<button type="button" class="btn btn-sm btn-link mr-2">Link</button> <button type="button" class="btn btn-sm btn-link mr-2">Link</button>
<p class="text-black small text-muted m-0 pt-5">Scroller</p>
<button type="button" class="btn btn-scroller mr-2 mt-2">Back to Top <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 256.1" class="faq__chevron-up"><path d="M145.4,136.5l-117.8,116c-4.7,4.7-12.3,4.7-17,0l-7.1-7.1c-4.7-4.7-4.7-12.3,0-17L105.8,128L3.6,27.6c-4.7-4.7-4.7-12.3,0-17l7.1-7.1c4.7-4.7,12.3-4.7,17,0l117.8,116C150.1,124.2,150.1,131.8,145.4,136.5L145.4,136.5z"></path></svg></button>
</div> </div>
</div> </div>

57
_includes/design/colors.html
View File

@ -3,66 +3,61 @@
<p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p> <p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#4661A9</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-primary text-white small">#4661A9</div>
<h6 class="pt2 text-left">Primary Color</h6> <h6 class="pt2 text-left">Primary Color</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#60AB60</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
<h6 class="pt2 text-left">Secondary color</h6> <h6 class="pt2 text-left">Secondary color</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-warning text-white small">#FFC434</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-warning text-white small">#FFC434</div>
<h6 class="pt2 text-left">Warning</h6> <h6 class="pt2 text-left">Warning</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-danger text-white small">#E15647</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-danger text-white small">#E15647</div>
<h6 class="pt2 text-left">Danger</h6> <h6 class="pt2 text-left">Danger</h6>
</div> </div>
</div> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="row"> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
<h6 class="pt2 text-left">Gray 0</h6> <h6 class="pt2 text-left">Gray 0</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
<h6 class="pt2 text-left">Gray 1</h6> <h6 class="pt2 text-left">Gray 1</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
<h6 class="pt2 text-left">Gray 2</h6> <h6 class="pt2 text-left">Gray 2</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
<h6 class="pt2 text-left">Gray 3</h6> <h6 class="pt2 text-left">Gray 3</h6>
</div> </div>
</div> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="row"> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
<h6 class="pt2 text-left">Gray 4</h6> <h6 class="pt2 text-left">Gray 4</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
<h6 class="pt2 text-left">Gray 5</h6> <h6 class="pt2 text-left">Gray 5</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
<h6 class="pt2 text-left">Gray 6</h6> <h6 class="pt2 text-left">Gray 6</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div> <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
<h6 class="pt2 text-left">Gray 7</h6> <h6 class="pt2 text-left">Gray 7</h6>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
<h6 class="pt2 text-left">Gray 8</h6> <h6 class="pt2 text-left">Gray 8</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
<h6 class="pt2 text-left">Gray 9</h6> <h6 class="pt2 text-left">Gray 9</h6>
</div> </div>

2
_site/components/index.html
View File

@ -197,8 +197,6 @@
<button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button> <button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button>
<button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button> <button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button>
<button type="button" class="btn btn-sm btn-link mr-2">Link</button> <button type="button" class="btn btn-sm btn-link mr-2">Link</button>
<p class="text-black small text-muted m-0 pt-5">Scroller</p>
<button type="button" class="btn btn-scroller mr-2 mt-2">Back to Top <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 256.1" class="faq__chevron-up"><path d="M145.4,136.5l-117.8,116c-4.7,4.7-12.3,4.7-17,0l-7.1-7.1c-4.7-4.7-4.7-12.3,0-17L105.8,128L3.6,27.6c-4.7-4.7-4.7-12.3,0-17l7.1-7.1c4.7-4.7,12.3-4.7,17,0l117.8,116C150.1,124.2,150.1,131.8,145.4,136.5L145.4,136.5z"></path></svg></button>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save