deprecated
2 weeks ago
block.json
1 month ago
edit.js
2 months ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
save.js
2 months ago
style.scss
2 months ago
style.scss
108 lines
| 1 | //* .flowBox |
| 2 | /*-------------------------------------------*/ |
| 3 | $xs-max: 575.98px; |
| 4 | $sm-max: 767.98px; |
| 5 | $md-max: 991.98px; |
| 6 | $lg-max: 1199.98px; |
| 7 | $xl-max: 1399.98px; |
| 8 | |
| 9 | $sm-min: 576px; |
| 10 | $md-min: 768px; |
| 11 | $lg-min: 992px; |
| 12 | $xl-min: 1200px; |
| 13 | $xxl-min: 1200px; |
| 14 | |
| 15 | .vk_flow{ // 編集画面でcssの指定が軽くて負けるので、優� |
| 16 | �させるため記述 |
| 17 | margin-block-start:0; //global-styles-inline-cssのmargin-block-startがつくので打ち消し |
| 18 | margin-bottom: 0; |
| 19 | .vk_flow_frame { |
| 20 | display: flex; |
| 21 | padding: 20px 25px; |
| 22 | border: 3px solid #e5e5e5; |
| 23 | margin: 0; |
| 24 | justify-content: space-between; |
| 25 | @media (max-width: $xs-max) { |
| 26 | flex-wrap: wrap; |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | .vk_flow_frame_text { |
| 31 | display: block; |
| 32 | overflow: hidden; |
| 33 | margin: 0; |
| 34 | box-sizing: border-box; |
| 35 | width: 100%; |
| 36 | @media (max-width: $xs-max) { |
| 37 | margin-bottom: 1em; |
| 38 | } |
| 39 | @media (min-width: $sm-min) { |
| 40 | margin-right: 15px; |
| 41 | } |
| 42 | } |
| 43 | |
| 44 | .vk_flow_frame_text_title, |
| 45 | .vk_flow_frame_text_content { |
| 46 | padding-left: 0; |
| 47 | border: none; |
| 48 | } |
| 49 | |
| 50 | .vk_flow_frame_text_title { |
| 51 | border-bottom: 1px dotted #ccc; |
| 52 | margin: 0 0 10px; |
| 53 | padding: 0 0 5px; |
| 54 | font-size: 1.2em; |
| 55 | } |
| 56 | |
| 57 | .vk_flow_frame_text_content { |
| 58 | margin-bottom: 0; |
| 59 | margin-inline-start: 0; |
| 60 | margin-left:0; |
| 61 | } |
| 62 | |
| 63 | .vk_flow_frame_image { |
| 64 | max-width: 150px; |
| 65 | box-sizing: border-box; |
| 66 | img { |
| 67 | max-width: 100%; |
| 68 | height: auto; |
| 69 | } |
| 70 | } |
| 71 | |
| 72 | &.vk_flow-arrow-on::after, |
| 73 | > .vk_flow_frame_arrow { |
| 74 | position: relative; |
| 75 | content: ""; |
| 76 | background: var(--vk_flow-arrow) center 50% no-repeat; |
| 77 | background-size: 50px 50px; |
| 78 | display: block; |
| 79 | overflow: hidden; |
| 80 | height: 50px; |
| 81 | width: 50px; |
| 82 | margin: 0 auto; |
| 83 | } |
| 84 | |
| 85 | &.vk_flow-arrow-off { |
| 86 | padding-bottom: 0; |
| 87 | margin-bottom: 30px; |
| 88 | } |
| 89 | |
| 90 | &.vk_flow-arrow-off::after { |
| 91 | content: ""; |
| 92 | font-size: 0; |
| 93 | background-image: none; |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | // 編集画面 |
| 98 | // コア側のcssで矢印(after要素)の位置がおかしくなるので上書き |
| 99 | .editor-styles-wrapper { |
| 100 | .vk_flow-arrow-on::after { |
| 101 | background: none; |
| 102 | display: unset; |
| 103 | height: unset; |
| 104 | width: unset; |
| 105 | margin: unset; |
| 106 | overflow: unset; |
| 107 | } |
| 108 | } |