deprecated
5 years ago
block.js
5 years ago
component.js
5 years ago
icon.svg
5 years ago
style.css
6 years ago
style.css.map
6 years ago
style.scss
5 years ago
style.scss
141 lines
| 1 | .vk_button { |
| 2 | margin: 5px 0; |
| 3 | text-align: center; /* テキストのみの時のセンター揃え */ |
| 4 | &-color-custom { |
| 5 | a:hover { |
| 6 | opacity: 0.8; |
| 7 | box-shadow: 0 0 0 0.2rem rgba(171, 184, 195, 0.25); |
| 8 | } |
| 9 | } |
| 10 | |
| 11 | &-align { |
| 12 | &-left { |
| 13 | text-align: left; |
| 14 | } |
| 15 | |
| 16 | &-center { |
| 17 | text-align: center; |
| 18 | } |
| 19 | |
| 20 | &-right { |
| 21 | text-align: right; |
| 22 | } |
| 23 | |
| 24 | &-block { |
| 25 | display: block; |
| 26 | } |
| 27 | &-wide { |
| 28 | display: block; |
| 29 | margin-left: auto; |
| 30 | margin-right: auto; |
| 31 | max-width: 70%; |
| 32 | .btn { |
| 33 | display: block; |
| 34 | } |
| 35 | } |
| 36 | } |
| 37 | |
| 38 | &_link { |
| 39 | min-width: 100px; |
| 40 | min-height: 30px; |
| 41 | |
| 42 | &-type-text { |
| 43 | box-shadow: none; |
| 44 | padding: 0; |
| 45 | &:hover { |
| 46 | background: none; |
| 47 | box-shadow: none; |
| 48 | } |
| 49 | } |
| 50 | |
| 51 | &.btn { |
| 52 | // .btn指定がないと管理画面で標準の .btn の指定に負ける |
| 53 | padding-top: 0.7em; |
| 54 | padding-bottom: 0.6em; |
| 55 | user-select: text; |
| 56 | } |
| 57 | |
| 58 | &_before { |
| 59 | margin-right: 0.7rem; |
| 60 | } |
| 61 | |
| 62 | &_after { |
| 63 | margin-left: 0.7rem; |
| 64 | } |
| 65 | |
| 66 | &_subCaption { |
| 67 | display: block; |
| 68 | overflow: hidden; |
| 69 | margin: 0; |
| 70 | font-size: 80%; |
| 71 | } |
| 72 | } |
| 73 | .vk_button_link-type-text{ |
| 74 | &:hover{ |
| 75 | &.btn-outline-primary{color: #007bff;} |
| 76 | &.btn-outline-secondary{color: #6c757d;} |
| 77 | &.btn-outline-success{color: #28a745;} |
| 78 | &.btn-outline-info{color: #17a2b8;} |
| 79 | &.btn-outline-warning{color: #ffc107;} |
| 80 | &.btn-outline-danger{color: #dc3545;} |
| 81 | &.btn-outline-dark{ color: #343a40;} |
| 82 | } |
| 83 | &.btn-outline-light{ color: #212529; } |
| 84 | } |
| 85 | |
| 86 | .editor-styles-wrapper &{ |
| 87 | //.editor-styles-wrapper a:not([href])に負けるので追加 |
| 88 | a, |
| 89 | a:hover{ |
| 90 | &.btn-primary{ background-color: #007bff; border-color: #007bff; } |
| 91 | &.btn-primary, |
| 92 | &.btn-secondary, |
| 93 | &.btn-success, |
| 94 | &.btn-info, |
| 95 | &.btn-danger, |
| 96 | &.btn-dark { |
| 97 | color: #fff; |
| 98 | } |
| 99 | } |
| 100 | a{ |
| 101 | &.vk_button_link-type-text:hover.btn-outline-primary{ |
| 102 | color: #007bff; |
| 103 | } |
| 104 | &.btn-outline-primary{ |
| 105 | color: #007bff; |
| 106 | border-color: #007bff; |
| 107 | &:hover:not(.vk_button_link-type-text){ |
| 108 | background-color:#007bff; |
| 109 | } |
| 110 | } |
| 111 | &.btn-outline-secondary{color: #6c757d;} |
| 112 | &.btn-outline-success{color: #28a745;} |
| 113 | &.btn-outline-info{color: #17a2b8;} |
| 114 | &.btn-outline-warning{color: #ffc107;} |
| 115 | &.btn-outline-danger{color: #dc3545;} |
| 116 | &.btn-outline-dark{ color: #343a40;} |
| 117 | } |
| 118 | a:hover{ |
| 119 | &.btn-outline-primary, |
| 120 | &.btn-outline-secondary, |
| 121 | &.btn-outline-success, |
| 122 | &.btn-outline-info, |
| 123 | &.btn-outline-danger, |
| 124 | &.btn-outline-dark{ |
| 125 | color: #fff; |
| 126 | } |
| 127 | } |
| 128 | } |
| 129 | .editor-rich-text { |
| 130 | // Font Awesomeアイコンが管理画面側で改行されないために inline-block を指定 |
| 131 | display: inline-block; |
| 132 | } |
| 133 | } |
| 134 | |
| 135 | .vk_button-color-custom { |
| 136 | .vk_button_link-type-text:hover { |
| 137 | box-shadow: none; |
| 138 | } |
| 139 | } |
| 140 | |
| 141 |