src/scss/toolkit/ui/pagination.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/ui/pagination.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,128 +1,128 @@
/**
- * @copyright Copyright 2010-2013, The Titon Project
- * @license http://opensource.org/licenses/bsd-license.php
- * @link http://titon.io
+ * @copyright 2010-2013, The Titon Project
+ * @license http://opensource.org/licenses/bsd-license.php
+ * @link http://titon.io
*/
@import "../common";
/**
- * <nav class="pagination small pill">
- * <ul>
- * <li><a href="" class="button">Previous</a></li>
- * <li><a href="" class="button">1</a></li>
- * <li><a href="" class="button">2</a></li>
- * <li class="active"><a href="" class="button">3</a></li>
- * <li><a href="" class="button">4</a></li>
- * <li><a href="" class="button">5</a></li>
- * <li class="disabled"><a href="" class="button">Next</a></li>
- * </ul>
- * </nav>
+ * <nav class="pagination small pill">
+ * <ul>
+ * <li><a href="" class="button">Previous</a></li>
+ * <li><a href="" class="button">1</a></li>
+ * <li><a href="" class="button">2</a></li>
+ * <li class="active"><a href="" class="button">3</a></li>
+ * <li><a href="" class="button">4</a></li>
+ * <li><a href="" class="button">5</a></li>
+ * <li class="disabled"><a href="" class="button">Next</a></li>
+ * </ul>
+ * </nav>
*/
.pagination {
- display: block;
- margin: $margin 0;
+ display: block;
+ margin: $margin 0;
- ul,
- li {
- @include reset-inline-block;
- list-style: none;
- }
+ ul,
+ li {
+ @include reset-inline-block;
+ list-style: none;
+ }
- li {
- float: left;
- margin-right: $padding / 2;
+ li {
+ float: left;
+ margin-right: $padding / 2;
- .button {
- float: left;
- }
+ .button {
+ float: left;
+ }
- &.is-active {
- z-index: 1;
- }
- }
+ &.is-active {
+ z-index: 1;
+ }
+ }
- @include clear-fix;
+ @include clear-fix;
}
//-------------------- Modifiers --------------------//
.pagination.pagination--grouped {
- li {
- margin-left: -1px;
- margin-right: 0;
+ li {
+ margin-left: -1px;
+ margin-right: 0;
- &:first-child { margin-left: 0; }
- &:hover, .button:hover { z-index: 1; }
+ &:first-child { margin-left: 0; }
+ &:hover, .button:hover { z-index: 1; }
- .button {
- margin: 0;
- border-radius: 0;
- }
- }
+ .button {
+ margin: 0;
+ border-radius: 0;
+ }
+ }
- // Shape: round
- &.round {
- ul {
- border-radius: $round;
- }
+ // Shape: round
+ &.round {
+ ul {
+ border-radius: $round;
+ }
- li:first-child .button {
- border-top-left-radius: $round;
- border-bottom-left-radius: $round;
- }
+ li:first-child .button {
+ border-top-left-radius: $round;
+ border-bottom-left-radius: $round;
+ }
- li:last-child .button {
- border-top-right-radius: $round;
- border-bottom-right-radius: $round;
- }
- }
+ li:last-child .button {
+ border-top-right-radius: $round;
+ border-bottom-right-radius: $round;
+ }
+ }
- // Shape: pill
- &.pill {
- ul {
- border-radius: $pill;
- }
+ // Shape: pill
+ &.pill {
+ ul {
+ border-radius: $pill;
+ }
- li:first-child .button {
- border-top-left-radius: $pill;
- border-bottom-left-radius: $pill;
- }
+ li:first-child .button {
+ border-top-left-radius: $pill;
+ border-bottom-left-radius: $pill;
+ }
- li:last-child .button {
- border-top-right-radius: $pill;
- border-bottom-right-radius: $pill;
- }
- }
+ li:last-child .button {
+ border-top-right-radius: $pill;
+ border-bottom-right-radius: $pill;
+ }
+ }
- // Shape: oval
- &.oval {
- ul {
- border-radius: #{$oval-x} / #{$oval-y};
- }
+ // Shape: oval
+ &.oval {
+ ul {
+ border-radius: #{$oval-x} / #{$oval-y};
+ }
- li:first-child .button {
- border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
- }
+ li:first-child .button {
+ border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
+ }
- li:last-child .button {
- border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
- }
- }
+ li:last-child .button {
+ border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
+ }
+ }
- // Shape: skew
- &.skew {
- ul {
- border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
- }
+ // Shape: skew
+ &.skew {
+ ul {
+ border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+ }
- li:first-child .button {
- border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
- }
+ li:first-child .button {
+ border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
+ }
- li:last-child .button {
- border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
- }
- }
+ li:last-child .button {
+ border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
+ }
+ }
}
\ No newline at end of file