Skip to content

Commit

Permalink
6.3.1
Browse files Browse the repository at this point in the history 
CSS

- Changed the triangle marker in FAQ block with (+) and (-) sign.
- Removed the quotation mark in QUOTE block
- Tidied up TABLE block styling.
- Removed support for Social Links block - The styling is commented in `app/_blocks.sass`
- Changed Jetpack SHARING styling because it's using SVG icon now
  • Loading branch information
@hrsetyono
hrsetyono committed May 18, 2020
1 parent 6a1db16 commit e0ae137
Show file tree
Hide file tree
Showing 15 changed files with 281 additions and 377 deletions.
2 changes: 1 addition & 1 deletion assets/css/app.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions assets/css/blog.css
View file

Large diffs are not rendered by default.

49 changes: 1 addition & 48 deletions assets/sass/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,51 +55,4 @@ $retina: "min-resolution: 192dpi";
// ASSET PATH - Relative to the /css folder
// for image-url() and font-url()
$image-url: '../images/';
$font-url: '../fonts/';


// For gutenberg's Social block
$social-colors: (
amazon: #f90,
bandcamp: #1ea0c3,
behance: #0757fe,
chain: #f0f0f0,
codepen: #1e1f26,
deviantart: #02e49b,
dribbble: #e94c89,
dropbox: #4280ff,
etsy: #f45800,
facebook: #1977f2,
feed: #f0f0f0,
fivehundredpx: #000,
flickr: #0461dd,
foursquare: #e65678,
github: #24292d,
goodreads: #eceadd,
google: #ea4434,
instagram: #f00075,
lastfm: #e21b24,
linkedin: #0577b5,
line: #03c302,
mail: #f0f0f0,
mastodon: #3288d4,
medium: #02ab6c,
meetup: #f6405f,
pinterest: #e60122,
pocket: #ef4155,
reddit: #fe4500,
skype: #0478d7,
snapchat: #fefc00,
soundcloud: #ff5600,
spotify: #1bd760,
telegram: #08c,
tumblr: #011835,
twitch: #6440a4,
twitter: #21a1f3,
vimeo: #1eb7ea,
vk: #4680c2,
wordpress: #3499cd,
jetpack-whatsapp: #25d366,
yelp: #d32422,
youtube: #ff0100,
);
$font-url: '../fonts/';
12 changes: 12 additions & 0 deletions assets/sass/app/_blocks-custom.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,18 @@
transition: none
box-shadow: var(--shadow0)
transform: translateY(1px)

&::-webkit-details-marker
display: none

&::before
content: "+"
display: inline-block
margin-right: 0.75rem
font-family: var(--codeFontFamily)

[open] &
content: "-"

[open] &
opacity: 1
Expand Down
207 changes: 92 additions & 115 deletions assets/sass/app/_blocks.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,24 +400,6 @@ ul.blocks-gallery-grid
display: block
font-size: var(--smallFontSize)
color: var(--textDim)

&::after
content: "\f122"
display: flex
align-items: center
justify-content: center

position: absolute
left: 0
top: 0
background-color: var(--siteBackgroundColor)
width: 2rem
height: 2rem
color: var(--text)
font-family: "dashicons"
border-radius: var(--gRadius)
transform: translateX(-50%)


&.is-style-large
padding-top: 1rem
Expand All @@ -444,31 +426,20 @@ ul.blocks-gallery-grid
border-left: none
border-right: 3px solid var(--text)

&::after
left: auto
right: 0
transform: translateX(50%)


&.has-text-align-center
padding-top: 0
padding-top: 1.5rem
padding-bottom: 0
border-left: none

&::before
content: ""
display: block
margin: 0 auto 2rem
height: 3px
width: 200px
position: absolute
top: 0
width: 100px
height: 4px
background-color: var(--text)
&::after
left: 0
right: 0
margin-right: auto
margin-left: auto
transform: translateY(-50%)

transform: translateX(-50%)


///// AUDIO
Expand Down Expand Up @@ -535,7 +506,6 @@ ul.blocks-gallery-grid

table
width: 100%
tr
background-color: var(--tableBg)

thead tr,
Expand Down Expand Up @@ -565,7 +535,7 @@ ul.blocks-gallery-grid
// Table styles
.wp-block-table
&.is-style-stripes
tbody tr:nth-child(odd)
tbody tr:nth-child(even)
background-color: var(--tableStripe)

.has-fixed-layout
Expand All @@ -578,22 +548,21 @@ ul.blocks-gallery-grid
.has-subtle-light-gray-background-color
--tableBorder: var(--textDim)
--tableHeader: #{ h-rgba(--textDim, .1) }
--tableBg: #{ h-rgba(--textDim, .05) }

.has-subtle-pale-green-background-color
--tableBorder: var(--green)
--tableHeader: #{ h-rgba(--green, .1) }
--tableBg: #{ h-rgba(--green, .05) }
--tableHeader: #{ h-rgba(--green, .2) }
--tableStripe: #{ h-rgba(--green, .1) }

