wp/wp-includes/blocks/button/style.css
author ymh <ymh.work@gmail.com>
Wed, 21 Sep 2022 18:19:35 +0200
changeset 18 be944660c56a
child 19 3d72ae0968f4
permissions -rw-r--r--
Site enmi version 09/2022
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
18
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
 * Colors
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
 * Breakpoints & Media Queries
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
 * SCSS Variables.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
 *
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
 * Please use variables from this sheet to ensure consistency across the UI.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
 * Colors
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
 * Fonts & basic variables.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
 * Grid System.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
 * Dimensions.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
 * Shadows.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
 * Editor widths.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
 * Block & Editor UI.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
 * Block paddings.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
 * React Native specific.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
 * These variables do not appear to be used anywhere else.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
 * Breakpoint mixins
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
 * Long content fade mixin
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
 *
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
 * Creates a fading overlay to signify that the content is longer
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
 * than the space allows.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
 * Focus styles.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
 * Applies editor left position to the selector passed as argument
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
 * Styles that are reused verbatim in a few places
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
 * Allows users to opt-out of animations via OS-level preferences.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
 * Reset default styles for JavaScript UI based pages.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
 * This is a WP-admin agnostic reset
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
/**
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
 * Reset the WP Admin page styles for Gutenberg-like pages.
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
 */
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
.wp-block-button__link {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
  color: #fff;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
  background-color: #32373c;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
  border-radius: 9999px;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
  box-shadow: none;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
  cursor: pointer;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
  display: inline-block;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
  font-size: 1.125em;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
  text-align: center;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
  text-decoration: none;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
  overflow-wrap: break-word;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
  box-sizing: border-box;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, .wp-block-button__link:visited {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
  color: #fff;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
.wp-block-button__link.aligncenter {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
  text-align: center;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
.wp-block-button__link.alignright {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
  /*rtl:ignore*/
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
  text-align: right;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
.wp-block-buttons > .wp-block-button.has-custom-width {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
  max-width: none;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
.wp-block-buttons > .wp-block-button.has-custom-width .wp-block-button__link {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
  width: 100%;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
.wp-block-buttons > .wp-block-button.has-custom-font-size .wp-block-button__link {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
  font-size: inherit;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
.wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
  width: calc(25% - 0.5em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
.wp-block-buttons > .wp-block-button.wp-block-button__width-50 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
  width: calc(50% - 0.5em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
.wp-block-buttons > .wp-block-button.wp-block-button__width-75 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
  width: calc(75% - 0.5em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
.wp-block-buttons > .wp-block-button.wp-block-button__width-100 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
  width: calc(100% - 0.5em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
.wp-block-buttons > .wp-block-button.wp-block-button__width-100:only-child {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   118
  margin-right: 0;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
  width: 100%;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
@supports (column-gap: 0.5em) {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
  .wp-block-buttons > .wp-block-button.wp-block-button, .wp-block-buttons.is-content-justification-right > .wp-block-button.wp-block-button {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   124
    margin-right: 0;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   125
    margin-left: 0;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   126
  }
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   127
  .wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   128
    width: calc(25% - 0.375em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   129
  }
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   130
  .wp-block-buttons > .wp-block-button.wp-block-button__width-50 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   131
    width: calc(50% - 0.25em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   132
  }
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   133
  .wp-block-buttons > .wp-block-button.wp-block-button__width-75 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   134
    width: calc(75% - 0.125em);
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   135
  }
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   136
  .wp-block-buttons > .wp-block-button.wp-block-button__width-100 {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   137
    width: auto;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   138
    flex-basis: 100%;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   139
  }
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   140
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
.wp-block-button.is-style-squared,
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   142
.wp-block-button__link.wp-block-button.is-style-squared {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   143
  border-radius: 0;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   144
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   145
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   146
.wp-block-button.no-border-radius,
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   147
.wp-block-button__link.no-border-radius {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   148
  border-radius: 0 !important;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   149
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   150
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   151
.is-style-outline > .wp-block-button__link,
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   152
.wp-block-button__link.is-style-outline {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   153
  border: 2px solid currentColor;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   154
  padding: 0.667em 1.333em;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   155
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   156
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   157
.is-style-outline > .wp-block-button__link:not(.has-text-color),
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   158
.wp-block-button__link.is-style-outline:not(.has-text-color) {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   159
  color: currentColor;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   160
}
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   161
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   162
.is-style-outline > .wp-block-button__link:not(.has-background),
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   163
.wp-block-button__link.is-style-outline:not(.has-background) {
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   164
  background-color: transparent;
be944660c56a Site enmi version 09/2022
ymh <ymh.work@gmail.com>
parents:
diff changeset
   165
}