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