Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev tabs #6

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Dev tabs #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fa14788
dev-add new feature as tabs
birth-mark May 19, 2016
f50dd60
added tabs and buttons with icon
birth-mark May 27, 2016
8b9ed93
added tabs and buttons with icon
birth-mark May 27, 2016
16c4c66
added input-search with icon
birth-mark May 30, 2016
f9da51e
changed size
birth-mark Jun 13, 2016
2fda721
remove double icons in buttons with icon
birth-mark Jun 14, 2016
304844e
tables added size to tr with inputs
birth-mark Jun 15, 2016
86c4288
add buttonX
birth-mark Jul 6, 2016
d5592bc
added table with sort and input search
birth-mark Jul 8, 2016
6a752cc
added new paddings
birth-mark Jul 13, 2016
cbcd52c
changed semantic of tabs
birth-mark Jul 14, 2016
eae4f0c
change semantic of block with search input and fix border-radius of b…
birth-mark Jul 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions docs-src/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,38 @@ <h3>Accented buttons</h3>
</div>
</section>

<section>
<h3>Buttons with icons</h3>

<div class="example-inline">
<div class="example">
<button class="icon before pencil-square-o">Edit Event</button>
</div>
</div>

<div class="example-inline">
<div class="example">
<button class="icon after plus-circle add success accented">Add Event</button>
</div>
</div>

<div class="example-inline">
<div class="example">
<a class="icon before share button primary" href="#">Share Event</a>
</div>
</div>

<div class="example-inline">
<div class="example">
<a class="icon after trash add button danger" href="#">Delete Event</a>
</div>
</div>

<p>See more about icon in <a href="icons.html">FontAwesome</a> </p>


</section>

<section>
<h3>Button sizes</h3>

Expand Down
30 changes: 25 additions & 5 deletions docs-src/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,27 @@ <h3>Text input</h3>
</div>
</section>

<section>
<h3>Input search</h3>

<div class="example-inline">
<div class="example">
<div class="search">
<input type="search">
<button class="icon search after"></button>
</div>
</div>
</div>
<div class="example-inline">
<div class="example">
<div class="search">
<input type="search">
<button class="search-result-buttonX"></button>
<button class="icon search after"></button>
</div>
</div>
</div>

<section>
<h3>Disabled state</h3>

Expand Down Expand Up @@ -168,15 +189,15 @@ <h3>Radiobutton</h3>
<h3>Fieldset</h3>

<div class="example">
<fieldset>
<fieldset class="block">
<legend>User details</legend>
<label>
Name<br>
Name
<input type="text" name="user_name">
</label>
<br>

<label>
Email<br>
Email
<input type="text" name="user_email">
</label>
</fieldset>
Expand Down Expand Up @@ -217,5 +238,4 @@ <h3>Customizing inputs</h3>
@include input-style(#f200ff);
}</code></pre>
</section>

{% endblock %}
2 changes: 2 additions & 0 deletions docs-src/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link rel="stylesheet" href="./css/fa-icons-classes.css">

<script type="text/javascript" src="./vendor/highlight.pack.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="./vendor/themes/color-brewer.css">

<link rel="stylesheet" href="./css/docs.css">
Expand Down Expand Up @@ -42,6 +43,7 @@ <h1 class="logo">
<li><a href="./blocks.html">Blocks</a></li>
<li><a href="./notifications.html">Notifications</a></li>
<li><a href="./dropdown.html">Dropdown</a></li>
<li><a href="./tabs.html">Tabs</a></li>
</ul>
</li>
<li><a href="./icons.html">FontAwesome</a></li>
Expand Down
40 changes: 39 additions & 1 deletion docs-src/tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,44 @@ <h3>Hoverable</h3>
</div>
</section>

<section>
<h3>Table with sort</h3>

<div class="example">
<table class="items striped hoverable sort">
<thead>
<tr>
<th class="icon unsorted after">Name</th>
<th class="icon sort-up after">Role </th>
<th class="icon sort-down after">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andrey</td>
<td>admin</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Bart</td>
<td>user</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Barak</td>
<td>admin</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Lisa</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</section>

<section>
<h3>Full table example</h3>

Expand All @@ -124,7 +162,7 @@ <h3>Full table example</h3>
<th>Role</th>
<th>Email</th>
<th class="actions">
<a href="#" class="button success">Add user</a>
<a href="#" class="add button success">Add user</a>
</th>
</tr>
</thead>
Expand Down
70 changes: 70 additions & 0 deletions docs-src/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{% extends 'layout.html' %}

{% block head %}<h2>CSS | Tabs</h2>{% endblock %}

{% block content %}
<section>
<h3>Simple tabs</h3>

