From cc2c46c583451fef05a262cd63d023399ed3cbb7 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 6 Apr 2016 10:18:21 +0800 Subject: update buttons, forms, labels, tables, tooltips and example docs --- src/buttons.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/buttons.less') diff --git a/src/buttons.less b/src/buttons.less index ef95627..47f10ff 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -1,6 +1,5 @@ // Buttons -.btn, -button { +.btn { display: inline-block; height: 3.2rem; padding: .7rem 1.5rem; @@ -53,7 +52,8 @@ button { } } - &[disabled] { + &[disabled], + .disabled { opacity: .5; cursor: default; } -- cgit v1.3.1-23-gd82d From d01d23d1a60807fb5453c4a250a6544652436f60 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 6 Apr 2016 14:20:32 +0800 Subject: add cards code and update new demo images --- demo/img/apple-el-capitan.jpg | Bin 347819 -> 0 bytes demo/img/osx-el-capitan-2.jpg | Bin 0 -> 122992 bytes demo/img/osx-el-capitan.jpg | Bin 0 -> 148156 bytes demo/img/osx-yosemite-2.jpg | Bin 0 -> 145142 bytes demo/img/osx-yosemite.jpg | Bin 0 -> 142436 bytes demo/index.html | 69 ++++++++++++++++++++++++++++++++++--- dist/spectre.css | 78 +++++++++++++++++++++++++++++++++--------- spectre.less | 2 +- src/buttons.less | 10 +++--- src/cards.less | 47 +++++++++++++++++++++++++ src/navigation.less | 4 +-- 11 files changed, 182 insertions(+), 28 deletions(-) delete mode 100644 demo/img/apple-el-capitan.jpg create mode 100644 demo/img/osx-el-capitan-2.jpg create mode 100644 demo/img/osx-el-capitan.jpg create mode 100644 demo/img/osx-yosemite-2.jpg create mode 100644 demo/img/osx-yosemite.jpg create mode 100644 src/cards.less (limited to 'src/buttons.less') diff --git a/demo/img/apple-el-capitan.jpg b/demo/img/apple-el-capitan.jpg deleted file mode 100644 index f469599..0000000 Binary files a/demo/img/apple-el-capitan.jpg and /dev/null differ diff --git a/demo/img/osx-el-capitan-2.jpg b/demo/img/osx-el-capitan-2.jpg new file mode 100644 index 0000000..6e56bff Binary files /dev/null and b/demo/img/osx-el-capitan-2.jpg differ diff --git a/demo/img/osx-el-capitan.jpg b/demo/img/osx-el-capitan.jpg new file mode 100644 index 0000000..7337afb Binary files /dev/null and b/demo/img/osx-el-capitan.jpg differ diff --git a/demo/img/osx-yosemite-2.jpg b/demo/img/osx-yosemite-2.jpg new file mode 100644 index 0000000..0b5befa Binary files /dev/null and b/demo/img/osx-yosemite-2.jpg differ diff --git a/demo/img/osx-yosemite.jpg b/demo/img/osx-yosemite.jpg new file mode 100644 index 0000000..80b1cb1 Binary files /dev/null and b/demo/img/osx-yosemite.jpg differ diff --git a/demo/index.html b/demo/index.html index 54801fe..767a41a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -243,7 +243,7 @@
-
+
@@ -400,7 +400,10 @@

media

- + +
+
+
@@ -800,20 +803,21 @@

This is the content inside the modal.

-

Lorem ipsum

+

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

-

Cupcake ipsum

+

Cupcake ipsum

Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.

De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.

+

Candy ipsum

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.

@@ -831,6 +835,63 @@
+
+

cards

+
+
+
+
+ +
+
+

Microsoft

+
Software and hardware
+
+
+ Empower every person and every organization on the planet to achieve more. +
+
+ Do +
+
+
+
+
+
+

Apple

+
Hardware and software
+
+
+ +
+
+ To make a contribution to the world by making tools for the mind that advance humankind. +
+
+
+ + + +
+
+
+
+
+
+
+

Google

