-///\r
-/// Massively by HTML5 UP\r
-/// html5up.net | @ajlkn\r
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
-///\r
-\r
-/* Pagination */\r
-\r
- .pagination {\r
- @include vendor('display', 'inline-flex');\r
- @include vendor('user-select', 'none');\r
- cursor: default;\r
- list-style: none;\r
- margin: 0 0 _size(element-margin) 2px;\r
- padding: 0;\r
-\r
- a, span {\r
- @include vendor('transition', (\r
- 'background-color #{_duration(transition)} ease-in-out',\r
- 'border-color #{_duration(transition)} ease-in-out',\r
- 'box-shadow #{_duration(transition)} ease-in-out',\r
- 'color #{_duration(transition)} ease-in-out'\r
- ));\r
- border: solid 2px;\r
- display: inline-block;\r
- font-family: _font(family-heading);\r
- font-size: 0.8rem;\r
- font-weight: _font(weight-heading);\r
- height: _size(element-height);\r
- letter-spacing: 0.075em;\r
- letter-spacing: _font(letter-spacing-heading);\r
- line-height: calc(#{_size(element-height)} - 4px);\r
- margin-left: -2px;\r
- min-width: _size(element-height);\r
- position: relative;\r
- text-align: center;\r
- text-decoration: none;\r
- text-transform: uppercase;\r
- }\r
-\r
- .next, .previous {\r
- @include icon;\r
- padding: 0 1.75rem;\r
-\r
- &:before {\r
- display: inline-block;\r
- color: inherit !important;\r
- }\r
- }\r
-\r
- .previous {\r
- &:before {\r
- content: '\f104';\r
- margin-right: (0.75em / 0.8);\r
- }\r
- }\r
-\r
- .next {\r
- &:before {\r
- content: '\f105';\r
- float: right;\r
- margin-left: (0.75em / 0.8);\r
- }\r
- }\r
-\r
- @include breakpoint('<=medium') {\r
- a, span {\r
- font-size: 0.9rem;\r
- }\r
- }\r
-\r
- @include breakpoint('<=xsmall') {\r
- .page, .extra {\r
- display: none;\r
- }\r
- }\r
- }\r
-\r
- @mixin color-pagination($p: null) {\r
- .pagination {\r
- a, span {\r
- border-color: _palette($p, border);\r
- }\r
-\r
- a {\r
- color: _palette($p, fg-bold) !important;\r
-\r
- &:hover {\r
- color: _palette($p, accent) !important;\r
- border-color: _palette($p, accent);\r
- z-index: 1;\r
-\r
- & + a,\r
- & + span {\r
- border-left-color: _palette($p, accent);\r
- }\r
- }\r
-\r
- &.active {\r
- background-color: _palette($p, border);\r
- }\r
- }\r
-\r
- span {\r
- color: _palette($p, border);\r
- }\r
- }\r
- }\r
-\r
- @include color-pagination;
\ No newline at end of file
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Pagination */
+
+ ul.pagination {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding-left: 0;
+ vertical-align: middle;
+
+ > .page {
+ @include vendor('transition', (
+ 'background-color #{_duration(transition)} ease-in-out',
+ 'color #{_duration(transition)} ease-in-out'
+ ));
+ border-bottom: 0;
+ border-radius: _size(border-radius);
+ display: inline-block;
+ font-size: 0.8em;
+ font-weight: _font(weight-bold);
+ height: 2em;
+ line-height: 2em;
+ margin: 0 0.125em;
+ min-width: 2em;
+ padding: 0 0.5em;
+ text-align: center;
+
+ &.active {
+ background-color: _palette(accent);
+ color: _palette(bg) !important;
+
+ &:hover {
+ background-color: lighten(_palette(accent), 3);
+ }
+
+ &:active {
+ background-color: darken(_palette(accent), 3);
+ }
+ }
+ }
+
+ &:first-child {
+ padding-right: 0.75em;
+ }
+
+ &:last-child {
+ padding-left: 0.75em;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ li {
+ &:nth-child(n+2):nth-last-child(n+2) {
+ display: none;
+ }
+
+ &:first-child {
+ padding-right: 0;
+ }
+ }
+ }
+ }
\ No newline at end of file
projects / editorial.git / blobdiff