<div class="example">
<div class="tabs">
<nav>
<span class="active">first tab</span>
<span>second tab</span>
<span>third tab</span>
</nav>
<div class="active">
<table class="items">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andrey</td>
<td>admin</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Bart</td>
<td>user</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Barak</td>
<td>admin</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
<div>
<p>Aenean rhoncus odio vel massa malesuada, ac porta risus convallis.</p>
</div>
<div>
<p>Duis auctor nulla sit amet diam tristique, in varius ante pretium. </p>
</div>
</div>
</div>

<script type="text/javascript">

$(document).ready(function(){
$(".tabs nav span").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+2;
$(".tabs nav span.active").removeClass("active");
$(this).addClass("active");
$(".tabs div.active").removeClass("active");
$(".tabs div:nth-child("+nthChild+")").addClass("active");
}
});
});
</script>
</section>

{% endblock %}
37 changes: 25 additions & 12 deletions lib/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,19 @@ $ae-btn-color-primary: $ae-color-primary !default;
$ae-btn-color-success: $ae-color-success !default;
$ae-btn-color-danger: $ae-color-danger !default;
$ae-btn-color-highlight: $ae-color-highlight !default;
$btn-icon: 'plus' !default;

@mixin button-style($color) {
border-color: $color;
color: darken($color, 5%);

background-color: rgba($color, 0.03);
color: $color;

&:hover {
background-color: rgba($color, 0.08);
color: darken($color, 5%);
text-decoration: none;
background-color: $color;
color: #fff;
border-bottom: none;
border: 1px solid $color;
border-radius: $ae-btn-border-radius;
}

&:active, &:focus {
Expand All @@ -38,18 +41,29 @@ $ae-btn-color-highlight: $ae-color-highlight !default;
}

@mixin button-accented($color) {
color: lighten($color, 55%);
outline: none;
color: #fff;
background: $color;

$right-color: lighten(adjust-hue($color, -10%), 15%);
&:hover {
border: none;
background: lighten($color, 10%);
}

background-image: linear-gradient(to right, $color, $right-color);
&:active {
background-color: darken($color, 20%);
}
}

a.button{
@include button-style($ae-btn-color-normal);
}

.button {
display: inline-block;

margin: $ae-btn-margin;
padding: $ae-btn-padding-x $ae-btn-padding-y;
padding: calc(#{$ae-btn-padding-x} + 1px) calc(#{$ae-btn-padding-y} + 1px);

border: 1px solid $ae-btn-color-normal;
border-radius: $ae-btn-border-radius;
Expand All @@ -66,13 +80,12 @@ $ae-btn-color-highlight: $ae-color-highlight !default;
cursor: pointer;

background: transparent;

@include button-style($ae-btn-color-normal);

&.accented {
@include button-accented($ae-btn-color-normal);

padding: calc(#{$ae-btn-padding-x} + 1px) calc(#{$ae-btn-padding-y} + 1px);
padding: calc(#{$ae-btn-padding-x} + 2px) calc(#{$ae-btn-padding-y} + 2px);
border: none;

background-position: 0 100%;
Expand All @@ -82,7 +95,7 @@ $ae-btn-color-highlight: $ae-color-highlight !default;
background-size: 200% auto;
}
}

&.primary {
@include button-style($ae-btn-color-primary);
&.accented { @include button-accented($ae-btn-color-primary); }
Expand Down
16 changes: 11 additions & 5 deletions lib/_fa-icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$font-path: "/fonts" !default;
$fa-version: "4.5.0" !default;
$icon-padding: 3px;
$icon-padding: 8px;

$icons: (
500px: "\f26e",
Expand Down Expand Up @@ -699,32 +699,38 @@ $icons: (
youtube-square: "\f166"
);

@mixin text-antialiased() {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

@mixin icon-font {
font-family: FontAwesome;
font-weight: normal;
text-rendering: auto; // optimizelegibility throws things off #1094

@include text-antialiased;
@include text-antialiased();
transform: translate(0, 0); // ensures no half-pixel rendering in firefox
}

@mixin icon-pseudo($icon, $size: inherit) {
@mixin icon-pseudo($icon, $size) {
$cont: map-get($icons, $icon);

display: inline-block;
content: "#{$cont}";

@include icon-font;

font-size: $size;
font-size: $size ;
line-height: 1.2em;
}


@mixin icon-before($icon, $size: inherit, $padding: $icon-padding) {
&::before {
margin-right: $padding;
text-decoration: underline; // Hack for IE 8-11 to remove underline in links (1)
@include icon-pseudo($icon, $size);
@include icon-pseudo($icon, $size );
}

&::before { text-decoration: none; } // Hack for IE 8-11 to remove underline in links (2)
Expand Down
Loading