+
Software and hardware
+
+
+ Organize the world’s information and make it universally accessible and useful. +
+
+ Ad +
+
+
+
+
\ No newline at end of file diff --git a/dist/spectre.css b/dist/spectre.css index d197a20..5f698ed 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -804,21 +804,16 @@ ol ol { margin-top: -0.5rem; } .btn-group { - display: inline-block; - vertical-align: middle; -} -.btn-group::after { - content: ""; - display: table; - clear: both; -} -.btn-group::after { - content: ""; - display: table; - clear: both; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; } .btn-group .btn { - float: left; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } .btn-group .btn:first-child:not(:last-child) { border-top-right-radius: 0; @@ -835,6 +830,12 @@ ol ol { border-bottom-left-radius: 0; z-index: 99; } +.btn-group.btn-group-block { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} .form-group:not(:last-child) { margin-bottom: 1rem; } @@ -1179,6 +1180,51 @@ textarea.form-input { overflow: hidden; text-overflow: ellipsis; } +.card { + display: block; + text-align: left; + margin: 0; + padding: 0; + border-radius: .3rem; + background-color: #fff; + z-index: 999; + box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3); +} +.card .card-header, +.card .card-image, +.card .card-content, +.card .card-footer { + padding: 1.5rem 1.5rem 0 1.5rem; +} +.card .card-header:last-child, +.card .card-image:last-child, +.card .card-content:last-child, +.card .card-footer:last-child { + padding-bottom: 1.5rem; +} +.card .card-image { + padding-left: 0; + padding-right: 0; +} +.card .card-image:first-child { + padding-top: 0; +} +.card .card-image:first-child img { + border-top-left-radius: .3rem; + border-top-right-radius: .3rem; +} +.card .card-title { + margin-top: 0; + margin-bottom: .5rem; + font-size: 1.6em; + line-height: 1; +} +.card .card-meta { + margin-top: 0; + margin-bottom: 0; + font-size: 1em; + color: #b3b3b3; +} .chip { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -1517,9 +1563,9 @@ textarea.form-input { .tab.tab-block .tab-item { float: none; -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; text-align: center; } .toast { diff --git a/spectre.less b/spectre.less index 288c031..3332c4b 100644 --- a/spectre.less +++ b/spectre.less @@ -19,6 +19,7 @@ // Components @import 'src/avatars.less'; @import 'src/badges.less'; +@import 'src/cards.less'; @import 'src/chips.less'; @import 'src/fileicons.less'; @import 'src/labels.less'; @@ -27,7 +28,6 @@ @import 'src/navigation.less'; @import 'src/toasts.less'; @import 'src/tooltips.less'; -//@import 'src/cards.less'; //@import 'src/animations.less'; // Utility classes diff --git a/src/buttons.less b/src/buttons.less index 47f10ff..29c8e18 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -169,12 +169,10 @@ } .btn-group { - display: inline-block; - vertical-align: middle; - .clearfix(); + display: inline-flex; .btn { - float: left; + flex: 1 0 auto; &:first-child:not(:last-child) { border-top-right-radius: 0; @@ -192,4 +190,8 @@ z-index: 99; } } + + &.btn-group-block { + display: flex; + } } \ No newline at end of file diff --git a/src/cards.less b/src/cards.less new file mode 100644 index 0000000..3a9abc5 --- /dev/null +++ b/src/cards.less @@ -0,0 +1,47 @@ +// Cards +.card { + display: block; + text-align: left; + margin: 0; + padding: 0; + border-radius: .3rem; + background-color: #fff; + z-index: 999; + .shadow; + + .card-header, + .card-image, + .card-content, + .card-footer { + padding: 1.5rem 1.5rem 0 1.5rem; + + &:last-child { + padding-bottom: 1.5rem; + } + } + .card-image { + padding-left: 0; + padding-right: 0; + + &:first-child { + padding-top: 0; + + img { + border-top-left-radius: .3rem; + border-top-right-radius: .3rem; + } + } + } + .card-title { + margin-top: 0; + margin-bottom: .5rem; + font-size: 1.6em; + line-height: 1; + } + .card-meta { + margin-top: 0; + margin-bottom: 0; + font-size: 1em; + color: lighten(@body-font-color, 50%); + } +} \ No newline at end of file diff --git a/src/navigation.less b/src/navigation.less index 2e0436f..d119099 100644 --- a/src/navigation.less +++ b/src/navigation.less @@ -72,10 +72,8 @@ .tab-item { float: none; - flex: 1; + flex: 1 0 auto; text-align: center; } } } - -// TODO: Tabs with icons -- cgit v1.3.1-23-gd82d