Skip to content

Commit

Permalink
Removed fancy breadcrumbs options, variables and mixins to help simpl…
Browse files Browse the repository at this point in the history 
…ify the breadcrumbs module
  • Loading branch information
@sebnitu
sebnitu committed Dec 24, 2016
1 parent 9636fab commit 35c7e66
Show file tree
Hide file tree
Showing 6 changed files with 4 additions and 565 deletions.
115 changes: 0 additions & 115 deletions docs/assets/css/baseweb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2401,121 +2401,6 @@ fieldset[disabled] .input {
border-radius: 3px;
}

.breadcrumb.fancy {
display: block;
margin: 1em 0;
font-size: 1em;
}

.breadcrumb.fancy ul,
.breadcrumb.fancy ol {
display: table;
margin: 0;
overflow: hidden;
vertical-align: middle;
list-style: none;
background: #e8f3fa;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
}

.breadcrumb.fancy ul:after,
.breadcrumb.fancy ol:after {
content: none;
display: none;
clear: none;
}

.breadcrumb.fancy li {
display: table-cell;
margin: 0;
float: none;
}

.breadcrumb.fancy li:first-child a, .breadcrumb.fancy li:first-child .item {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

.breadcrumb.fancy li:after {
content: none;
display: none;
}

.breadcrumb.fancy li a,
.breadcrumb.fancy li .item {
position: relative;
display: block;
padding: 0.5em 0.5em 0.5em 2em;
color: #303030;
white-space: nowrap;
background: #e8f3fa;
border: 0 none;
-webkit-transition: background 0.25s linear;
transition: background 0.25s linear;
}

.breadcrumb.fancy li a span,
.breadcrumb.fancy li .item span {
position: relative;
z-index: 2;
}

.breadcrumb.fancy li a:after,
.breadcrumb.fancy li .item:after {
width: 2em;
height: 2em;
content: '';
position: absolute;
z-index: 1;
top: 50%;
right: -1em;
margin: -1em 0 0 0;
background: #e8f3fa;
background-clip: padding-box;
border-top: 1px solid rgba(0, 0, 0, 0.15);
border-right: 1px solid rgba(0, 0, 0, 0.15);
-webkit-transition: background 0.25s linear;
transition: background 0.25s linear;
border-radius: 0 5px 0 100%;
-webkit-transform: rotate(45deg) skew(10deg, 10deg);
-ms-transform: rotate(45deg) skew(10deg, 10deg);
transform: rotate(45deg) skew(10deg, 10deg);
}

.breadcrumb.fancy li a:hover,
.breadcrumb.fancy li .item:hover {
background: #d3e8f5;
}

.breadcrumb.fancy li a:hover:after,
.breadcrumb.fancy li .item:hover:after {
background: #d3e8f5;
}

.breadcrumb.fancy li:first-child a, .breadcrumb.fancy li:first-child .item {
padding: 0.5em 0.5em 0.5em 1em;
}

.breadcrumb.fancy li:last-child a, .breadcrumb.fancy li:last-child .item {
padding: 0.5em 1em 0.5em 2em;
}

.breadcrumb.fancy li:last-child a:after, .breadcrumb.fancy li:last-child .item:after {
content: none;
display: none;
}

.breadcrumb.fancy li .active,
.breadcrumb.fancy li .active:hover {
background: #ffffff;
}

.breadcrumb.fancy li .active:after,
.breadcrumb.fancy li .active:hover:after {
background: #ffffff;
}

/*==============================================================================
@Dropdowns - scss/blocks/_dropdowns.scss
==============================================================================*/
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/css/baseweb.min.css
View file

Large diffs are not rendered by default.

168 changes: 0 additions & 168 deletions docs/docs/blocks/breadcrumbs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,30 +56,6 @@ You also have the `.wrapped` class to add simple wrapper styles to your breadcru
</nav>
</div>

## Fancy Breadcrumbs

If you have your `$breadcrumbs('classes-fancy')` set to `true`, then you'll have the fancy class and fancy modifiers available for styling breadcrumbs. Fancy classes are used to create more complex breadcrumb styling.

```html
<nav class="breadcrumb fancy">
<ol>
<li><a>Home</a></li>
...
</ol>
</nav>
```

<div class="demo">
<nav class="breadcrumb fancy">
<ol>
<li><a><span>Home</span></a></li>
<li><a><span>Some Page</span></a></li>
<li><a><span>Some Category</span></a></li>
<li><span class="active item"><span>Current Page</span></span></li>
</ol>
</nav>
</div>

<section class="subsection subsection-variables" markdown="1">

# Breadcrumb Variables
Expand Down Expand Up @@ -168,91 +144,6 @@ Breadcrumb variables are encompassed within the `$breadcrumbs` map and are used
<td><code>$breadcrumbs('delimiter-end')</code></td>
<td><code>false</code></td>
</tr>

<tr>
<th colspan="2">Fancy Breadcrumbs</th>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'margin')</code></td>
<td><code>1em 0</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'padding')</code></td>
<td><code>0.5em 0.5em 0.5em 2em</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'padding-first')</code></td>
<td><code>0.5em 0.5em 0.5em 1em</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'padding-last')</code></td>
<td><code>0.5em 1em 0.5em 2em</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'font-size')</code></td>
<td><code>1em</code></td>
</tr>

