Commit 96e8abe3 authored by Anxhelo Lushka's avatar Anxhelo Lushka
Browse files

Added a few code snippets

parent a60c81e9
<div class="col page-header mb-4">
<div class="align-horizontally flex-space-between">
<h4 id="alerts">Alerts</h4>
<p class="toggle m-0 p-0">Show Code Snippets
<div class="align-horizontally flex-space-between">
<h4 id="alerts">Alerts</h4>
<p class="toggle m-0 p-0">Show Code Snippets
<label class="switch">
<input class="snippets" type="checkbox">
<span class="slider round"></span>
<input class="snippets-buttons" type="checkbox">
<span class="slider round"></span>
</label>
</p>
</div>
<span>
<div class="alert alert-tip mb-3" role="alert">
These are Web guidelines. For Android, please refer to the <a class="underline" href="https://material.io/design/typography/the-type-system.html" target="_blank" rel="noopener">Material Design guidelines</a>.
</div>
<span>
<div class="alert alert-tip mb-3" role="alert">
These are Web guidelines. For Android, please refer to the <a class="underline" href="https://material.io/design/typography/the-type-system.html" target="_blank" rel="noopener">Material Design guidelines</a>.
</div>
</span>
<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
</span>
<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Generic</h5>
<div class="bg-smaller">
<div class="alert alert-generic" role="alert">
<button class="btn-close" type="button" aria-label="Close"><span aria-hidden="true">×</span></button>
<i class="material-icons">info</i> Contact Link created
</div>
</div>
<p class="pt-3">Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.</p>
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Generic</h5>
<div class="bg-smaller">
<div class="alert alert-generic" role="alert">
<button class="btn-close" type="button" aria-label="Close"><span aria-hidden="true">×</span></button>
<i class="material-icons">info</i> Contact Link created
</div>
<div class="arrow_box mt-4">
<pre class="p-3 prettyprint rb-code code-snippet-2">
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-generic {
color: #2E2E2E;
background-color: #FFF1DE;
border-color: transparent;}
}
</pre>
</div>
</div>
<p class="pt-3">Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.</p>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Success</h5>
<div class="bg-smaller">
<div class="alert alert-success" role="alert">
<i class="material-icons">check</i> Contact Link created
</div>
</div>
<p class="pt-3">Inform users when actions are successfully completed.</p>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Success</h5>
<div class="bg-smaller">
<div class="alert alert-success" role="alert">
<i class="material-icons">check</i> Contact Link created
</div>
<div class="arrow_box mt-4">
<pre class="p-3 prettyprint rb-code code-snippet-2">
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-success {
color: #2E2E2E;
background-color: #B4E76F;
border-color: transparent;}
}
</pre>
</div>
</div>
<p class="pt-3">Inform users when actions are successfully completed.</p>
</div>
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Warning</h5>
<div class="bg-smaller">
<div class="alert alert-warning" role="alert">
<i class="material-icons orange-icon">warning</i> Do not share this information with anyone!
</div>
</div>
<p class="pt-3">Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.</p>
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Warning</h5>
<div class="bg-smaller">
<div class="alert alert-warning" role="alert">
<i class="material-icons orange-icon">warning</i> Do not share this information with anyone!
</div>
<div class="arrow_box mt-4">
<pre class="p-3 prettyprint rb-code code-snippet-2">
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-warning {
color: #1F1F1F;
background-color: #FED69F;
border-color: transparent;}
}
</pre>
</div>
</div>
<p class="pt-3">Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.</p>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Error</h5>
<div class="bg-smaller">
<div class="alert alert-error" role="alert">
<button class="btn-close" type="button" aria-label="Close"><span aria-hidden="true">×</span></button>
<i class="material-icons red-icon">error</i> Oops. Something went wrong.
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Error</h5>
<div class="bg-smaller">
<div class="alert alert-error" role="alert">
<button class="btn-close" type="button" aria-label="Close"><span aria-hidden="true">×</span></button>
<i class="material-icons red-icon">error</i> Oops. Something went wrong.
</div>
<div class="arrow_box mt-4">
<pre class="p-3 prettyprint rb-code code-snippet-2">
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-error {
color: #FFFFFF;
background-color: #DB3B21;
border-color: transparent;}
}
</pre>
</div>
</div>
</div>
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Tip</h5>
<div class="bg-smaller">
<div class="alert alert-tip" role="alert">
For Android, please refer to the <a class="underline" href="https://material.io/design/typography/the-type-system.html" target="_blank" rel="noopener">Material Design guidelines</a>.
</div>
</div>
<p class="pt-3">Give a tip and contextual information helpful for the user.</p>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<h5 class="pb-3">Tip</h5>
<div class="bg-smaller">
<div class="alert alert-tip" role="alert">
For Android, please refer to the <a class="underline" href="https://material.io/design/typography/the-type-system.html" target="_blank" rel="noopener">Material Design guidelines</a>.
</div>
<div class="arrow_box mt-4">
<pre class="p-3 prettyprint rb-code code-snippet-2">
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-error {
color: #2E2E2E;
background-color: #E4F0FB;
border-color: transparent;}
}
</pre>
</div>
</div>
<p class="pt-3">Give a tip and contextual information helpful for the user.</p>
</div>
</div>
......@@ -3,7 +3,7 @@
<h4>Buttons</h4>
<p class="toggle m-0 p-0">Show Code Snippets
<label class="switch">
<input class="snippets" type="checkbox">
<input class="snippets-buttons" type="checkbox">
<span class="slider round"></span>
</label>
</p>
......@@ -17,34 +17,47 @@
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<h5 class="pb-3">Primary</h5>
<div class="bg-box">
<div class="row text-center">
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3 text-center">Primary Big</p>
<button class="button btn-primary-big mb-4">Primary Big</button>
<button type="button" disabled class="button btn-primary-big">Disabled</button>
</div>
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3 text-center">Primary</p>
<button class="button btn-primary mt-2 mb-4">Primary</button>
<button type="button" disabled class="button btn-primary mt-3">Disabled</button>
</div>
</div>
<div class="arrow_box mt-4">
<pre class="p-3 prettyprint rb-code code-snippet-2">
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-generic {
color: #2E2E2E;
background-color: #FFF1DE;
border-color: transparent;}
}
</pre>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<h5 class="pb-3">Default</h5>
<div class="bg-buttons">
<div class="row text-center">
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3 text-center">Default Big</p>
<button class="button btn-default-primary-big mb-4">Default Big</button>
<button type="button" disabled class="button btn-default-primary-big">Disabled</button>
</div>
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3 text-center">Default</p>
<button class="button btn-default-primary mt-2 mb-4">Default</button>
<button type="button" disabled class="button btn-default-primary mt-3">Disabled</button>
......@@ -55,15 +68,15 @@
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<h5 class="pb-3">Primary + Icon</h5>
<div class="bg-box">
<div class="row text-center">
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3 text-center">Primary Big</p>
<button class="button btn-primary-big mb-4"><i class="material-icons pr-1">cloud_download</i> Primary Big</button>
</div>
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3 text-center">Primary</p>
<button class="button btn-primary mt-2 mb-4"><i class="material-icons pr-1">cloud_download</i> Primary</button>
</div>
......@@ -71,15 +84,15 @@
</div>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<h5 class="pb-3">Default + Icon</h5>
<div class="bg-buttons">
<div class="row text-center">
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3">Default Big</p>
<button class="button btn-default-primary-big mb-4"><i class="material-icons pr-1">cloud_download</i> Default Big</button>
</div>
<div class="col-md-6 col-sm-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<p class="pb-3">Default</p>
<button class="button btn-default-primary mt-2 mb-4"><i class="material-icons pr-1">cloud_download</i> Default</button>
</div>
......@@ -89,11 +102,11 @@
</div>
<div class="row col-md-12 pt-3 p-0">
<div class="col-md-6 col-xs-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<h5 class="pb-3">Primary Dropdown</h5>
<div class="bg-box">
<div class="row text-center mt-4 mb-4">
<div class="col-md-6 col-sm-12">
<div class="col-lg-6 col-md-12 col-sm-12">
<p class="pb-3 text-center">Primary Big</p>
<div class="dropdown mb-4">
<button class="button btn btn-dropdown-big dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
......@@ -105,7 +118,7 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-lg-6 col-md-12 col-sm-12">
<p class="pb-3 text-center">Primary</p>
<div class="dropdown mb-4">
<button class="button btn btn-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
......@@ -121,11 +134,11 @@
</div>
</div>
<div class="col-md-6 col-xs-12 mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-4">
<h5 class="pb-3">Default Dropdown</h5>
<div class="bg-buttons">
<div class="row text-center mt-4 mb-4">
<div class="col-md-6 col-sm-12">
<div class="col-lg-6 col-md-12 col-sm-12">
<p class="pb-3 text-center">Default Big</p>
<div class="dropdown mb-4">
<button class="button btn btn-default-dropdown-big dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
......@@ -137,7 +150,7 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-lg-6 col-md-12 col-sm-12">
<p class="pb-3 text-center">Default</p>
<div class="dropdown mb-4">
<button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
......
......@@ -19,7 +19,7 @@ $(".snippets").click(function() {
});
$(".snippets-buttons").click(function() {
$(this).closest("div").find(".code-snippet-2").toggle();
$(this).closest("div").closest(".row").find(".code-snippet-2").toggle();
$(this).closest("div").closest(".row").find(".arrow_box").toggle();
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment