"Fossies" - the Fresh Open Source Software Archive

Member "wordpress/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss" (12 Nov 2020, 3101 Bytes) of package /linux/www/wordpress-5.7-RC1.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) SASS/SCSS source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 /* Block Alignments */
    2 
    3 /**
    4  * These selectors set the default max width for content appearing inside a post or page.
    5  */
    6 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
    7 *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    8     @extend %responsive-aligndefault-width;
    9 }
   10 
   11 /**
   12  * .alignleft
   13  */
   14 .alignleft {
   15 
   16     /*rtl:ignore*/
   17     text-align: left;
   18 
   19     margin-top: 0;
   20 }
   21 
   22 // Targeting the .entry-content class is necessary to ensure these styles
   23 // only apply when the block isn't nested.
   24 .entry-content > .alignleft {
   25     max-width: var(--responsive--aligndefault-width);
   26     @extend %responsive-alignleft;
   27 }
   28 
   29 @include media(mobile) {
   30 
   31     .alignleft {
   32 
   33         /*rtl:ignore*/
   34         float: left;
   35 
   36         /*rtl:ignore*/
   37         margin-right: var(--global--spacing-horizontal);
   38         margin-bottom: var(--global--spacing-vertical);
   39     }
   40 
   41     .entry-content > .alignleft {
   42         max-width: calc(50% - var(--responsive--alignleft-margin));
   43     }
   44 }
   45 
   46 /**
   47  * .aligncenter
   48  */
   49 .aligncenter {
   50     clear: both;
   51     display: block;
   52     float: none;
   53     margin-right: auto;
   54     margin-left: auto;
   55     text-align: center;
   56 }
   57 
   58 /**
   59  * .alignright
   60  */
   61 .alignright {
   62 
   63     margin-top: 0;
   64     margin-bottom: var(--global--spacing-vertical);
   65 }
   66 
   67 // Targeting the .entry-content class is necessary to ensure these styles
   68 // only apply when the block isn't nested.
   69 .entry-content > .alignright {
   70     max-width: var(--responsive--aligndefault-width);
   71     @extend %responsive-alignright;
   72 }
   73 
   74 @include media(mobile) {
   75 
   76     .alignright {
   77 
   78         /*rtl:ignore*/
   79         float: right;
   80 
   81         /*rtl:ignore*/
   82         margin-left: var(--global--spacing-horizontal);
   83     }
   84 
   85     .entry-content > .alignright {
   86         max-width: calc(50% - var(--responsive--alignright-margin));
   87     }
   88 }
   89 
   90 // Make sure siblings of floated elements are top-aligned when nested
   91 [class*="inner-container"] > .alignleft + *,
   92 [class*="inner-container"] > .alignright + * {
   93     margin-top: 0;
   94 }
   95 
   96 /**
   97  * .alignwide
   98  */
   99 .alignwide {
  100     clear: both;
  101     @extend %responsive-alignwide-width;
  102 }
  103 
  104 .alignwide [class*="inner-container"] > .alignwide {
  105     @extend %responsive-alignwide-width-nested;
  106 }
  107 
  108 /**
  109  * .alignfull
  110  */
  111 .alignfull {
  112     clear: both;
  113     @extend %responsive-alignfull-width-mobile;
  114     @extend %responsive-alignfull-width;
  115 }
  116 
  117 .alignfull [class*="inner-container"] > .alignwide {
  118     @extend %responsive-alignwide-width-nested;
  119 }
  120 
  121 // Content alignment
  122 .has-left-content {
  123     justify-content: flex-start;
  124 }
  125 
  126 .has-right-content {
  127     justify-content: flex-end;
  128 }
  129 
  130 // Parallax
  131 .has-parallax {
  132     background-attachment: fixed;
  133 }
  134 
  135 // Drop caps
  136 .has-drop-cap:not(:focus)::first-letter {
  137     font-family: var(--heading--font-family);
  138     font-weight: var(--heading--font-weight);
  139     line-height: 0.66;
  140     text-transform: uppercase;
  141     font-style: normal;
  142     float: left;
  143     margin: 0.1em 0.1em 0 0;
  144     font-size: calc(1.2 * var(--heading--font-size-h1));
  145 }
  146 
  147 .has-drop-cap:not(:focus)::after {
  148     content: "";
  149     display: table;
  150     clear: both;
  151     padding-top: 14px;
  152 }
  153 
  154 .desktop-only {
  155     display: none;
  156 
  157     @include media(mobile) {
  158         display: block;
  159     }
  160 }