diff options
4 files changed, 80 insertions, 0 deletions
| -rw-r--r-- | demo/index.html | 24 | ||||
| -rw-r--r-- | dist/spectre.css | 22 | ||||
| -rw-r--r-- | src/buttons.less | 4 | ||||
| -rw-r--r-- | src/navigation.less | 30 |
diff --git a/demo/index.html b/demo/index.html index 04909b1..18c3d5c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -329,6 +329,30 @@ </div> </div> </section> + <section class="breadcrumbs"> + <header class="text-center"><h4>breadcrumbs</h4></header> + <div class="columns"> + <div class="column"> + <ul class="breadcrumb"> + <li> + <a href="#"> + Home + </a> + </li> + <li> + <a href="#"> + Profile + </a> + </li> + <li> + <a href="#"> + Change avatar + </a> + </li> + </ul> + </div> + </div> + </section> </section> </body> </html>
\ No newline at end of file diff --git a/dist/spectre.css b/dist/spectre.css index 884ce1c..98cd410 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -1123,6 +1123,28 @@ textarea.form-input { border-bottom: 1px solid #efefef; margin: .5rem; } +.breadcrumb { + list-style: none; + margin: .5rem 0; + padding: 1.2rem; +} +.breadcrumb li { + display: inline-block; + margin: 0; +} +.breadcrumb li a { + text-decoration: none; +} +.breadcrumb li:last-child, +.breadcrumb li:last-child a { + color: #666666; + pointer-events: none; +} +.breadcrumb li:not(:last-child)::after { + content: "/"; + padding: 0 .4rem; + color: #c5c5c5; +} .clearfix::after, .container::after, .columns::after { diff --git a/src/buttons.less b/src/buttons.less index e04aaa9..43e4e7d 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -166,6 +166,10 @@ button { } } + .btn-groups { + + } + // TODO: Button with icons // TODO: Button groups }
\ No newline at end of file diff --git a/src/navigation.less b/src/navigation.less index 8fbcc0f..2e94d30 100644 --- a/src/navigation.less +++ b/src/navigation.less @@ -1 +1,31 @@ // Navigation +.breadcrumb { + list-style: none; + margin: .5rem 0; + padding: 1.2rem; + + li { + display: inline-block; + margin: 0; + + a { + text-decoration: none; + } + + &:last-child { + &, + a { + color: lighten(@body-font-color, 20%); + pointer-events: none; + } + } + + &:not(:last-child) { + &::after { + content: "/"; + padding: 0 .4rem; + color: @control-color; + } + } + } +} |