.has-subtle-pale-blue-background-color
--tableBorder: var(--blue)
--tableHeader: #{ h-rgba(--blue, .1) }
--tableBg: #{ h-rgba(--blue, .05) }
--tableHeader: #{ h-rgba(--blue, .2) }
--tableStripe: #{ h-rgba(--blue, .1) }

.has-subtle-pale-pink-background-color
--tableBorder: var(--red)
--tableHeader: #{ h-rgba(--red, .1) }
--tableBg: #{ h-rgba(--red, .05) }
--tableHeader: #{ h-rgba(--red, .2) }
--tableStripe: #{ h-rgba(--red, .1) }



Expand Down Expand Up @@ -822,76 +791,84 @@ code


///// SOCIAL LINKS
ul.wp-block-social-links
display: flex
justify-content: flex-start
flex-wrap: wrap
padding-left: 0
list-style-type: none

&.aligncenter
justify-content: center

.wp-social-link a
display: flex
align-items: center
justify-content: center

margin-right: 0.75rem
margin-bottom: 0.75rem
width: 42px
height: 42px
border: 1px solid rgba(black, .2)
border-bottom-width: 2px
border-radius: var(--gRadius)
// By default it's disabled - you can enable it via filter `h_disallowed_blocks`
// ul.wp-block-social-links
// display: flex
// justify-content: flex-start
// flex-wrap: wrap
// padding-left: 0
// list-style-type: none
// &.aligncenter
// justify-content: center
// .wp-social-link a
// display: flex
// align-items: center
// justify-content: center
// margin-right: 0.75rem
// margin-bottom: 0.75rem
// width: 42px
// height: 42px
// border: 1px solid rgba(black, .2)
// border-bottom-width: 2px
// border-radius: var(--gRadius)
background-color: var(--color)
line-height: 0

transition: var(--gTransition)
will-change: opacity

&:hover
opacity: .7
&:active
border-top-width: 2px
border-bottom-width: 1px
transition: none

.is-style-logos-only &
background-color: transparent
border-color: transparent
margin-right: 0.5rem

svg
fill: var(--color)
&:hover
border-color: rgba(black, .2)

.is-style-pill-shape &
border-radius: 50px
padding-left: 1rem
padding-right: 1rem
width: auto
.wp-social-link svg
width: 28px
height: 28px
fill: white
// background-color: var(--color)
// line-height: 0
// transition: var(--gTransition)
// will-change: opacity
// &:hover
// opacity: .7
// &:active
// border-top-width: 2px
// border-bottom-width: 1px
// transition: none
// .is-style-logos-only &
// background-color: transparent
// border-color: transparent
// margin-right: 0.5rem
// svg
// fill: var(--color)
// &:hover
// border-color: rgba(black, .2)
// .is-style-pill-shape &
// border-radius: 50px
// padding-left: 1rem
// padding-right: 1rem
// width: auto
// .wp-social-link svg
// width: 28px
// height: 28px
// fill: white
// color
@each $name, $color in $social-colors
.wp-social-link-#{ $name }
--color: #{ $color }

.wp-social-link-goodreads,
.wp-social-link-chain,
.wp-social-link-feed,
.wp-social-link-mail
svg
fill: #382110

.wp-social-link-snapchat
stroke: black
// .wp-social-link-goodreads,
// .wp-social-link-chain,
// .wp-social-link-feed,
// .wp-social-link-mail
// svg
// fill: #382110
// $social-colors: ( amazon: #f90, bandcamp: #1ea0c3, behance: #0757fe, chain: #f0f0f0, codepen: #1e1f26, deviantart: #02e49b, dribbble: #e94c89, dropbox: #4280ff, etsy: #f45800, facebook: #1977f2, feed: #f0f0f0, fivehundredpx: #000, flickr: #0461dd, foursquare: #e65678, github: #24292d, goodreads: #eceadd, google: #ea4434, instagram: #f00075, lastfm: #e21b24, linkedin: #0577b5, line: #03c302, mail: #f0f0f0, mastodon: #3288d4, medium: #02ab6c, meetup: #f6405f, pinterest: #e60122, pocket: #ef4155, reddit: #fe4500, skype: #0478d7, snapchat: #fefc00, soundcloud: #ff5600, spotify: #1bd760, telegram: #08c, tumblr: #011835, twitch: #6440a4, twitter: #21a1f3, vimeo: #1eb7ea, vk: #4680c2, wordpress: #3499cd, jetpack-whatsapp: #25d366, yelp: #d32422, youtube: #ff0100)
// @each $name, $color in $social-colors
// .wp-social-link-#{ $name }
// --color: #{ $color }
// .wp-social-link-goodreads,
// .wp-social-link-chain,
// .wp-social-link-feed,
// .wp-social-link-mail
// svg
// fill: #382110
// .wp-social-link-snapchat
// stroke: black
Loading

0 comments on commit e0ae137

Please sign in to comment.