Initial commit

[editorial.git] / assets / main / sass / components / _pagination.scss

diff --git a/assets/main/sass/components/_pagination.scss b/assets/main/sass/components/_pagination.scss
new file mode 100644 (file)
index 0000000..935a1d9
--- /dev/null
+++ b/assets/main/sass/components/_pagination.scss
@@ -0,0 +1,110 @@
+///\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