123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- .vdr {
- box-sizing: border-box;
- border: solid 1px transparent;
- &:hover {
- & > .move-stick {
- visibility: visible;
- }
- }
- & > div{
- height: 100%;
- }
- & > .move-stick {
- visibility: hidden;
- position: absolute;
- bottom: calc(100% + 1px);
- left: calc(50% - 25px);
- width: 50px;
- height: 26px;
- background-color: #ffffff;
- box-shadow: 0px 6px 8px 0px
- rgba(96, 96, 97, 0.15);
- border-radius: 6px;
- text-align: center;
- z-index: 5;
- }
- &.active:before{
- content: '';
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- outline: 1px dashed #565658;
- }
- &:hover{
- border: dotted 1px #d6d6d6
- }
- .vdr-stick {
- box-sizing: border-box;
- position: absolute;
- border-radius: 2px;
- font-size: 1px;
- background: #ffffff;
- z-index: 2;
- & > i {
- position: relative;
- top: -3px;
- left: 1px;
- }
- &.not-resizable{
- display: none;
- }
- }
- &.inactive>.vdr-stick {
- display: none;
- }
- }
- .vdr-stick-tl, .vdr-stick-br {
- cursor: nwse-resize;
- }
- .vdr-stick-tm, .vdr-stick-bm {
- left: 50%;
- cursor: ns-resize;
- }
- .vdr-stick-tr, .vdr-stick-bl {
- cursor: nesw-resize;
- }
- .vdr-stick-ml, .vdr-stick-mr {
- top: 50%;
- cursor: ew-resize;
- }
- .vdr .set-icon{
- position: absolute;
- top: 0;
- left: 0;
- z-index: 10;
- background: #E0E0E0;
- width: 20px;
- height: 20px;
- cursor: pointer;
- border-bottom-right-radius: 20px;
- display: none;
- i{
- margin-left: 2px;
- color: white;
- font-size: 10px;
- }
- &:hover{
- background: #5873D7;
- }
- }
- .vdr:hover .set-icon{
- display: inline-block;
- }
- .set-position{
- padding: 8px;
- span{
- display: inline-block;
- vertical-align: middle;
- }
- input{
- width: 65px;
- height: 32px;
- }
- p{
- display: inline-block;
- width: 80px;
- height: 32px;
- line-height: 32px;
- padding-left: 4px;
- color: #000;
- border: solid 1px #AAAAAA;
- position: relative;
- top: 2px;
- }
- i{
- margin-left: 10px;
- color: #000;
- font-size: 15px;
- &:hover{
- color: #76BCEF;
- }
- }
- select{
- width: 80px;
- height: 32px;
- position: relative;
- top: 2px;
- }
- button{
- padding: 3px 8px;
- margin: 0 35px;
- }
- }
|