0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Fix separator styles to work with new responsive logic

Browse source 
- Add separator width value to config
- Revise separator selectors for less CSS output
This commit is contained in:
Allan Cole 2019-08-19 16:10:08 -04:00
parent 30326d28ba
commit 5993188cfd
5 changed files with 71 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
varia/sass/blocks/separator/_config.scss
View file

@ -3,5 +3,6 @@
*/
$config-separator: (
"height": #{0.25 * $baseline-unit},
"height": #{0.125 * map-deep-get($config-global, "spacing", "unit")},
"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")}
);

38
varia/sass/blocks/separator/_style.scss
View file

@ -1,24 +1,34 @@
.wp-block-separator,
hr {
border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};
border-bottom-color: #{map-deep-get($config-global, "color", "border", "default")};
border-bottom-width: #{map-deep-get($config-separator, "height")};
clear: both;
margin-left: auto;
margin-right: auto;
/**
* Block Options
*/
&.is-style-wide {
border-bottom-width: #{map-deep-get($config-separator, "height")};
}
&.wp-block-separator {
border-bottom-color: #{map-deep-get($config-global, "color", "border", "default")};
&.is-style-dots {
&:not(.is-style-wide):not(.is-style-dots) {
max-width: #{map-deep-get($config-separator, "width")};
}
&:before {
color: #{map-deep-get($config-global, "color", "border", "default")};
font-size: #{map-deep-get($config-global, "font", "size", "xl")};
letter-spacing: #{map-deep-get($config-global, "font", "size", "sm")};
padding-left: #{map-deep-get($config-global, "font", "size", "sm")};
/**
* Block Options
*/
&.is-style-wide {
@extend %responsive-aligndefault;
border-bottom-color: #{map-deep-get($config-global, "color", "border", "default")};
border-bottom-width: #{map-deep-get($config-separator, "height")};
}
&.is-style-dots {
&:before {
color: #{map-deep-get($config-global, "color", "border", "default")};
font-size: #{map-deep-get($config-global, "font", "size", "xl")};
letter-spacing: #{map-deep-get($config-global, "font", "size", "sm")};
padding-left: #{map-deep-get($config-global, "font", "size", "sm")};
}
}
}
}

2
varia/sass/blocks/utilities/_style.scss
View file

@ -28,7 +28,7 @@
/**
* .aligndefault
*/
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
@extend %responsive-aligndefault;
}

50
varia/style-rtl.css
View file

@ -1833,24 +1833,31 @@ p.has-background:not(.has-background-background-color) a {
letter-spacing: normal;
}
.wp-block-separator,
hr {
border-bottom: 2px solid #DDDDDD;
border-bottom-color: #DDDDDD;
border-bottom-width: 2px;
clear: both;
margin-right: auto;
margin-left: auto;
/**
* Block Options
*/
}
.wp-block-separator.is-style-wide,
hr.is-style-wide {
hr.wp-block-separator {
border-bottom-color: #DDDDDD;
/**
* Block Options
*/
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
max-width: 96px;
}
hr.wp-block-separator.is-style-wide {
border-bottom-color: #DDDDDD;
border-bottom-width: 2px;
}
.wp-block-separator.is-style-dots:before,
hr.is-style-dots:before {
hr.wp-block-separator.is-style-dots:before {
color: #DDDDDD;
font-size: 1.728rem;
letter-spacing: 0.83333rem;
@ -2333,11 +2340,6 @@ table th,
z-index: 1;
}
.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
cursor: pointer;
z-index: 99999;
}
.main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
@ -2350,14 +2352,6 @@ table th,
/* Submenu display */
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li[focus-within] > ul,
.main-navigation > div > ul li ul:hover,
.main-navigation > div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li:focus-within > ul,
.main-navigation > div > ul li ul:hover,
.main-navigation > div > ul li ul:focus {
@ -3097,7 +3091,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: 100%;
margin-right: auto;
@ -3108,7 +3102,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 560px - 32px);
}
@ -3118,7 +3112,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 640px - 32px);
}
@ -3128,7 +3122,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
@ -3138,7 +3132,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
@ -3148,7 +3142,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}

37
varia/style.css
View file

@ -1833,24 +1833,31 @@ p.has-background:not(.has-background-background-color) a {
letter-spacing: normal;
}
.wp-block-separator,
hr {
border-bottom: 2px solid #DDDDDD;
border-bottom-color: #DDDDDD;
border-bottom-width: 2px;
clear: both;
margin-left: auto;
margin-right: auto;
/**
* Block Options
*/
}
.wp-block-separator.is-style-wide,
hr.is-style-wide {
hr.wp-block-separator {
border-bottom-color: #DDDDDD;
/**
* Block Options
*/
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
max-width: 96px;
}
hr.wp-block-separator.is-style-wide {
border-bottom-color: #DDDDDD;
border-bottom-width: 2px;
}
.wp-block-separator.is-style-dots:before,
hr.is-style-dots:before {
hr.wp-block-separator.is-style-dots:before {
color: #DDDDDD;
font-size: 1.728rem;
letter-spacing: 0.83333rem;
@ -3101,7 +3108,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: 100%;
margin-left: auto;
@ -3112,7 +3119,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 560px - 32px);
}
@ -3122,7 +3129,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 640px - 32px);
}
@ -3132,7 +3139,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
@ -3142,7 +3149,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}
@ -3152,7 +3159,7 @@ img#wpstats {
.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
max-width: calc( 782px - 32px);
}