Mercurial > wikked

comparison static/bootstrap/less/pagination.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Pagination (multiple pages) 2 // Pagination (multiple pages)
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 .pagination {
5 display: inline-block;
6 padding-left: 0;
7 margin: @line-height-computed 0;
8 border-radius: @border-radius-base;
4 9
5 // Space out pagination from surrounding content 10 > li {
6 .pagination { 11 display: inline; // Remove list-style and block-level defaults
7 margin: @baseLineHeight 0; 12 > a,
13 > span {
14 position: relative;
15 float: left; // Collapse white-space
16 padding: @padding-base-vertical @padding-base-horizontal;
17 line-height: @line-height-base;
18 text-decoration: none;
19 background-color: @pagination-bg;
20 border: 1px solid @pagination-border;
21 margin-left: -1px;
22 }
23 &:first-child {
24 > a,
25 > span {
26 margin-left: 0;
27 .border-left-radius(@border-radius-base);
28 }
29 }
30 &:last-child {
31 > a,
32 > span {
33 .border-right-radius(@border-radius-base);
34 }
35 }
36 }
37
38 > li > a,
39 > li > span {
40 &:hover,
41 &:focus {
42 background-color: @pagination-hover-bg;
43 }
44 }
45
46 > .active > a,
47 > .active > span {
48 &,
49 &:hover,
50 &:focus {
51 z-index: 2;
52 color: @pagination-active-color;
53 background-color: @pagination-active-bg;
54 border-color: @pagination-active-bg;
55 cursor: default;
56 }
57 }
58
59 > .disabled {
60 > span,
61 > span:hover,
62 > span:focus,
63 > a,
64 > a:hover,
65 > a:focus {
66 color: @pagination-disabled-color;
67 background-color: @pagination-bg;
68 border-color: @pagination-border;
69 cursor: not-allowed;
70 }
71 }
8 } 72 }
9
10 .pagination ul {
11 // Allow for text-based alignment
12 display: inline-block;
13 .ie7-inline-block();
14 // Reset default ul styles
15 margin-left: 0;
16 margin-bottom: 0;
17 // Visuals
18 .border-radius(@baseBorderRadius);
19 .box-shadow(0 1px 2px rgba(0,0,0,.05));
20 }
21 .pagination ul > li {
22 display: inline; // Remove list-style and block-level defaults
23 }
24 .pagination ul > li > a,
25 .pagination ul > li > span {
26 float: left; // Collapse white-space
27 padding: 4px 12px;
28 line-height: @baseLineHeight;
29 text-decoration: none;
30 background-color: @paginationBackground;
31 border: 1px solid @paginationBorder;
32 border-left-width: 0;
33 }
34 .pagination ul > li > a:hover,
35 .pagination ul > li > a:focus,
36 .pagination ul > .active > a,
37 .pagination ul > .active > span {
38 background-color: @paginationActiveBackground;
39 }
40 .pagination ul > .active > a,
41 .pagination ul > .active > span {
42 color: @grayLight;
43 cursor: default;
44 }
45 .pagination ul > .disabled > span,
46 .pagination ul > .disabled > a,
47 .pagination ul > .disabled > a:hover,
48 .pagination ul > .disabled > a:focus {
49 color: @grayLight;
50 background-color: transparent;
51 cursor: default;
52 }
53 .pagination ul > li:first-child > a,
54 .pagination ul > li:first-child > span {
55 border-left-width: 1px;
56 .border-left-radius(@baseBorderRadius);
57 }
58 .pagination ul > li:last-child > a,
59 .pagination ul > li:last-child > span {
60 .border-right-radius(@baseBorderRadius);
61 }
62
63
64 // Alignment
65 // --------------------------------------------------
66
67 .pagination-centered {
68 text-align: center;
69 }
70 .pagination-right {
71 text-align: right;
72 }
73
74 73
75 // Sizing 74 // Sizing
76 // -------------------------------------------------- 75 // --------------------------------------------------
77 76
78 // Large 77 // Large
79 .pagination-large { 78 .pagination-lg {
80 ul > li > a, 79 .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
81 ul > li > span {
82 padding: @paddingLarge;
83 font-size: @fontSizeLarge;
84 }
85 ul > li:first-child > a,
86 ul > li:first-child > span {
87 .border-left-radius(@borderRadiusLarge);
88 }
89 ul > li:last-child > a,
90 ul > li:last-child > span {
91 .border-right-radius(@borderRadiusLarge);
92 }
93 }
94
95 // Small and mini
96 .pagination-mini,
97 .pagination-small {
98 ul > li:first-child > a,
99 ul > li:first-child > span {
100 .border-left-radius(@borderRadiusSmall);
101 }
102 ul > li:last-child > a,
103 ul > li:last-child > span {
104 .border-right-radius(@borderRadiusSmall);
105 }
106 } 80 }
107 81
108 // Small 82 // Small
109 .pagination-small { 83 .pagination-sm {
110 ul > li > a, 84 .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
111 ul > li > span {
112 padding: @paddingSmall;
113 font-size: @fontSizeSmall;
114 }
115 } 85 }
116 // Mini
117 .pagination-mini {
118 ul > li > a,
119 ul > li > span {
120 padding: @paddingMini;
121 font-size: @fontSizeMini;
122 }
123 }