<tr>
<td><code>$breadcrumbs('fancy' 'color')</code></td>
<td><code>$color-dark</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'color-hover')</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'color-active')</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'text-shadow')</code></td>
<td><code>null</code></td>
</tr>

<tr>
<td><code>$breadcrumbs('fancy' 'background')</code></td>
<td><code>mix($blue, $white, 10%)</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'background-hover')</code></td>
<td><code>darken(mix($blue, $white, 10%), 5%)</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'background-active')</code></td>
<td><code>mix($blue, $white, 2%)</code></td>
</tr>

<tr>
<td><code>$breadcrumbs('fancy' 'border')</code></td>
<td><code>1px solid</code> <code>rgba($black, 0.1)</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'border-radius')</code></td>
<td><code>$border-radius</code></td>
</tr>

<tr>
<td><code>$breadcrumbs('fancy' 'delimiter-border')</code></td>
<td><code>1px solid</code> <code>rgba($black, 0.15)</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'delimiter-radius')</code></td>
<td><code>0 5px 0 100%</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'delimiter-rotate')</code></td>
<td><code>45deg</code></td>
</tr>
<tr>
<td><code>$breadcrumbs('fancy' 'delimiter-skew')</code></td>
<td><code>(10deg, 10deg)</code></td>
</tr>

<tr>
<td><code>$breadcrumbs('fancy' 'transition')</code></td>
<td><code>background 0.25s linear</code></td>
</tr>
</table>

<div class="notice yellow" id="var-note-1" markdown="1">
Expand Down Expand Up @@ -381,65 +272,6 @@ For this example, we'll use the default `.breadcrumb` class but use the `add-bre

</li>

<li markdown="1">

## add-breadcrumb-fancy

Creates fancy breadcrumb styles.

```scss
@include add-breadcrumb-fancy( $options: () );
```

<table class="table table-docs">
<tr>
<th>Variable</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td><code>$options</code></td>
<td>Map</td>
<td><code>$breadcrumbs()</code></td>
</tr>
</table>

### Example Usage

```scss
.breadcrumb.custom-fancy {
@include add-breadcrumb-fancy((
'fancy' : (
'color' : $white,
'text-shadow' : 0 1px 1px rgba($black, 0.25),
'border' : 1px solid $green-darker,
'background' : $green,
'background-hover' : $green-dark,
'background-active' : $green-darker,
'delimiter-border' : 1px solid $green-darker,
'delimiter-skew' : (0),
)
));
}
```

```html
<nav class="breadcrumb custom-fancy">...</nav>
```

<div class="demo">
<nav class="breadcrumb custom-fancy">
<ol>
<li><a><span>Home</span></a></li>
<li><a><span>Some Page</span></a></li>
<li><a><span>Some Category</span></a></li>
<li><span class="active item"><span>Current Page</span></span></li>
</ol>
</nav>
</div>

</li>

</ul>

</section>
Loading

0 comments on commit 35c7e66

Please sign in to comment.