wp/wp-includes/css/dist/nux/style-rtl.css
changeset 18 be944660c56a
parent 16 a86126ab1dd4
child 19 3d72ae0968f4
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
     1 /**
     1 /**
     2  * Colors
     2  * Colors
     3  */
       
     4 /**
       
     5  * Deprecated colors.
       
     6  * Please avoid using these.
       
     7  */
     3  */
     8 /**
     4 /**
     9  * Breakpoints & Media Queries
     5  * Breakpoints & Media Queries
    10  */
     6  */
    11 /**
     7 /**
    12  * Colors
     8  * SCSS Variables.
       
     9  *
       
    10  * Please use variables from this sheet to ensure consistency across the UI.
       
    11  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
       
    12  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
    13  */
    13  */
    14 /**
    14 /**
    15  * Deprecated colors.
    15  * Colors
    16  * Please avoid using these.
       
    17  */
    16  */
    18 /**
    17 /**
    19  * Fonts & basic variables.
    18  * Fonts & basic variables.
    20  */
    19  */
    21 /**
    20 /**
    30  */
    29  */
    31 /**
    30 /**
    32  * Editor widths.
    31  * Editor widths.
    33  */
    32  */
    34 /**
    33 /**
    35  * Block UI.
    34  * Block & Editor UI.
    36  */
    35  */
    37 /**
    36 /**
    38  * Border radii.
    37  * Block paddings.
       
    38  */
       
    39 /**
       
    40  * React Native specific.
       
    41  * These variables do not appear to be used anywhere else.
    39  */
    42  */
    40 /**
    43 /**
    41  * Breakpoint mixins
    44  * Breakpoint mixins
    42  */
    45  */
    43 /**
    46 /**
    66  * Reset the WP Admin page styles for Gutenberg-like pages.
    69  * Reset the WP Admin page styles for Gutenberg-like pages.
    67  */
    70  */
    68 :root {
    71 :root {
    69   --wp-admin-theme-color: #007cba;
    72   --wp-admin-theme-color: #007cba;
    70   --wp-admin-theme-color-darker-10: #006ba1;
    73   --wp-admin-theme-color-darker-10: #006ba1;
    71   --wp-admin-theme-color-darker-20: #005a87; }
    74   --wp-admin-theme-color-darker-20: #005a87;
       
    75   --wp-admin-border-width-focus: 2px;
       
    76 }
       
    77 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
       
    78   :root {
       
    79     --wp-admin-border-width-focus: 1.5px;
       
    80   }
       
    81 }
    72 
    82 
    73 .nux-dot-tip::before, .nux-dot-tip::after {
    83 .nux-dot-tip::before, .nux-dot-tip::after {
    74   border-radius: 100%;
    84   border-radius: 100%;
    75   content: " ";
    85   content: " ";
    76   pointer-events: none;
    86   pointer-events: none;
    77   position: absolute; }
    87   position: absolute;
    78 
    88 }
    79 .nux-dot-tip::before {
    89 .nux-dot-tip::before {
    80   animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
    90   animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
    81   background: rgba(0, 115, 156, 0.9);
    91   background: rgba(0, 115, 156, 0.9);
    82   opacity: 0.9;
    92   opacity: 0.9;
    83   height: 24px;
    93   height: 24px;
    84   right: -12px;
    94   right: -12px;
    85   top: -12px;
    95   top: -12px;
    86   transform: scale(0.33333);
    96   transform: scale(0.3333333333);
    87   width: 24px; }
    97   width: 24px;
    88 
    98 }
    89 .nux-dot-tip::after {
    99 .nux-dot-tip::after {
    90   background: #00739c;
   100   background: #00739c;
    91   height: 8px;
   101   height: 8px;
    92   right: -4px;
   102   right: -4px;
    93   top: -4px;
   103   top: -4px;
    94   width: 8px; }
   104   width: 8px;
    95 
   105 }
    96 @keyframes nux-pulse {
   106 @keyframes nux-pulse {
    97   100% {
   107   100% {
    98     background: rgba(0, 115, 156, 0);
   108     background: rgba(0, 115, 156, 0);
    99     transform: scale(1); } }
   109     transform: scale(1);
   100 
   110   }
       
   111 }
   101 .nux-dot-tip .components-popover__content {
   112 .nux-dot-tip .components-popover__content {
   102   width: 350px; }
   113   width: 350px;
   103   .nux-dot-tip .components-popover__content > div {
   114 }
   104     padding: 20px 18px; }
   115 .nux-dot-tip .components-popover__content > div {
   105   @media (min-width: 600px) {
   116   padding: 20px 18px;
   106     .nux-dot-tip .components-popover__content {
   117 }
   107       width: 450px; } }
   118 @media (min-width: 600px) {
   108   .nux-dot-tip .components-popover__content .nux-dot-tip__disable {
   119   .nux-dot-tip .components-popover__content {
   109     position: absolute;
   120     width: 450px;
   110     left: 0;
   121   }
   111     top: 0; }
   122 }
   112 
   123 .nux-dot-tip .components-popover__content .nux-dot-tip__disable {
   113 .nux-dot-tip[data-y-axis="top"] {
   124   position: absolute;
   114   margin-top: -4px; }
   125   left: 0;
   115 
   126   top: 0;
   116 .nux-dot-tip[data-y-axis="bottom"] {
   127 }
   117   margin-top: 4px; }
   128 .nux-dot-tip[data-y-axis=top] {
   118 
   129   margin-top: -4px;
   119 .nux-dot-tip[data-y-axis="middle"][data-y-axis="left"] {
   130 }
   120   margin-right: -4px; }
   131 .nux-dot-tip[data-y-axis=bottom] {
   121 
   132   margin-top: 4px;
   122 .nux-dot-tip[data-y-axis="middle"][data-y-axis="right"] {
   133 }
   123   margin-right: 4px; }
   134 .nux-dot-tip[data-y-axis=middle][data-y-axis=left] {
   124 
   135   margin-right: -4px;
   125 .nux-dot-tip[data-y-axis="top"] .components-popover__content {
   136 }
   126   margin-bottom: 20px; }
   137 .nux-dot-tip[data-y-axis=middle][data-y-axis=right] {
   127 
   138   margin-right: 4px;
   128 .nux-dot-tip[data-y-axis="bottom"] .components-popover__content {
   139 }
   129   margin-top: 20px; }
   140 .nux-dot-tip[data-y-axis=top] .components-popover__content {
   130 
   141   margin-bottom: 20px;
   131 .nux-dot-tip[data-y-axis="middle"][data-y-axis="left"] .components-popover__content {
   142 }
   132   margin-left: 20px; }
   143 .nux-dot-tip[data-y-axis=bottom] .components-popover__content {
   133 
   144   margin-top: 20px;
   134 .nux-dot-tip[data-y-axis="middle"][data-y-axis="right"] .components-popover__content {
   145 }
   135   margin-right: 20px; }
   146 .nux-dot-tip[data-y-axis=middle][data-y-axis=left] .components-popover__content {
   136 
   147   margin-left: 20px;
   137 .nux-dot-tip[data-y-axis="left"], .nux-dot-tip[data-y-axis="center"], .nux-dot-tip[data-y-axis="right"] {
   148 }
   138   z-index: 1000001; }
   149 .nux-dot-tip[data-y-axis=middle][data-y-axis=right] .components-popover__content {
   139   @media (max-width: 600px) {
   150   margin-right: 20px;
   140     .nux-dot-tip[data-y-axis="left"] .components-popover__content, .nux-dot-tip[data-y-axis="center"] .components-popover__content, .nux-dot-tip[data-y-axis="right"] .components-popover__content {
   151 }
   141       -ms-grid-row-align: end;
   152 .nux-dot-tip[data-y-axis=left], .nux-dot-tip[data-y-axis=center], .nux-dot-tip[data-y-axis=right] {
   142           align-self: end;
   153   z-index: 1000001;
   143       right: 5px;
   154 }
   144       margin: 20px 0 0 0;
   155 @media (max-width: 600px) {
   145       max-width: none !important;
   156   .nux-dot-tip[data-y-axis=left] .components-popover__content, .nux-dot-tip[data-y-axis=center] .components-popover__content, .nux-dot-tip[data-y-axis=right] .components-popover__content {
   146       position: fixed;
   157     align-self: end;
   147       left: 5px;
   158     right: 5px;
   148       width: auto; } }
   159     margin: 20px 0 0 0;
   149 
   160     max-width: none !important;
   150 .nux-dot-tip.components-popover:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
   161     position: fixed;
   151   margin-left: 0; }
   162     left: 5px;
   152 
   163     width: auto;
   153 .nux-dot-tip.components-popover:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
   164   }
   154   margin-right: 0; }
   165 }
   155 
   166 .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
   156 .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
   167   margin-left: 0;
   157   margin-left: -12px; }
   168 }
   158 
   169 .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
   159 .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
   170   margin-right: 0;
   160   margin-right: -12px; }
   171 }
       
   172 .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content {
       
   173   margin-left: -12px;
       
   174 }
       
   175 .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content {
       
   176   margin-right: -12px;
       
   177 }