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

alerts colors to match SG and components layout improvement

pull/1/head
eupiteco 6 years ago
parent
aabd81f3ec
commit
0f64166952
16 changed files with 407 additions and 199 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. 21
      _includes/components/alerts.html
  2. 2
      _includes/components/badges.html
  3. 2
      _includes/components/cards.html
  4. 3
      _includes/components/forms.html
  5. 2
      _includes/components/navbar.html
  6. 3
      _includes/components/paginate.html
  7. 8
      _includes/components/tables.html
  8. 26
      _layouts/components.html
  9. 70
      _site/assets/styles/components.scss
  10. 21
      _site/assets/styles/main.css
  11. 4
      _site/assets/styles/visuals.scss
  12. 355
      _site/components/index.html
  13. 70
      assets/styles/components.scss
  14. 1
      assets/styles/main.scss
  15. 4
      assets/styles/visuals.scss
  16. 8
      components.md

21
_includes/components/alerts.html
View File

@ -1,18 +1,27 @@
<div class="page-header mb-4 mt-5"> <div class="page-header mb-4">
<h2 id="alerts">Alerts</h2> <h2 id="alerts">Alerts</h2>
<p class="text-muted">Some Description about alerts.</p> <p class="text-muted">Some Description about alerts.</p>
</div> </div>
<div class="row p-5 bg-light"> <div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert"> <div class="col-12 alert alert-primary" role="alert">
This is a primary alert—check it out! <p class="mb-0">This is a primary alert — check it out!</p>
</div>
<div class="col-12 alert alert-secondary" role="alert">
<p class="mb-0">This is a default alert — check it out!</p>
</div> </div>
<div class="col-12 alert alert-success" role="alert"> <div class="col-12 alert alert-success" role="alert">
This is a success alert—check it out! <p class="mb-0">This is a success alert — check it out!</p>
</div>
<div class="col-12 alert alert-warning" role="alert">
<p class="mb-0">This is a warning alert — check it out!</p>
</div> </div>
<div class="col-12 alert alert-danger" role="alert"> <div class="col-12 alert alert-danger" role="alert">
This is a danger alert—check it out! <p class="mb-0">This is a danger alert — check it out!</p>
</div> </div>
<div class="col-12 alert alert-warning" role="alert"> <div class="col-12 alert alert-success" role="alert">
This is a warning alert—check it out! <h4 class="alert-header">Well done!!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
</div> </div>
</div> </div>

2
_includes/components/badges.html
View File

@ -1,4 +1,4 @@
<div class="page-header mb-4 mt-5"> <div class="page-header mb-4">
<h2 id="badges">Badges</h2> <h2 id="badges">Badges</h2>
<!--p class="text-muted">Some Description about badges.</p--> <!--p class="text-muted">Some Description about badges.</p-->
</div> </div>

2
_includes/components/cards.html
View File

@ -1,4 +1,4 @@
<div class="mt-5" id="cards"> <div class="mb-4" id="cards">
<h2>Cards</h2> <h2>Cards</h2>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5"> <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12"> <div class="col-md-6 col-sm-12 col-xs-12">

3
_includes/components/forms.html
View File

@ -1,5 +1,4 @@
<h1 id="forms"> </h1> <div class="page-header mb-4" id="forms">
<div class="page-header mb-4 mt-5">
<h2>Forms</h2> <h2>Forms</h2>
<!--p class="text-muted">Some Description about Forms.</p--> <!--p class="text-muted">Some Description about Forms.</p-->
</div> </div>

2
_includes/components/navbar.html
View File

@ -1,4 +1,4 @@
<div id="header" class="mb-4 mt-5"> <div id="header" class="mb-4">
<h2>Header</h2> <h2>Header</h2>
<!--p class="text-muted">Some Description about buttons.</p--> <!--p class="text-muted">Some Description about buttons.</p-->
</div> </div>

3
_includes/components/paginate.html
View File

@ -1,5 +1,4 @@
<h1 id="pagination"></h1> <div class="page-header mb-4 " id="pagination">
<div class="page-header mb-4 mt-5">
<h2>Pagination</h2> <h2>Pagination</h2>
<!--p class="text-muted">Some Description about pagination.</p--> <!--p class="text-muted">Some Description about pagination.</p-->
</div> </div>

8
_includes/components/tables.html
View File

@ -1,6 +1,7 @@
<div class="mt-5" id="tables"> <div class="page-header mb-4" id="tables">
<h2>Tables</h2> <h2>Tables</h2>
<div class="row mt-5"> </div>
<div class="row bg-light p-5">
<span>Default</span> <span>Default</span>
<br /> <br />
<table class="table"> <table class="table">
@ -33,8 +34,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="row mt-5">
<span>Striped</span> <span>Striped</span>
<br /> <br />
<table class="table table-striped"> <table class="table table-striped">
@ -68,4 +67,3 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>

