parent
703de932c3
commit
31ceeaff95
9 changed files with 1421 additions and 10 deletions
@ -0,0 +1,890 @@ |
|||||||
|
.rdw-option-wrapper { |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
padding: 5px; |
||||||
|
min-width: 25px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 2px; |
||||||
|
margin: 0 4px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
background: white; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
.rdw-option-wrapper:hover { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-option-wrapper:active { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-option-active { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-option-disabled { |
||||||
|
opacity: 0.3; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-dropdown-wrapper { |
||||||
|
height: 30px; |
||||||
|
background: white; |
||||||
|
cursor: pointer; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
margin: 0 3px; |
||||||
|
text-transform: capitalize; |
||||||
|
background: white; |
||||||
|
} |
||||||
|
.rdw-dropdown-wrapper:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-dropdown-wrapper:hover { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
.rdw-dropdown-wrapper:active { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-dropdown-carettoopen { |
||||||
|
height: 0px; |
||||||
|
width: 0px; |
||||||
|
position: absolute; |
||||||
|
top: 35%; |
||||||
|
right: 10%; |
||||||
|
border-top: 6px solid black; |
||||||
|
border-left: 5px solid transparent; |
||||||
|
border-right: 5px solid transparent; |
||||||
|
} |
||||||
|
.rdw-dropdown-carettoclose { |
||||||
|
height: 0px; |
||||||
|
width: 0px; |
||||||
|
position: absolute; |
||||||
|
top: 35%; |
||||||
|
right: 10%; |
||||||
|
border-bottom: 6px solid black; |
||||||
|
border-left: 5px solid transparent; |
||||||
|
border-right: 5px solid transparent; |
||||||
|
} |
||||||
|
.rdw-dropdown-selectedtext { |
||||||
|
display: flex; |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
align-items: center; |
||||||
|
padding: 0 5px; |
||||||
|
} |
||||||
|
.rdw-dropdown-optionwrapper { |
||||||
|
z-index: 100; |
||||||
|
position: relative; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
width: 98%; |
||||||
|
background: white; |
||||||
|
border-radius: 2px; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
max-height: 250px; |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
.rdw-dropdown-optionwrapper:hover { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-dropdownoption-default { |
||||||
|
min-height: 25px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0 5px; |
||||||
|
} |
||||||
|
.rdw-dropdownoption-highlighted { |
||||||
|
background: #F1F1F1; |
||||||
|
} |
||||||
|
.rdw-dropdownoption-active { |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
.rdw-dropdownoption-disabled { |
||||||
|
opacity: 0.3; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-inline-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-inline-dropdown { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
.rdw-inline-dropdownoption { |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-block-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-block-dropdown { |
||||||
|
width: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-fontsize-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-fontsize-dropdown { |
||||||
|
min-width: 40px; |
||||||
|
} |
||||||
|
.rdw-fontsize-option { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-fontfamily-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-fontfamily-dropdown { |
||||||
|
width: 115px; |
||||||
|
} |
||||||
|
.rdw-fontfamily-placeholder { |
||||||
|
white-space: nowrap; |
||||||
|
max-width: 90px; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
.rdw-fontfamily-optionwrapper { |
||||||
|
width: 140px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-list-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-list-dropdown { |
||||||
|
width: 50px; |
||||||
|
z-index: 90; |
||||||
|
} |
||||||
|
.rdw-list-dropdownOption { |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-text-align-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-text-align-dropdown { |
||||||
|
width: 50px; |
||||||
|
z-index: 90; |
||||||
|
} |
||||||
|
.rdw-text-align-dropdownOption { |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.rdw-right-aligned-block { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.rdw-left-aligned-block { |
||||||
|
text-align: left !important; |
||||||
|
} |
||||||
|
.rdw-center-aligned-block { |
||||||
|
text-align: center !important; |
||||||
|
} |
||||||
|
.rdw-justify-aligned-block { |
||||||
|
text-align: justify !important; |
||||||
|
} |
||||||
|
.rdw-right-aligned-block > div { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.rdw-left-aligned-block > div { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.rdw-center-aligned-block > div { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.rdw-justify-aligned-block > div { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-colorpicker-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
position: relative; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-colorpicker-modal { |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 5px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 175px; |
||||||
|
height: 175px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
padding: 15px; |
||||||
|
border-radius: 2px; |
||||||
|
z-index: 100; |
||||||
|
background: white; |
||||||
|
box-shadow: 3px 3px 5px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-colorpicker-modal-header { |
||||||
|
display: flex; |
||||||
|
padding-bottom: 5px; |
||||||
|
} |
||||||
|
.rdw-colorpicker-modal-style-label { |
||||||
|
font-size: 15px; |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
padding: 0 10px 5px; |
||||||
|
} |
||||||
|
.rdw-colorpicker-modal-style-label-active { |
||||||
|
border-bottom: 2px solid #0a66b7; |
||||||
|
} |
||||||
|
.rdw-colorpicker-modal-options { |
||||||
|
margin: 5px auto; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
flex-wrap: wrap; |
||||||
|
overflow: scroll; |
||||||
|
} |
||||||
|
.rdw-colorpicker-cube { |
||||||
|
width: 22px; |
||||||
|
height: 22px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
} |
||||||
|
.rdw-colorpicker-option { |
||||||
|
margin: 3px; |
||||||
|
padding: 0; |
||||||
|
min-height: 20px; |
||||||
|
border: none; |
||||||
|
width: 22px; |
||||||
|
height: 22px; |
||||||
|
min-width: 22px; |
||||||
|
box-shadow: 1px 2px 1px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-colorpicker-option:hover { |
||||||
|
box-shadow: 1px 2px 1px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-colorpicker-option:active { |
||||||
|
box-shadow: -1px -2px 1px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-colorpicker-option-active { |
||||||
|
box-shadow: 0px 0px 2px 2px #BFBDBD; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-link-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
position: relative; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-link-dropdown { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
.rdw-link-dropdownOption { |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.rdw-link-dropdownPlaceholder { |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
.rdw-link-modal { |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 5px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 235px; |
||||||
|
height: 205px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
padding: 15px; |
||||||
|
border-radius: 2px; |
||||||
|
z-index: 100; |
||||||
|
background: white; |
||||||
|
box-shadow: 3px 3px 5px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-link-modal-label { |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
.rdw-link-modal-input { |
||||||
|
margin-top: 5px; |
||||||
|
border-radius: 2px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
height: 25px; |
||||||
|
margin-bottom: 15px; |
||||||
|
padding: 0 5px; |
||||||
|
} |
||||||
|
.rdw-link-modal-input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-link-modal-buttonsection { |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
.rdw-link-modal-target-option { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.rdw-link-modal-target-option > span { |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
.rdw-link-modal-btn { |
||||||
|
margin-left: 10px; |
||||||
|
width: 75px; |
||||||
|
height: 30px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
cursor: pointer; |
||||||
|
background: white; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
.rdw-link-modal-btn:hover { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-link-modal-btn:active { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-link-modal-btn:focus { |
||||||
|
outline: none !important; |
||||||
|
} |
||||||
|
.rdw-link-modal-btn:disabled { |
||||||
|
background: #ece9e9; |
||||||
|
} |
||||||
|
.rdw-link-dropdownoption { |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.rdw-history-dropdown { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-embedded-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
position: relative; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-embedded-modal { |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 5px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 235px; |
||||||
|
height: 180px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
padding: 15px; |
||||||
|
border-radius: 2px; |
||||||
|
z-index: 100; |
||||||
|
background: white; |
||||||
|
justify-content: space-between; |
||||||
|
box-shadow: 3px 3px 5px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-header { |
||||||
|
font-size: 15px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-header-option { |
||||||
|
width: 50%; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-header-label { |
||||||
|
width: 95px; |
||||||
|
border: 1px solid #f1f1f1; |
||||||
|
margin-top: 5px; |
||||||
|
background: #6EB8D4; |
||||||
|
border-bottom: 2px solid #0a66b7; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-link-section { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-link-input { |
||||||
|
width: 88%; |
||||||
|
height: 35px; |
||||||
|
margin: 10px 0; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 15px; |
||||||
|
padding: 0 5px; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-link-input-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-link-input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-btn-section { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-btn { |
||||||
|
margin: 0 3px; |
||||||
|
width: 75px; |
||||||
|
height: 30px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
cursor: pointer; |
||||||
|
background: white; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-btn:hover { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-btn:active { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-btn:focus { |
||||||
|
outline: none !important; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-btn:disabled { |
||||||
|
background: #ece9e9; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-size { |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
margin: 8px 0; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-size-input { |
||||||
|
width: 80%; |
||||||
|
height: 20px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.rdw-embedded-modal-size-input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-emoji-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
position: relative; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-emoji-modal { |
||||||
|
overflow: auto; |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 5px; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
width: 235px; |
||||||
|
height: 180px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
padding: 15px; |
||||||
|
border-radius: 2px; |
||||||
|
z-index: 100; |
||||||
|
background: white; |
||||||
|
box-shadow: 3px 3px 5px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-emoji-icon { |
||||||
|
margin: 2.5px; |
||||||
|
height: 24px; |
||||||
|
width: 24px; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 22px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-spinner { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.rdw-spinner > div { |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: #333; |
||||||
|
|
||||||
|
border-radius: 100%; |
||||||
|
display: inline-block; |
||||||
|
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; |
||||||
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both; |
||||||
|
} |
||||||
|
.rdw-spinner .rdw-bounce1 { |
||||||
|
-webkit-animation-delay: -0.32s; |
||||||
|
animation-delay: -0.32s; |
||||||
|
} |
||||||
|
.rdw-spinner .rdw-bounce2 { |
||||||
|
-webkit-animation-delay: -0.16s; |
||||||
|
animation-delay: -0.16s; |
||||||
|
} |
||||||
|
@-webkit-keyframes sk-bouncedelay { |
||||||
|
0%, 80%, 100% { -webkit-transform: scale(0) } |
||||||
|
40% { -webkit-transform: scale(1.0) } |
||||||
|
} |
||||||
|
@keyframes sk-bouncedelay { |
||||||
|
0%, 80%, 100% { |
||||||
|
-webkit-transform: scale(0); |
||||||
|
transform: scale(0); |
||||||
|
} 40% { |
||||||
|
-webkit-transform: scale(1.0); |
||||||
|
transform: scale(1.0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-image-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
position: relative; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-image-modal { |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 5px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 235px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
padding: 15px; |
||||||
|
border-radius: 2px; |
||||||
|
z-index: 100; |
||||||
|
background: white; |
||||||
|
box-shadow: 3px 3px 5px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-image-modal-header { |
||||||
|
font-size: 15px; |
||||||
|
margin: 10px 0; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.rdw-image-modal-header-option { |
||||||
|
width: 50%; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.rdw-image-modal-header-label { |
||||||
|
width: 80px; |
||||||
|
background: #f1f1f1; |
||||||
|
border: 1px solid #f1f1f1; |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
.rdw-image-modal-header-label-highlighted { |
||||||
|
background: #6EB8D4; |
||||||
|
border-bottom: 2px solid #0a66b7; |
||||||
|
} |
||||||
|
.rdw-image-modal-upload-option { |
||||||
|
width: 100%; |
||||||
|
color: gray; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
border: none; |
||||||
|
font-size: 15px; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-color: #f1f1f1; |
||||||
|
outline: 2px dashed gray; |
||||||
|
outline-offset: -10px; |
||||||
|
margin: 10px 0; |
||||||
|
padding: 9px 0; |
||||||
|
} |
||||||
|
.rdw-image-modal-upload-option-highlighted { |
||||||
|
outline: 2px dashed #0a66b7; |
||||||
|
} |
||||||
|
.rdw-image-modal-upload-option-label { |
||||||
|
cursor: pointer; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 15px; |
||||||
|
} |
||||||
|
.rdw-image-modal-upload-option-label span{ |
||||||
|
padding: 0 20px; |
||||||
|
} |
||||||
|
.rdw-image-modal-upload-option-image-preview { |
||||||
|
max-width: 100%; |
||||||
|
max-height: 200px; |
||||||
|
} |
||||||
|
.rdw-image-modal-upload-option-input { |
||||||
|
width: 0.1px; |
||||||
|
height: 0.1px; |
||||||
|
opacity: 0; |
||||||
|
overflow: hidden; |
||||||
|
position: absolute; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
.rdw-image-modal-url-section { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.rdw-image-modal-url-input { |
||||||
|
width: 90%; |
||||||
|
height: 35px; |
||||||
|
margin: 15px 0 12px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 15px; |
||||||
|
padding: 0 5px; |
||||||
|
} |
||||||
|
.rdw-image-modal-btn-section { |
||||||
|
margin: 10px auto 0; |
||||||
|
} |
||||||
|
.rdw-image-modal-url-input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-image-modal-btn { |
||||||
|
margin: 0 5px; |
||||||
|
width: 75px; |
||||||
|
height: 30px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
cursor: pointer; |
||||||
|
background: white; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
.rdw-image-modal-btn:hover { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD; |
||||||
|
} |
||||||
|
.rdw-image-modal-btn:active { |
||||||
|
box-shadow: 1px 1px 0px #BFBDBD inset; |
||||||
|
} |
||||||
|
.rdw-image-modal-btn:focus { |
||||||
|
outline: none !important; |
||||||
|
} |
||||||
|
.rdw-image-modal-btn:disabled { |
||||||
|
background: #ece9e9; |
||||||
|
} |
||||||
|
.rdw-image-modal-spinner { |
||||||
|
position: absolute; |
||||||
|
top: -3px; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
.rdw-image-modal-alt-input { |
||||||
|
width: 70%; |
||||||
|
height: 20px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 12px; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
.rdw-image-modal-alt-input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-image-modal-alt-lbl { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.rdw-image-modal-size { |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
margin: 8px 0; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.rdw-image-modal-size-input { |
||||||
|
width: 40%; |
||||||
|
height: 20px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.rdw-image-modal-size-input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-image-mandatory-sign { |
||||||
|
color: red; |
||||||
|
margin-left: 3px; |
||||||
|
margin-right: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-remove-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
position: relative; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-history-wrapper { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 6px; |
||||||
|
flex-wrap: wrap |
||||||
|
} |
||||||
|
.rdw-history-dropdownoption { |
||||||
|
height: 40px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.rdw-history-dropdown { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-link-decorator-wrapper { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.rdw-link-decorator-icon { |
||||||
|
position: absolute; |
||||||
|
left: 40%; |
||||||
|
top: 0; |
||||||
|
cursor: pointer; |
||||||
|
background-color: white; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-mention-link { |
||||||
|
text-decoration: none; |
||||||
|
color: #1236ff; |
||||||
|
background-color: #f0fbff; |
||||||
|
padding: 1px 2px; |
||||||
|
border-radius: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-suggestion-wrapper { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.rdw-suggestion-dropdown { |
||||||
|
position: absolute; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
min-width: 100px; |
||||||
|
max-height: 150px; |
||||||
|
overflow: auto; |
||||||
|
background: white; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
.rdw-suggestion-option { |
||||||
|
padding: 7px 5px; |
||||||
|
border-bottom: 1px solid #f1f1f1; |
||||||
|
} |
||||||
|
.rdw-suggestion-option-active { |
||||||
|
background-color: #F1F1F1; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-hashtag-link { |
||||||
|
text-decoration: none; |
||||||
|
color: #1236ff; |
||||||
|
background-color: #f0fbff; |
||||||
|
padding: 1px 2px; |
||||||
|
border-radius: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-image-alignment-options-popup { |
||||||
|
position: absolute; |
||||||
|
background: white; |
||||||
|
display: flex; |
||||||
|
padding: 5px 2px; |
||||||
|
border-radius: 2px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
width: 105px; |
||||||
|
cursor: pointer; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
.rdw-alignment-option-left { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
.rdw-image-alignment-option { |
||||||
|
height: 15px; |
||||||
|
width: 15px; |
||||||
|
min-width: 15px; |
||||||
|
} |
||||||
|
.rdw-image-alignment { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.rdw-image-imagewrapper { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.rdw-image-center { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.rdw-image-left { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.rdw-image-right { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
.rdw-image-alignment-options-popup-right { |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.rdw-editor-main { |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.rdw-editor-toolbar { |
||||||
|
padding: 6px 5px 0; |
||||||
|
border-radius: 2px; |
||||||
|
border: 1px solid #F1F1F1; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
background: white; |
||||||
|
flex-wrap: wrap; |
||||||
|
font-size: 15px; |
||||||
|
margin-bottom: 5px; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
.public-DraftStyleDefault-block { |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
.rdw-editor-wrapper:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rdw-editor-wrapper { |
||||||
|
box-sizing: content-box; |
||||||
|
} |
||||||
|
.rdw-editor-main blockquote { |
||||||
|
border-left: 5px solid #f1f1f1; |
||||||
|
padding-left: 5px; |
||||||
|
background-color: red; |
||||||
|
} |
||||||
|
.rdw-editor-main pre { |
||||||
|
background: red; |
||||||
|
border-radius: 30px; |
||||||
|
padding: 1px 10px; |
||||||
|
} |
||||||
|
/** |
||||||
|
* Draft v0.9.1 |
||||||
|
* |
||||||
|
* Copyright (c) 2013-present, Facebook, Inc. |
||||||
|
* All rights reserved. |
||||||
|
* |
||||||
|
* This source code is licensed under the BSD-style license found in the |
||||||
|
* LICENSE file in the root directory of this source tree. An additional grant |
||||||
|
* of patent rights can be found in the PATENTS file in the same directory. |
||||||
|
*/ |
||||||
|
.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:300px;text-align:right;background-color: white ;padding: 0px 5px;}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:right}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:right}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin: 0px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4} |
||||||
|
|
||||||
|
|
||||||
|
/*# sourceMappingURL=react-draft-wysiwyg.css.map*/ |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Editor } from "react-draft-wysiwyg"; |
||||||
|
import AddPic from "../components/addPic"; |
||||||
|
import './editor.css'; |
||||||
|
|
||||||
|
const MainAP = () => { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col py-4 px-10 items-center rtl"> |
||||||
|
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65"> |
||||||
|
اضافه کردن محصول جدید |
||||||
|
</h1> |
||||||
|
<input type='text' className="w-full h-14 rtl px-4 bg-white border border-blueCD text-blue3A rounded-lg outline-none focus:shadow-md font-bold" placeholder="نام محصول" /> |
||||||
|
<div className="w-full my-6 rtl text-right border border-grayE0 bg-white rounded-xl" > |
||||||
|
<Editor |
||||||
|
// editorState={editorState}
|
||||||
|
toolbarClassName="toolbarClassName" |
||||||
|
wrapperClassName="wrapperClassName" |
||||||
|
editorClassName="editorClassName" |
||||||
|
// onEditorStateChange={this.onEditorStateChange}
|
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="flex justify-between w-full"> |
||||||
|
<AddPic /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default MainAP; |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
|
||||||
|
const SideAP = () => { |
||||||
|
return( |
||||||
|
<div className=" w-full bg-green-200"> |
||||||
|
|
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default SideAP; |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import React, {useState, useEffect} from "react"; |
||||||
|
|
||||||
|
const AddPic = () => { |
||||||
|
const [imageUrl, setImageUrl] = useState([]); |
||||||
|
const [selectedImage, setSelectedImage] = useState(null); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (selectedImage) { |
||||||
|
imageUrl.push(URL.createObjectURL(selectedImage)); |
||||||
|
|
||||||
|
console.log(imageUrl) |
||||||
|
} |
||||||
|
|
||||||
|
}, [selectedImage]); |
||||||
|
return( |
||||||
|
<div className="w-2/5 bg-white border rounded-lg border-grayE0 flex flex-col py-6"> |
||||||
|
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65"> |
||||||
|
تصویر شاخص / گالری |
||||||
|
</h1> |
||||||
|
<div className="w-full px-4 flex items-center"> |
||||||
|
<div> |
||||||
|
{ |
||||||
|
imageUrl.length > 0 && <div className="w-32 h-32 rounded-xl flex flex-col items-center"> |
||||||
|
<img src={imageUrl[0]} className="h-full w-32 rounded-lg" /> |
||||||
|
{/* <p className="">تصویر شاخص</p> */} |
||||||
|
</div> |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div className="flex flex-wrap items-center"> |
||||||
|
{ |
||||||
|
imageUrl.slice(1,imageUrl.length).map((item, index) => ( |
||||||
|
<img src={item} className="w-16 h-16 m-2 rounded-md"/> |
||||||
|
)) |
||||||
|
} |
||||||
|
|
||||||
|
<input type='file' className="hidden" id="productImageInput" onChange={e => {setSelectedImage(e.target.files[0]);}}/> |
||||||
|
<label htmlFor="productImageInput" |
||||||
|
className="bg-gray-200 w-16 h-16 flex items-center justify-center rounded-md m-2 text-3xl text-gray81 cursor-pointer hover:bg-gray-300"> |
||||||
|
+ |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default AddPic; |
||||||
Loading…
Reference in new issue