added text styling stuff

This commit is contained in:
Farah
2022-10-07 23:57:29 +01:00
parent f16bb01e88
commit a35248bdbc
5 changed files with 85 additions and 0 deletions

View File

@@ -507,6 +507,40 @@ a:hover {
margin-top:3px
}
.italicImage img {
width: 20px;
height: 20px;
}
.italicImage .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding: 0.4cm 0.6cm;
border: none;
cursor: pointer;
border-radius: 0px;
}
.boldImage img {
width: 20px;
height: 20px;
}
.boldImage .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding: 0.4cm 0.6cm;
border: none;
cursor: pointer;
border-radius: 0px;
}
/* Test card selector*/
.card-selector {
align-items: center;

BIN
app/static/img/bold.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
app/static/img/italic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

@@ -359,6 +359,57 @@
</div>
</div>
</div>
<div class="row container">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
<div class="col-4">
<p class="textFonts text-left ml-3">Alignment</p>
</div>
<!-- toggle -->
<div class="col-2 text-right">
<div class="text-alignment">
<select onchange="positionText(this)" id="positionText" class="textalign-selector__select" autocomplete="off">
<option selected value="left" style="text-align: left">Left</option>
<option value="center" style="text-align: center">Center</option>
<option value="right" style="text-align: right">Right</option>
</select>
<div class="dropdown-icon" aria-hidden="true">
<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">
</div>
</div>
</div>
</div>
<div class="row container">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
<div class="col-4">
<p class="textFonts text-left ml-3">Bold</p>
</div>
<!-- toggle -->
<div class="col-2 text-right">
<div class="boldImage">
<img src="static/img/bold.png">
<button type="button" id="makeBold" class="btn" onclick="makeBold()"></button>
</div>
</div>
</div>
<div class="row container">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
<div class="col-4">
<p class="textFonts text-left ml-3">Italic</p>
</div>
<!-- toggle -->
<div class="col-2 text-right">
<div class="italicImage">
<img src="static/img/italic.png">
<button type="button" id="makeItalic" class="btn" onclick="makeItalic()"></button>
</div>
</div>
</div>
</div>
<hr class="mt-4 mb-4" />