26
_layouts/components.html
View File

@ -16,16 +16,34 @@
</div> </div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5"> <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<!--{{ content }}--> <!--{{ content }}-->
{% include components/buttons.html %} <div class="component-wrapper my-5" id="">
{% include components/alerts.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/badges.html %} {% include components/badges.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/buttons.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/cards.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/forms.html %} {% include components/forms.html %}
</div>
<div class="component-wrapper my-5" id="">
{% include components/navbar.html %} {% include components/navbar.html %}
{% include components/tables.html %} </div>
{% include components/cards.html %} <div class="component-wrapper my-5" id="">
{% include components/paginate.html %} {% include components/paginate.html %}
{% include components/alerts.html %} </div>
<div class="component-wrapper my-5" id="">
{% include scrollspy.html %} {% include scrollspy.html %}
</div> </div>
<div class="component-wrapper my-5" id="">
{% include components/tables.html %}
</div>
</div>
</div> </div>
{% include scripts.html %} {% include scripts.html %}
</body> </body>

70
_site/assets/styles/components.scss
View File

@ -1,3 +1,73 @@
.alert {
border-radius: 25px;
&-custom {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-primary {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-success {
color: #075207;
background-color: #beffbe;
border-color: #a7f2a7;
& hr {
border-top-color: #7ac57a;
}
& .alert-link {
color: #003b00;
}
}
&-warning {
color: #bd8200;
background-color: #ffffa9;
border-color: #ffff92;
& hr {
border-top-color: #fff464;
}
& .alert-link {
color: #a66b00;
}
}
&-danger {
color: #9f1405;
background-color: #ffcbbc;
border-color: #ffb4a5;
& hr {
border-top-color: #ff8677;
}
& .alert-link {
color: #880000;
}
}
}
.background-primary { .background-primary {
background-color: $primary; background-color: $primary;
} }

21
_site/assets/styles/main.css
View File

@ -61,8 +61,6 @@
.b-border { border-bottom: 2px solid lightgrey !important; } .b-border { border-bottom: 2px solid lightgrey !important; }
p { color: #212529; }
.color { height: 100px; } .color { height: 100px; }
.grid { height: 100px; background-color: #4661A9; border-radius: 7px; } .grid { height: 100px; background-color: #4661A9; border-radius: 7px; }
@ -80,6 +78,23 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.icon { font-size: 20px; background-color: #212529; padding: 20px; } .icon { font-size: 20px; background-color: #212529; padding: 20px; }
.alert { border-radius: 25px; }
.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
.alert-custom hr { border-top-color: #7691d9; }
.alert-custom .alert-link { color: #000850; }
.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
.alert-primary hr { border-top-color: #7691d9; }
.alert-primary .alert-link { color: #000850; }
.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; }
.alert-success hr { border-top-color: #7ac57a; }
.alert-success .alert-link { color: #003b00; }
.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; }
.alert-warning hr { border-top-color: #fff464; }
.alert-warning .alert-link { color: #a66b00; }
.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; }
.alert-danger hr { border-top-color: #ff8677; }
.alert-danger .alert-link { color: #880000; }
.background-primary { background-color: #4661A9; } .background-primary { background-color: #4661A9; }
.background-secondary { background-color: #60AB60; } .background-secondary { background-color: #60AB60; }
@ -183,6 +198,6 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
@media (max-width: 992px) { .display-md { display: none !important; } } @media (max-width: 992px) { .display-md { display: none !important; } }
.display-md { display: unset; } .display-md { display: unset; }
body { font-family: "Source Sans Pro", sans-serif !important; font-size: 1.2rem; } body { color: #212529; font-family: "Source Sans Pro", sans-serif !important; font-size: 1.2rem; }
a { text-decoration: none !important; } a { text-decoration: none !important; }

4
_site/assets/styles/visuals.scss
View File

@ -1,7 +1,3 @@
p {
color: $oc-gray-9;
}
.color { .color {
height: 100px; height: 100px;
} }

355
_site/components/index.html
View File

@ -75,8 +75,8 @@
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
<a href="#buttons"><li class="list-group-item rb-sidebar"> <a href="#alerts"><li class="list-group-item rb-sidebar">
Buttons Alerts
</li></a> </li></a>
@ -87,6 +87,18 @@
<a href="#buttons"><li class="list-group-item rb-sidebar">
Buttons
</li></a>
<a href="#cards"><li class="list-group-item rb-sidebar">
Cards
</li></a>
<a href="#forms"><li class="list-group-item rb-sidebar"> <a href="#forms"><li class="list-group-item rb-sidebar">
Forms Forms
</li></a> </li></a>
@ -99,20 +111,20 @@
<a href="#tables"><li class="list-group-item rb-sidebar"> <a href="#pagination"><li class="list-group-item rb-sidebar">
Tables Pagination
</li></a> </li></a>
<a href="#cards"><li class="list-group-item rb-sidebar"> <a href="#scrollspy"><li class="list-group-item rb-sidebar">
Cards Scrollspy
</li></a> </li></a>
<a href="#scrollspy"><li class="list-group-item rb-sidebar"> <a href="#tables"><li class="list-group-item rb-sidebar">
Scrollspy Tables
</li></a> </li></a>
@ -125,6 +137,55 @@
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5"> <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<!--<p>This is the components page</p> <!--<p>This is the components page</p>
--> -->
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4">
<h2 id="alerts">Alerts</h2>
<p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
<p class="mb-0">This is a primary alert — check it out!</p>
</div>
<div class="col-12 alert alert-secondary" role="alert">
<p class="mb-0">This is a default alert — check it out!</p>
</div>
<div class="col-12 alert alert-success" role="alert">
<p class="mb-0">This is a success alert — check it out!</p>
</div>
<div class="col-12 alert alert-warning" role="alert">
<p class="mb-0">This is a warning alert — check it out!</p>
</div>
<div class="col-12 alert alert-danger" role="alert">
<p class="mb-0">This is a danger alert — check it out!</p>
</div>
<div class="col-12 alert alert-success" role="alert">
<h4 class="alert-header">Well done!!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4">
<h2 id="badges">Badges</h2>
<!--p class="text-muted">Some Description about badges.</p-->
</div>
<div class="row p-5 bg-light">
<div class="col-12">
<h2>Example heading <span class="badge badge-primary">New</span></h2>
</div>
<div class="col-12">
<h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
</div>
<div class="col-12">
<h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div id="buttons" class="mb-4"> <div id="buttons" class="mb-4">
<h2>Buttons</h2> <h2>Buttons</h2>
<!--p class="text-muted">Some Description about buttons.</p--> <!--p class="text-muted">Some Description about buttons.</p-->
@ -152,24 +213,66 @@
</div> </div>
</div> </div>
<div class="page-header mb-4 mt-5">
<h2 id="badges">Badges</h2>
<!--p class="text-muted">Some Description about badges.</p-->
</div>
<div class="row p-5 bg-light">
<div class="col-12">
<h2>Example heading <span class="badge badge-primary">New</span></h2>
</div> </div>
<div class="col-12"> <div class="component-wrapper my-5" id="">
<h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4> <div class="mb-4" id="cards">
<h2>Cards</h2>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
</div>
</div>
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="rb-link" onclick="return false;">Apply</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card">
<img class="card-img-top"
src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">A few things everyone can do now</h4>
<p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
<mark>contributing</mark>
</a> to help the I2P project grow.
</li>
<li class="list-group-item">Take a moment to
<mark>donate</mark>
to support further development.
</li>
<li class="list-group-item">Help
<mark>translate</mark>
the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
</li>
</ul>
<div class="card-body">
<a href="#" class="rb-link" onclick="return false;">View All</a>
</div>
</div>
</div> </div>
<div class="col-12">
<h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
</div> </div>
</div> </div>
<h1 id="forms"> </h1> </div>
<div class="page-header mb-4 mt-5"> <div class="component-wrapper my-5" id="">
<div class="page-header mb-4" id="forms">
<h2>Forms</h2> <h2>Forms</h2>
<!--p class="text-muted">Some Description about Forms.</p--> <!--p class="text-muted">Some Description about Forms.</p-->
</div> </div>
@ -192,7 +295,9 @@
</form> </form>
</div> </div>
<div id="header" class="mb-4 mt-5"> </div>
<div class="component-wrapper my-5" id="">
<div id="header" class="mb-4">
<h2>Header</h2> <h2>Header</h2>
<!--p class="text-muted">Some Description about buttons.</p--> <!--p class="text-muted">Some Description about buttons.</p-->
</div> </div>
@ -227,9 +332,75 @@
</nav> </nav>
</div> </div>
<div class="mt-5" id="tables"> </div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4 " id="pagination">
<h2>Pagination</h2>
<!--p class="text-muted">Some Description about pagination.</p-->
</div>
<div class="row bg-light p-5">
<nav aria-label="...">
<ul class="pagination m-0">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
<li class="page-item">
<span class="page-link rb-paginate-active">
2<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
<li class="page-item">
<a class="page-link" href="#" onclick="return false;">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="component-wrapper my-5" id="">
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row p-0 pt-5 bg-light d-none d-sm-none">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider mt-5 wi"></div>
<div class="row">
<div class="col-12 p-0">
<p class="mt-5 mb-5">
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
</p>
</div>
</div>
</div>
<div class="component-wrapper my-5" id="">
<div class="page-header mb-4" id="tables">
<h2>Tables</h2> <h2>Tables</h2>
<div class="row mt-5"> </div>
<div class="row bg-light p-5">
<span>Default</span> <span>Default</span>
<br /> <br />
<table class="table"> <table class="table">
@ -262,8 +433,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="row mt-5">
<span>Striped</span> <span>Striped</span>
<br /> <br />
<table class="table table-striped"> <table class="table table-striped">
@ -297,142 +466,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="mt-5" id="cards">
<h2>Cards</h2>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
</div>
</div>
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
<a href="#" class="rb-link" onclick="return false;">Apply</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">I2P</h4>
<p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card">
<img class="card-img-top"
src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">A few things everyone can do now</h4>
<p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
<mark>contributing</mark>
</a> to help the I2P project grow.
</li>
<li class="list-group-item">Take a moment to
<mark>donate</mark>
to support further development.
</li>
<li class="list-group-item">Help
<mark>translate</mark>
the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
</li>
</ul>
<div class="card-body">
<a href="#" class="rb-link" onclick="return false;">View All</a>
</div>
</div>
</div>
</div>
</div>
<h1 id="pagination"></h1>
<div class="page-header mb-4 mt-5">
<h2>Pagination</h2>
<!--p class="text-muted">Some Description about pagination.</p-->
</div>
<div class="row bg-light p-5">
<nav aria-label="...">
<ul class="pagination m-0">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
<li class="page-item">
<span class="page-link rb-paginate-active">
2<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
<li class="page-item">
<a class="page-link" href="#" onclick="return false;">Next</a>
</li>
</ul>
</nav>
</div>
<div class="page-header mb-4 mt-5">
<h2 id="alerts">Alerts</h2>
<p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
This is a primary alert—check it out!
</div> </div>
<div class="col-12 alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="col-12 alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="col-12 alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
</div>
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row p-0 pt-5 bg-light d-none d-sm-none">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider mt-5 wi"></div>
<div class="row">
<div class="col-12 p-0">
<p class="mt-5 mb-5">
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
</p>
</div>
</div>
</div> </div>
</div> </div>
<script src="/i2p-styleguide/assets/javascript/modernizr.min.js"></script> <script src="/i2p-styleguide/assets/javascript/modernizr.min.js"></script>

70
assets/styles/components.scss
View File

@ -1,3 +1,73 @@
.alert {
border-radius: 25px;
&-custom {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-primary {
color: #041f67;
background-color: #bbd6ff;
border-color: #a4bfff;
& hr {
border-top-color: #7691d9;
}
& .alert-link {
color: #000850;
}
}
&-success {
color: #075207;
background-color: #beffbe;
border-color: #a7f2a7;
& hr {
border-top-color: #7ac57a;
}
& .alert-link {
color: #003b00;
}
}
&-warning {
color: #bd8200;
background-color: #ffffa9;
border-color: #ffff92;
& hr {
border-top-color: #fff464;
}
& .alert-link {
color: #a66b00;
}
}
&-danger {
color: #9f1405;
background-color: #ffcbbc;
border-color: #ffb4a5;
& hr {
border-top-color: #ff8677;
}
& .alert-link {
color: #880000;
}
}
}
.background-primary { .background-primary {
background-color: $primary; background-color: $primary;
} }

1
assets/styles/main.scss
View File

@ -10,6 +10,7 @@
@import "state"; @import "state";
body { body {
color: $oc-gray-9;
font-family: $font; font-family: $font;
font-size: 1.2rem; font-size: 1.2rem;
} }

4
assets/styles/visuals.scss
View File

@ -1,7 +1,3 @@
p {
color: $oc-gray-9;
}
.color { .color {
height: 100px; height: 100px;
} }

8
components.md
View File

@ -4,13 +4,15 @@
permalink: /components/ permalink: /components/
sidebar: sidebar:
- buttons: Buttons - alerts: Alerts
- badges: Badges - badges: Badges
- buttons: Buttons
- cards: Cards
- forms: Forms - forms: Forms
- header: Header - header: Header
- tables: Tables - pagination: Pagination
- cards: Cards
- scrollspy: Scrollspy - scrollspy: Scrollspy
- tables: Tables
--- ---
This is the components page This is the components page

Write Preview
Loading…
Cancel
Save