GenerateBgImage.js
5 years ago
asyncHooks.js
5 years ago
capitalize.js
5 years ago
color-code-to-class.js
5 years ago
color-slug-to-color-code.js
4 years ago
common.scss
4 years ago
convert-to-grid.js
5 years ago
default-color-palette.js
5 years ago
delete-from-array.js
5 years ago
depModules.js
5 years ago
example-data.js
5 years ago
fixBrokenUnicode.js
5 years ago
font-awesome-new.js
5 years ago
font-awesome.js
5 years ago
formatNumCol.js
5 years ago
hex-to-rgba.js
5 years ago
hiddenNewBlock.js
5 years ago
hooks.js
5 years ago
is-hex-color.js
4 years ago
is-not-json.js
5 years ago
multi-array-flaten.js
5 years ago
removeProperty.js
5 years ago
replaceClientId.js
5 years ago
taxonomy-utils.js
5 years ago
to-number.js
5 years ago
common.scss
500 lines
| 1 | :root { |
| 2 | --vk-margin-elem:2rem; |
| 3 | } |
| 4 | |
| 5 | .text-nowrap { |
| 6 | white-space: nowrap; |
| 7 | } |
| 8 | |
| 9 | /*-------------------------------------------*/ |
| 10 | /* 余白（まだ レスポンシブスペーサーでのみ使用） |
| 11 | /*-------------------------------------------*/ |
| 12 | :root { |
| 13 | --vk-margin-sm : 1.5rem; |
| 14 | --vk-margin-md : 2rem; |
| 15 | --vk-margin-lg : 4rem; |
| 16 | } |
| 17 | .vk_block{ |
| 18 | &-margin-sm { |
| 19 | margin-top: var(--vk-margin-sm); /* 旧バージョンでdeprecatedが走ってない状� |
| 20 | �のfallback */ |
| 21 | &--margin-top { |
| 22 | margin-top: var(--vk-margin-sm); |
| 23 | } |
| 24 | &--margin-bottom { |
| 25 | margin-bottom: var(--vk-margin-sm); |
| 26 | } |
| 27 | &--height { |
| 28 | height: var(--vk-margin-sm); |
| 29 | } |
| 30 | } |
| 31 | &-margin-md { |
| 32 | margin-top: var(--vk-margin-md); /* 旧バージョンでdeprecatedが走ってない状� |
| 33 | �のfallback */ |
| 34 | &--margin-top { |
| 35 | margin-top: var(--vk-margin-md); |
| 36 | } |
| 37 | &--margin-bottom { |
| 38 | margin-bottom: var(--vk-margin-md); |
| 39 | } |
| 40 | &--height { |
| 41 | height: var(--vk-margin-md); |
| 42 | } |
| 43 | } |
| 44 | &-margin-lg { |
| 45 | margin-top: var(--vk-margin-lg); /* 旧バージョンでdeprecatedが走ってない状� |
| 46 | �のfallback */ |
| 47 | &--margin-top { |
| 48 | margin-top: var(--vk-margin-lg); |
| 49 | } |
| 50 | &--margin-bottom { |
| 51 | margin-bottom: var(--vk-margin-lg); |
| 52 | } |
| 53 | &--height { |
| 54 | height: var(--vk-margin-lg); |
| 55 | } |
| 56 | } |
| 57 | } |
| 58 | |
| 59 | /*-------------------------------------------*/ |
| 60 | /* リストデザイン |
| 61 | /*-------------------------------------------*/ |
| 62 | @mixin mark-before { |
| 63 | font-family: "Font Awesome 5 Free"; |
| 64 | font-weight: 900; |
| 65 | position: absolute; |
| 66 | } |
| 67 | |
| 68 | $stylePalette: ( |
| 69 | is-style-vk-arrow-mark: "\f138", |
| 70 | is-style-vk-triangle-mark: "\f0da", |
| 71 | is-style-vk-check-mark: "\f00c", |
| 72 | is-style-vk-check-circle-mark: "\f058", |
| 73 | is-style-vk-check-square-mark: "\f14a", |
| 74 | is-style-vk-handpoint-mark: "\f0a4", |
| 75 | is-style-vk-pencil-mark: "\f303", |
| 76 | is-style-vk-smile-mark: "\f118", |
| 77 | is-style-vk-frown-mark: "\f119", |
| 78 | ); |
| 79 | |
| 80 | $colorPalette: ( |
| 81 | vk-has-pale-pink-color: #f78da7, |
| 82 | vk-has-vivid-red-color: #cf2e2e, |
| 83 | vk-has-luminous-vivid-orange-color: #ff6900, |
| 84 | vk-has-luminous-vivid-amber-color: #fcb900, |
| 85 | vk-has-light-green-cyan-color: #7bdcb5, |
| 86 | vk-has-vivid-green-cyan-color: #00d084, |
| 87 | vk-has-pale-cyan-blue-color: #8ed1fc, |
| 88 | vk-has-vivid-cyan-blue-color: #0693e3, |
| 89 | vk-has-vivid-purple-color: #9b51e0, |
| 90 | vk-has-very-light-gray-color: #eee, |
| 91 | vk-has-cyan-bluish-gray-color: #abb8c3, |
| 92 | vk-has-very-dark-gray-color: #313131, |
| 93 | vk-has-white-color: #ffffff, |
| 94 | ); |
| 95 | |
| 96 | ul, |
| 97 | ol { |
| 98 | &.is-style { |
| 99 | &-vk-arrow-mark, |
| 100 | &-vk-triangle-mark, |
| 101 | &-vk-check-mark, |
| 102 | &-vk-check-circle-mark, |
| 103 | &-vk-check-square-mark, |
| 104 | &-vk-handpoint-mark, |
| 105 | &-vk-pencil-mark, |
| 106 | &-vk-smile-mark, |
| 107 | &-vk-frown-mark, |
| 108 | &-vk-numbered-circle-mark, |
| 109 | &-vk-numbered-square-mark { |
| 110 | padding-inline-start: 2em; |
| 111 | li { |
| 112 | list-style: none; |
| 113 | position: relative; |
| 114 | margin-top:0; |
| 115 | margin-left: 0; |
| 116 | margin:calc( var(--vk-size-text) * 0.8 ) 0; |
| 117 | line-height: calc( var(--vk-size-text) * 1.65 ); |
| 118 | } |
| 119 | } |
| 120 | } |
| 121 | |
| 122 | &.is-style-vk-numbered-circle-mark { |
| 123 | counter-reset: number; |
| 124 | list-style-type: none; |
| 125 | |
| 126 | li { |
| 127 | position: relative; |
| 128 | list-style: none; |
| 129 | padding-left: .5em; |
| 130 | &:before { |
| 131 | position: absolute; |
| 132 | left: 0; |
| 133 | counter-increment: number; |
| 134 | content: counter(number); |
| 135 | margin-left: -1.8em; |
| 136 | background: #222; |
| 137 | color: #fff; |
| 138 | text-indent: 0; |
| 139 | display: inline-block; |
| 140 | font-weight: bold; |
| 141 | border-radius: 50%; |
| 142 | font-size: calc( var(--vk-size-text) * 1 ); |
| 143 | line-height: calc( var(--vk-size-text) * 1.8 ); |
| 144 | width: 26px; |
| 145 | height: 26px; |
| 146 | text-align: center; |
| 147 | } |
| 148 | |
| 149 | ul, |
| 150 | ol { |
| 151 | counter-reset: num_inner; |
| 152 | content: counter(num_inner); |
| 153 | |
| 154 | li { |
| 155 | &:before { |
| 156 | counter-increment: num_inner; |
| 157 | content: counter(num_inner); |
| 158 | } |
| 159 | } |
| 160 | } |
| 161 | } |
| 162 | } |
| 163 | |
| 164 | &.is-style-vk-numbered-square-mark { |
| 165 | counter-reset: number; |
| 166 | list-style-type: none; |
| 167 | |
| 168 | li { |
| 169 | position: relative; |
| 170 | list-style: none; |
| 171 | padding-left: .5em; |
| 172 | &:before { |
| 173 | position: absolute; |
| 174 | left: -0.3em; |
| 175 | counter-increment: number; |
| 176 | content: counter(number); |
| 177 | margin-left: -25px; |
| 178 | background: #222; |
| 179 | color: #fff; |
| 180 | text-indent: 0; |
| 181 | display: inline-block; |
| 182 | font-weight: bold; |
| 183 | font-size: calc( var(--vk-size-text) * 1 ); |
| 184 | line-height: calc( var(--vk-size-text) * 1.8 ); |
| 185 | width: 26px; |
| 186 | height: 26px; |
| 187 | text-align: center; |
| 188 | border-radius: 2px; |
| 189 | } |
| 190 | |
| 191 | ul, |
| 192 | ol { |
| 193 | counter-reset: num_inner; |
| 194 | content: counter(num_inner); |
| 195 | |
| 196 | li { |
| 197 | &:before { |
| 198 | counter-increment: num_inner; |
| 199 | content: counter(num_inner); |
| 200 | } |
| 201 | } |
| 202 | } |
| 203 | } |
| 204 | } |
| 205 | |
| 206 | &.is-style-vk-numbered-circle-mark, |
| 207 | &.is-style-vk-numbered-square-mark { |
| 208 | &.fa-lg { |
| 209 | li::before { |
| 210 | left: -0.8em; |
| 211 | } |
| 212 | } |
| 213 | |
| 214 | &.fa-2x { |
| 215 | li { |
| 216 | line-height: 1.25em; |
| 217 | } |
| 218 | |
| 219 | li::before { |
| 220 | left: -1.1em; |
| 221 | } |
| 222 | } |
| 223 | |
| 224 | &.fa-3x { |
| 225 | li { |
| 226 | line-height: 1.25em; |
| 227 | } |
| 228 | |
| 229 | li::before { |
| 230 | left: -1.4em; |
| 231 | } |
| 232 | } |
| 233 | |
| 234 | &.fa-4x { |
| 235 | li { |
| 236 | line-height: 1.25em; |
| 237 | } |
| 238 | |
| 239 | li::before { |
| 240 | left: -1.5em; |
| 241 | } |
| 242 | } |
| 243 | |
| 244 | &.fa-5x { |
| 245 | li { |
| 246 | line-height: 1.25em; |
| 247 | } |
| 248 | |
| 249 | li::before { |
| 250 | left: -1.6em; |
| 251 | } |
| 252 | } |
| 253 | } |
| 254 | |
| 255 | @each $styleClass, $faCode in $stylePalette { |
| 256 | &.#{$styleClass} { |
| 257 | li { |
| 258 | &::before { |
| 259 | @include mark-before; |
| 260 | content: $faCode; |
| 261 | left: -1.5em; |
| 262 | } |
| 263 | } |
| 264 | } |
| 265 | &.is-style-vk-default { |
| 266 | li { |
| 267 | &::before { |
| 268 | font-size: 22px; |
| 269 | line-height: 1.1em; |
| 270 | } |
| 271 | } |
| 272 | } |
| 273 | } |
| 274 | |
| 275 | @each $colorClass, $color in $colorPalette { |
| 276 | &.#{$colorClass} { |
| 277 | li::before { |
| 278 | color: $color; |
| 279 | } |
| 280 | } |
| 281 | |
| 282 | &.is-style-vk-numbered-circle-mark.#{$colorClass}, |
| 283 | &.is-style-vk-numbered-square-mark.#{$colorClass} { |
| 284 | li::before { |
| 285 | color: #ffffff; |
| 286 | background-color: $color; |
| 287 | } |
| 288 | } |
| 289 | } |
| 290 | } |
| 291 | //ul,ol |
| 292 | |
| 293 | /*-------------------------------------------*/ |
| 294 | /* グループブロック デザイン |
| 295 | /*-------------------------------------------*/ |
| 296 | |
| 297 | @mixin pad-mag { |
| 298 | padding: 1.8em; |
| 299 | margin-top: var( --vk-margin-elem ); |
| 300 | margin-bottom: var( --vk-margin-elem ); |
| 301 | } |
| 302 | @mixin inner-item-pad-mag { |
| 303 | h2, |
| 304 | h3, |
| 305 | h4, |
| 306 | h5, |
| 307 | h6 { |
| 308 | margin-bottom: 1rem; |
| 309 | } |
| 310 | ul, |
| 311 | ol { |
| 312 | margin-top: 0; |
| 313 | li:last-child { |
| 314 | margin-bottom: 0; |
| 315 | } |
| 316 | } |
| 317 | } |
| 318 | |
| 319 | .wp-block-group { |
| 320 | h3:first-child, |
| 321 | h4:first-child { |
| 322 | margin-top: 0; |
| 323 | } |
| 324 | |
| 325 | /* *:last-child で指定するとブロックエディタでカラムの中にいれた時に枠の外にはみ出す */ |
| 326 | p, |
| 327 | ul, |
| 328 | ol, |
| 329 | dl, |
| 330 | table, |
| 331 | .wp-block-columns { |
| 332 | &:last-child { |
| 333 | margin-bottom: 0; |
| 334 | } |
| 335 | } |
| 336 | |
| 337 | @each $colorClass, $color in $colorPalette { |
| 338 | &.#{$colorClass} { |
| 339 | border-color: $color; |
| 340 | .wp-block-group__inner-container { |
| 341 | border-color: $color; |
| 342 | } |
| 343 | } |
| 344 | } |
| 345 | } //.wp-block-group |
| 346 | .is-style-vk-group { |
| 347 | &-solid { |
| 348 | border: solid 3px; |
| 349 | @include pad-mag; |
| 350 | @include inner-item-pad-mag; |
| 351 | } |
| 352 | &-solid-roundcorner { |
| 353 | border: solid 3px; |
| 354 | border-radius: 8px; |
| 355 | @include pad-mag; |
| 356 | @include inner-item-pad-mag; |
| 357 | } |
| 358 | &-dotted { |
| 359 | border: dotted 1px; |
| 360 | @include pad-mag; |
| 361 | @include inner-item-pad-mag; |
| 362 | } |
| 363 | &-dashed { |
| 364 | border: dashed 2px; |
| 365 | @include pad-mag; |
| 366 | @include inner-item-pad-mag; |
| 367 | } |
| 368 | &-double { |
| 369 | border: double 5px; |
| 370 | @include pad-mag; |
| 371 | @include inner-item-pad-mag; |
| 372 | } |
| 373 | &-stitch { |
| 374 | margin: 1em auto; |
| 375 | padding: 0.5em; |
| 376 | border-radius: 8px; |
| 377 | @include inner-item-pad-mag; |
| 378 | .wp-block-group__inner-container { |
| 379 | border: dashed 2px; |
| 380 | border-radius: 8px; |
| 381 | padding: 1.8em; |
| 382 | } |
| 383 | } |
| 384 | &-top-bottom-border { |
| 385 | border-top: solid 1px; |
| 386 | border-bottom: solid 1px; |
| 387 | @include pad-mag; |
| 388 | @include inner-item-pad-mag; |
| 389 | padding-left: 0; |
| 390 | padding-right: 0; |
| 391 | } |
| 392 | &-shadow { |
| 393 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); |
| 394 | @include pad-mag; |
| 395 | @include inner-item-pad-mag; |
| 396 | } |
| 397 | &-alert-info { |
| 398 | background-color: #d9edf7; |
| 399 | color: #31708f; |
| 400 | border-radius: 3px; |
| 401 | border: 1px solid #bce8f1; |
| 402 | @include pad-mag; |
| 403 | @include inner-item-pad-mag; |
| 404 | } |
| 405 | &-alert-success { |
| 406 | background-color: #dff0d8; |
| 407 | color: #3c763d; |
| 408 | border-radius: 3px; |
| 409 | border: 1px solid #d6e9c6; |
| 410 | @include pad-mag; |
| 411 | @include inner-item-pad-mag; |
| 412 | } |
| 413 | &-alert-warning { |
| 414 | background-color: #fcf8e3; |
| 415 | color: #8a6d3b; |
| 416 | border-radius: 3px; |
| 417 | border: 1px solid #faebcc; |
| 418 | @include pad-mag; |
| 419 | @include inner-item-pad-mag; |
| 420 | } |
| 421 | &-alert-danger { |
| 422 | background-color: #f2dede; |
| 423 | color: #a94442; |
| 424 | border-radius: 3px; |
| 425 | border: 1px solid #ebccd1; |
| 426 | @include pad-mag; |
| 427 | @include inner-item-pad-mag; |
| 428 | } |
| 429 | } |
| 430 | |
| 431 | |
| 432 | /*-------------------------------------------*/ |
| 433 | /* Group Block |
| 434 | /*-------------------------------------------*/ |
| 435 | .editor-styles-wrapper .wp-block-group { |
| 436 | // これがないとコアに勝手にwidthが左右1em余白をあけられる |
| 437 | // → だがしかし Grid Column 2 で中の要素が勝手に小さくされるので一旦コメントアウト |
| 438 | .wp-block{ |
| 439 | // width:auto; |
| 440 | } |
| 441 | } |
| 442 | |
| 443 | /*-------------------------------------------*/ |
| 444 | /* YouTube |
| 445 | /*-------------------------------------------*/ |
| 446 | .wp-block-embed { |
| 447 | &-youtube { |
| 448 | iframe { |
| 449 | width: 100%; |
| 450 | } |
| 451 | } |
| 452 | } |
| 453 | |
| 454 | .has-text-align-right { |
| 455 | text-align: right; |
| 456 | } |
| 457 | .has-text-align-left { |
| 458 | text-align: left; |
| 459 | } |
| 460 | .has-text-align-center { |
| 461 | text-align: center; |
| 462 | } |
| 463 | |
| 464 | /*-------------------------------------------*/ |
| 465 | /* ソーシャルアイコン |
| 466 | /*-------------------------------------------*/ |
| 467 | .wp-block-social-links{ |
| 468 | flex-wrap: wrap; |
| 469 | } |
| 470 | |
| 471 | /*-------------------------------------------*/ |
| 472 | /* col-xxl |
| 473 | /*-------------------------------------------*/ |
| 474 | $xxl-min: 1400px; |
| 475 | .col { |
| 476 | // Bootstrap4 では xxl サイズがないので独自に追加 |
| 477 | @media (min-width: $xxl-min) { |
| 478 | &-xxl-2 { |
| 479 | flex: 0 0 16.66667%; |
| 480 | max-width: 16.66667%; |
| 481 | } |
| 482 | &-xxl-3 { |
| 483 | flex: 0 0 25%; |
| 484 | max-width: 25%; |
| 485 | } |
| 486 | &-xxl-4 { |
| 487 | flex: 0 0 33.33333%; |
| 488 | max-width: 33.33333%; |
| 489 | } |
| 490 | &-xxl-6 { |
| 491 | flex: 0 0 50%; |
| 492 | max-width: 50%; |
| 493 | } |
| 494 | &-xxl-12 { |
| 495 | flex: 0 0 100%; |
| 496 | max-width: 100%; |
| 497 | } |
| 498 | } |
| 499 | } |
| 500 |