@phoenix-plugin-registry/swmitra.html-designer
Version:
NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.
161 lines (141 loc) • 10.3 kB
HTML
<style>
#text-toolbox {
position: absolute;
height: 130px;
left: 139px;
top: 87px;
width: 434px;
background-color: rgb(74, 77, 78);
display: none;
}
.text-control-button-holder {
border: 1px solid gray;
padding: 1px;
border-radius: 5px;
position: absolute;
}
#text-color-input {
height: 23px;
width: 110px;
position: absolute;
top: 2px;
left: 31px;
}
#text-bg-color-input {
height: 23px;
width: 110px;
position: absolute;
top: 2px;
left: 31px;
}
#text-size-input {
position: absolute;
left: 31px;
top: 2px;
height: 23px;
width: 24px;
}
#text-indent-input {
position: absolute;
left: 32px;
top: 2px;
height: 23px;
width: 30px;
}
#line-height-input {
position: absolute;
left: 31px;
top: 2px;
height: 23px;
width: 24px;
}
#text-direction-select {
width: 49px;
height: 28px;
}
.text-toolbox-icon-button {
width: 30px;
height: 27px;
}
.activeTextControl {
background-color: #288edf ;
color:white ;
}
</style>
<div id="text-toolbox" class="property-toolbox">
<div class="propertyToolboxHeader">Text Toolbox
<a class="close" id="text-toolbox-close" >×</a>
<div class="toolboxHeaderBottom"></div>
</div>
<div class="text-control-button-holder" style="left: 9px; top: 7px;" id="align-button-holder">
<button type="button" id="text-align-left" class="topcoat-button text-toolbox-icon-button" name="left" title="Text Align Left"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" id="text-align-center" class="topcoat-button text-toolbox-icon-button" name="center" title="Text Align Center"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</button>
<button type="button" id="text-align-right" class="topcoat-button text-toolbox-icon-button" name="right" title="Text Align Right"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</button>
<button type="button" id="text-align-justify" class="topcoat-button text-toolbox-icon-button" name="justify" title="Text Align Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
</button>
<button type="button" id="text-align-justify" class="topcoat-button text-toolbox-icon-button" name="" title="Remove Align Property"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
</button>
</div>
<div class="text-control-button-holder" style="top: 7px; left: 194px;" id="decoration-button-holder">
<button type="button" id="text-deco-none" class="topcoat-button text-toolbox-icon-button decoration-button" data-key="text-decoration" data-value="none" title="Text Decoration None"><span class="glyphicon glyphicon-font" aria-hidden="true"></span>
</button>
<button type="button" id="text-deco-bold" class="topcoat-button text-toolbox-icon-button weight-button" style="width: 31px; height: 27px;" data-key="font-weight" data-value="bold" title="Text Decoration Bold"><span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
</button>
<button type="button" id="text-deco-italic" class="topcoat-button text-toolbox-icon-button style-button" name="italic" data-key="font-style" data-value="italic" title="Text Decoration Italic"><span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
</button>
<button type="button" id="text-deco-st" class="topcoat-button text-toolbox-icon-button decoration-button" name="line-through" data-key="text-decoration" data-value="line-through" title="Text Decoration Line Through"><span class="glyphicon" aria-hidden="true" style="font-size:15px;margin-top:-4px;text-decoration:line-through;">S</span>
</button>
<button type="button" id="text-deco-overline" class="topcoat-button text-toolbox-icon-button decoration-button" name="overline" data-key="text-decoration" data-value="overline" title="Text Decoration Overline"><span class="glyphicon" aria-hidden="true" style="font-size:15px;margin-top:-4px;text-decoration:overline;">O</span>
</button>
<button type="button" id="text-deco-underline" class="topcoat-button text-toolbox-icon-button decoration-button" name="underline" data-value="underline" style="width: 30px; height: 27px; margin-top: 0px; margin-left: 0px;" data-key="text-decoration" data-value="underline" title="Text Decoration Underline"><span class="glyphicon" aria-hidden="true" style="font-size:15px;margin-top:-4px;text-decoration:underline;">U</span>
</button>
<button type="button" id="reset-text-decoration" class="topcoat-button" title="Remove Text Decoration Property" style="width: 30px;height: 27px;"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
</button>
</div>
<div class="text-control-button-holder" style="top: 92px;left: 338px;width:82px;" id="indent-button-holder">
<div id="text-indent-icon" class="" style="width: 30px; height: 27px; margin-left: 1px; margin-top: 0px; color: rgb(211, 211, 211);"><span class="glyphicon glyphicon-indent-left" aria-hidden="true" style="left: 8px; top: 7px;"></span>
</div>
<input id="text-indent-input" type="text" class="topcoat-text-input" title="Text indent">
</div>
<div class="text-control-button-holder" style="left: 8px;top: 50px;width: 161px;" id="text-color-container">
<div type="button" id="button61317461065-0" class="" style="width: 30px; height: 27px; margin-left: 1px; margin-top: 0px; color: rgb(211, 211, 211);"><span class="glyphicon glyphicon-text-color" aria-hidden="true" style="left: 8px; top: 7px;"></span>
</div>
<input id="text-color-input" type="text" class="topcoat-text-input" title="Text color">
</div>
<div class="text-control-button-holder" style="top: 92px; left: 8px;width:161px;" id="text-bg-color-container">
<div id="div61318320700-0" class="" style="width: 30px; height: 27px; margin-left: 1px; margin-top: 0px; color: rgb(211, 211, 211);"><span class="glyphicon glyphicon-text-background" aria-hidden="true" style="left: 8px; top: 7px;"></span>
</div>
<input id="text-bg-color-input" type="text" class="topcoat-text-input" title="Text BG color">
</div>
<div class="text-control-button-holder" style="top: 50px; left: 194px;width: 75px;" id="text-size-container">
<div type="button" id="text-size-icon" class="" style="width: 30px; height: 27px; margin-left: 1px; margin-top: 0px; color: rgb(211, 211, 211);"><span class="glyphicon glyphicon-text-size" aria-hidden="true" style="left: 8px; top: 7px;"></span>
</div>
<input id="text-size-input" type="text" class="topcoat-text-input" title="Font size">
</div>
<div class="text-control-button-holder" style="top: 92px; left: 194px;" id="transform-button-holder">
<button type="button" id="button613181931769-3" class="topcoat-button text-toolbox-icon-button" name="lowercase" title="Text Transform Lowercase"><span class="glyphicon" aria-hidden="true" style="margin-left:-3px;font-size:15px;margin-top:-4px;text-transform:lowercase;">AA</span>
</button>
<button type="button" id="button613181931769-4" class="topcoat-button text-toolbox-icon-button" name="uppercase" title="Text Transform Uppercase"><span class="glyphicon" aria-hidden="true" style="margin-left:-3px;margin-top: -4px; text-transform: uppercase; font-size: 13px;">AA</span>
</button>
<button type="button" id="button613181931769-5" class="topcoat-button text-toolbox-icon-button" name="capitalize" title="Text Transform Capitalize"><span class="glyphicon" aria-hidden="true" style="margin-left:-3px;font-size:15px;margin-top:-4px;text-transform:capitalize;">Aa</span>
</button>
<button type="button" id="button61317481457-0" class="topcoat-button text-toolbox-icon-button" name="" title="Remove Text Transform"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
</button>
</div>
<div class="text-control-button-holder" style="left: 275px; top: 50px; width: 75px;" id="line-height-container">
<div type="button" id="line-height-icon" class="" style="width: 30px; height: 27px; margin-left: 1px; margin-top: 0px; color: rgb(211, 211, 211);"><span class="glyphicon glyphicon-text-height" aria-hidden="true" style="left: 8px; top: 7px;"></span>
</div>
<input id="line-height-input" type="text" class="topcoat-text-input" title="Line height">
</div>
<div class="text-control-button-holder" style="left: 357px; top: 50px; height: 27px;" id="orientation-container">
<select id="text-direction-select" class="topcoat-select-button-dark" style="width:30px;padding: 0px;height:25px;top:1px;" title="Text Direction ltr/rtl">
<option value="ltr">ltr</option>
<option value="rtl">rtl</option>
</select>
<button type="button" class="topcoat-button" style="height: 27px; width: 30px;" title="Remove Direction"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
</button>
</div>
</div>