diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b7278a7..38bc87cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * **Default font-size is 16px** * **New `.field` element ; `.control` repurposed** +* **New `.pagination` sizes** * Remove monospace named fonts * Remove icon spacing logic diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 1ac69d64..6127f8b9 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -44,22 +44,15 @@ diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index d7df81d1..e8db63fb 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -3633,6 +3633,22 @@ a.nav-item.is-tab.is-active { box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); } +.pagination { + font-size: 1rem; +} + +.pagination.is-small { + font-size: 0.75rem; +} + +.pagination.is-medium { + font-size: 1.25rem; +} + +.pagination.is-large { + font-size: 1.5rem; +} + .pagination, .pagination-list { align-items: center; @@ -3667,7 +3683,7 @@ a.nav-item.is-tab.is-active { -moz-user-select: none; -ms-user-select: none; user-select: none; - font-size: 0.875rem; + font-size: 1em; padding-left: 0.5em; padding-right: 0.5em; justify-content: center; @@ -6449,15 +6465,21 @@ html.route-index #carbon { align-items: center; display: flex; flex-wrap: wrap; - margin-top: 5px; justify-content: flex-start; } -#social a { +#social > iframe, +#social > a, +#social > form { display: inline-block; font-size: 11px; height: 30px; line-height: 30px; + margin-top: 5px; +} + +#social .twitter-share-button { + margin-right: 10px; } #newsletter .input { @@ -6467,6 +6489,7 @@ html.route-index #carbon { #sister ul { display: flex; + flex-wrap: wrap; } #sister li { @@ -6479,16 +6502,22 @@ html.route-index #carbon { height: 30px; } +#tsp small { + display: block; +} + #images tr td:nth-child(2) { width: 320px; } .color { + border-radius: 2px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); display: inline-block; float: left; - height: 18px; - margin-right: 5px; - width: 18px; + height: 24px; + margin-right: 8px; + width: 24px; } .example, @@ -6496,7 +6525,7 @@ html.route-index #carbon { border: 1px solid #ffdd57; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.7); - padding: 1.25rem 1.5rem; + padding: 1.5rem; position: relative; } diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 95cff37d..b1d4d823 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -154,5 +154,73 @@ doc-subtab: pagination {{pagination_right_example}} {% endhighlight %} +
+ +

Sizes New!

+

+ The pagination comes in 3 additional sizes.
+ You only need to append the modifier is-small, is-medium, or is-large to the pagination component. +

+ +{% capture pagination_small_example %} + +{% endcapture %} + +
+ {{pagination_small_example}} +
+ +{% capture pagination_medium_example %} + +{% endcapture %} + +
+ {{pagination_medium_example}} +
+ +{% capture pagination_large_example %} + +{% endcapture %} + +
+ {{pagination_large_example}} +
+ diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 89337640..68afd4ba 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -19,9 +19,8 @@ doc-subtab: variables
  • Initial variables: where you define variables by direct value, like:
    • @@ -40,7 +39,7 @@ doc-subtab: variables
  • Generated variables where variables are calculated from the values set in the previous file. For example, you can have: @@ -194,19 +193,19 @@ doc-subtab: variables Typography $family-sans-serif - -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif + -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif $family-monospace - "Inconsolata", "Consolas", "Monaco", monospace + monospace $size-1 - 3.5rem + 3rem $size-2 - 2.75rem + 2.5rem $size-3 @@ -222,7 +221,7 @@ doc-subtab: variables $size-6 - 14px + 1rem $size-7 @@ -245,6 +244,16 @@ doc-subtab: variables 700 + Body + + $body-background + $white + + + $body-size + 16px + + Breakpoints $tablet @@ -276,31 +285,31 @@ doc-subtab: variables 2. Primary colors $primary - $turquoise + $turquoise $info - $blue + $blue $success - $green + $green $warning - $yellow + $yellow $danger - $red + $red $light - $white-ter + $white-ter $dark - $grey-darker + $grey-darker 3. Generated variables @@ -308,178 +317,174 @@ doc-subtab: variables Invert colors $primary-invert - findColorInvert($primary) + findColorInvert($primary) $info-invert - findColorInvert($info) + findColorInvert($info) $success-invert - findColorInvert($success) + findColorInvert($success) $warning-invert - findColorInvert($warning) + findColorInvert($warning) $danger-invert - findColorInvert($danger) + findColorInvert($danger) $light-invert - $dark + $dark $dark-invert - $light + $light General colors $body-background - $grey-lighter + $grey-lighter $background - $grey-lighter + $grey-lighter $border - $grey-light + $grey-light $border-hover - $grey + $grey Text colors $text - $grey-dark + $grey-dark $text-invert - findColorInvert($text) + findColorInvert($text) $text-light - $grey + $grey $text-strong - $grey-darker + $grey-darker Code colors $code - $red + $red $code-background - $background + $background $pre - $text + $text $pre-background - $background + $background Link colors $link - $primary + $primary $link-invert - $primary-invert + $primary-invert $link-visited - $purple + $purple $link-hover - $grey-darker + $grey-darker $link-hover-border - $grey-darker + $grey-darker $link-focus - $grey-darker + $grey-darker $link-focus-border - $primary + $primary $link-active - $grey-darker + $grey-darker $link-active-border - $grey-dark + $grey-dark Typography $family-primary - $family-sans-serif + $family-sans-serif $family-code - $family-monospace + $family-monospace $size-small - $size-7 + $size-7 $size-normal - 1rem + $size-6 $size-medium - $size-5 + $size-5 $size-large - $size-4 + $size-4 4. Lists and maps $colors - (white: ($white, $black), -
    - black: ($black, $white), -
    - light: ($light, $light-invert), -
    - dark: ($dark, $dark-invert), -
    - primary: ($primary, $primary-invert), -
    - info: ($info, $info-invert), -
    - success: ($success, $success-invert), -
    - warning: ($warning, $warning-invert), -
    - danger: ($danger, $danger-invert)) + 
    +(
+  white: ($white, $black),
+  black: ($black, $white),
+  light: ($light, $light-invert),
+  dark: ($dark, $dark-invert),
+  primary: ($primary, $primary-invert),
+  info: ($info, $info-invert),
+  success: ($success, $success-invert),
+  warning: ($warning, $warning-invert),
+  danger: ($danger, $danger-invert)
+)
+
    $sizes - $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 + $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 diff --git a/docs/sass/example.sass b/docs/sass/example.sass index 7089ecb9..2f3e956e 100644 --- a/docs/sass/example.sass +++ b/docs/sass/example.sass @@ -3,7 +3,7 @@ border: 1px solid $warning border-top-right-radius: $radius color: $warning-invert - padding: 1.25rem 1.5rem + padding: 1.5rem position: relative &:not(:first-child) margin-top: 2rem diff --git a/docs/sass/footer.sass b/docs/sass/footer.sass index 3f628e02..4461e886 100644 --- a/docs/sass/footer.sass +++ b/docs/sass/footer.sass @@ -23,13 +23,17 @@ align-items: center display: flex flex-wrap: wrap - margin-top: 5px justify-content: flex-start - a + > iframe, + > a, + > form display: inline-block font-size: 11px height: 30px line-height: 30px + margin-top: 5px + .twitter-share-button + margin-right: 10px #newsletter .input @@ -39,9 +43,14 @@ #sister ul display: flex + flex-wrap: wrap li display: flex height: 30px margin: 5px 1rem 0 0 img height: 30px + +#tsp + small + display: block diff --git a/docs/sass/specific.sass b/docs/sass/specific.sass index e8f88824..b2e0842e 100644 --- a/docs/sass/specific.sass +++ b/docs/sass/specific.sass @@ -4,8 +4,10 @@ width: 320px .color + border-radius: 2px; + box-shadow: inset 0 0 0 1px rgba(black, 0.5) display: inline-block float: left - height: 18px - margin-right: 5px - width: 18px + height: 24px + margin-right: 8px + width: 24px diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index c0451765..79a63c68 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -23,6 +23,16 @@ $pagination-ellipsis: $grey-light !default $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) +.pagination + font-size: $size-normal + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + .pagination, .pagination-list align-items: center @@ -36,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-ellipsis +control +unselectable - font-size: 0.875rem + font-size: 1em padding-left: 0.5em padding-right: 0.5em justify-content: center