113 lines
1.8 KiB
SCSS
113 lines
1.8 KiB
SCSS
@import '../../styles/abstracts/variables';
|
|
|
|
.antd-img-crop-modal {
|
|
@include mobile {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.ant-modal {
|
|
@include mobile {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
top: auto;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
&-content {
|
|
@include mobile {
|
|
border-radius: 0 !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&-body {
|
|
padding: 0;
|
|
|
|
@include mobile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.antd-img-crop-container {
|
|
background-color: rgba($black, 0.7);
|
|
margin-bottom: 0;
|
|
|
|
@include mobile {
|
|
flex: 1;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
.reactEasyCrop_CropArea {
|
|
border: 3px solid $white;
|
|
}
|
|
|
|
.antd-img-crop-control {
|
|
margin: 24px auto 24px;
|
|
}
|
|
|
|
.ant-slider {
|
|
&-rail {
|
|
background-color: $border;
|
|
border-radius: 4px;
|
|
transition: none;
|
|
}
|
|
|
|
&-track {
|
|
background-color: $primary;
|
|
}
|
|
|
|
&-handle {
|
|
border-color: $primary;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-top: -15px;
|
|
|
|
@include mobile {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-top: -10px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.ant-slider-rail {
|
|
background-color: $border;
|
|
}
|
|
|
|
.ant-slider-track {
|
|
background-color: $primary;
|
|
}
|
|
|
|
.ant-slider-handle {
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-modal-footer {
|
|
padding: 24px;
|
|
|
|
.ant-btn {
|
|
&:first-child {
|
|
display: none;
|
|
}
|
|
|
|
&.ant-btn-primary {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
height: 56px;
|
|
font-size: 16px;
|
|
font-weight: $semi-bold;
|
|
}
|
|
}
|
|
}
|
|
}
|