Save
This commit is contained in:
Roman Pyrih
1
layout/style-css/typography-page.css
Normal file
1
layout/style-css/typography-page.css
Normal file
File diff suppressed because one or more lines are too long
1
layout/style-css/typography-page.css.map
Normal file
1
layout/style-css/typography-page.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../style-scss/_variables.scss","../style-scss/typography-page.scss"],"names":[],"mappings":"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","file":"typography-page.css"}
|
||||
72
layout/style-scss/typography-page.scss
Normal file
72
layout/style-scss/typography-page.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.typo-controls {
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
select {
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
#typography-page {
|
||||
* {
|
||||
font-family: $font3;
|
||||
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui_btn_1 {
|
||||
color: #ffffff;
|
||||
background: #1d1d1e;
|
||||
|
||||
font-family: $font3;
|
||||
font-weight: 700 !important;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
padding: 16px 36px;
|
||||
border-radius: 5px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ui_btn_2 {
|
||||
color: #1d1d1e;
|
||||
background: #fff246;
|
||||
|
||||
font-family: $font3;
|
||||
font-weight: 700 !important;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
padding: 16px 36px;
|
||||
border-radius: 5px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #1d1d1e;
|
||||
}
|
||||
}
|
||||
325
templates_user/pages/typography-page.php
Normal file
325
templates_user/pages/typography-page.php
Normal file
@@ -0,0 +1,325 @@
|
||||
<div id="typography-page">
|
||||
<div class="container">
|
||||
<section class="mt-5 mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><h1>...</h1></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<h1 data-editable>Nagłówek H1. Rozmiar: 40px</h1>
|
||||
|
||||
<div class="typo-controls-dynamic">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Pogrubienie</label>
|
||||
</div>
|
||||
<select class="custom-select weight" data-control="weight">
|
||||
<option value="100">Thin (100)</option>
|
||||
<option value="200">Extra-light (200)</option>
|
||||
<option value="300">Light (300)</option>
|
||||
<option value="400" selected>Regular (400)</option>
|
||||
<option value="500">Medium (500)</option>
|
||||
<option value="600">Semi-bold (600)</option>
|
||||
<option value="700">Bold (700)</option>
|
||||
<option value="800">Extra-bold (800)</option>
|
||||
<option value="900">Black (900)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Styl</label>
|
||||
</div>
|
||||
<select class="custom-select style" data-control="style">
|
||||
<option value="normal" selected>Normal</option>
|
||||
<option value="italic">Italic (Kursywa)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Transformacja</label>
|
||||
</div>
|
||||
<select class="custom-select transform" data-control="transform">
|
||||
<option value="none" selected>Normal</option>
|
||||
<option value="uppercase">UPPERCASE</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><h2>...</h2></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<h2 data-editable style="font-size: 34px;">Nagłówek h2. Rozmiar: 34px</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><h3>...</h3></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<h3 data-editable>Nagłówek h3. Rozmiar: 28px</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><h4>...</h4></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<h4 data-editable>Nagłówek h4. Rozmiar: 24px</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><h5>...</h5></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<h5 data-editable>Nagłówek h5. Rozmiar: 20px</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><h6>...</h6></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<h6 data-editable>Nagłówek h6. Rozmiar: 16px</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="mb-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><p>...</p></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<p data-editable>Zwykły tekst. Rozmiar 14px.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code><a>...</a></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<a href="#" data-editable class="d-block mb-2">Odnośnik. Rozmiar 14px.</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code>Lista <ul><li>...</li></ul></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<ul>
|
||||
<li>Element listy. Rozmiar 16px</li>
|
||||
<li>Element listy. Rozmiar 16px</li>
|
||||
<li>Element listy. Rozmiar 16px</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code>Lista <ol><li>...</li></ol></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<ol>
|
||||
<li>Element listy. Rozmiar 16px</li>
|
||||
<li>Element listy. Rozmiar 16px</li>
|
||||
<li>Element listy. Rozmiar 16px</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
<code>Lista rozmiarów tekstów <p>...</p></code>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<p style="font-size: 10px;">Zwykły tekst. Rozmiar 10px.</p>
|
||||
<p style="font-size: 11px;">Zwykły tekst. Rozmiar 11px.</p>
|
||||
<p style="font-size: 12px;">Zwykły tekst. Rozmiar 12px.</p>
|
||||
<p style="font-size: 13px;">Zwykły tekst. Rozmiar 13px.</p>
|
||||
<p style="font-size: 14px;">Zwykły tekst. Rozmiar 14px.</p>
|
||||
<p style="font-size: 15px;">Zwykły tekst. Rozmiar 15px.</p>
|
||||
<p style="font-size: 16px;">Zwykły tekst. Rozmiar 16px.</p>
|
||||
<p style="font-size: 17px;">Zwykły tekst. Rozmiar 17px.</p>
|
||||
<p style="font-size: 18px;">Zwykły tekst. Rozmiar 18px.</p>
|
||||
<p style="font-size: 19px;">Zwykły tekst. Rozmiar 19px.</p>
|
||||
<p style="font-size: 20px;">Zwykły tekst. Rozmiar 20px.</p>
|
||||
<p style="font-size: 21px;">Zwykły tekst. Rozmiar 21px.</p>
|
||||
<p style="font-size: 22px;">Zwykły tekst. Rozmiar 22px.</p>
|
||||
<p style="font-size: 23px;">Zwykły tekst. Rozmiar 23px.</p>
|
||||
<p style="font-size: 24px;">Zwykły tekst. Rozmiar 24px.</p>
|
||||
<p style="font-size: 25px;">Zwykły tekst. Rozmiar 25px.</p>
|
||||
<p style="font-size: 26px;">Zwykły tekst. Rozmiar 26px.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title text-center">
|
||||
Elementy interfejsu
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
Przycisk 1
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<a href="#" class="ui_btn_1">
|
||||
Gdzie kupić
|
||||
<img src="/upload/filemanager/icon/Arrow-1-yellow.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><section class="mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="section-title">
|
||||
Przycisk 2
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<a href="#" class="ui_btn_2">
|
||||
Bezpłatna wycena
|
||||
<img src="/upload/filemanager/icon/Vector.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const sourceControl = document.querySelector('.typo-controls-dynamic');
|
||||
|
||||
if (!sourceControl) {
|
||||
return;
|
||||
}
|
||||
|
||||
const controlsTemplateHTML = sourceControl.outerHTML;
|
||||
|
||||
const editableElements = document.querySelectorAll('[data-editable]');
|
||||
|
||||
editableElements.forEach(el => {
|
||||
const parent = el.closest('.section-content');
|
||||
if (!parent) return;
|
||||
|
||||
let controlsPanel = parent.querySelector('.typo-controls-dynamic');
|
||||
|
||||
if (!controlsPanel) {
|
||||
parent.insertAdjacentHTML('beforeend', controlsTemplateHTML);
|
||||
controlsPanel = parent.querySelector('.typo-controls-dynamic:last-child');
|
||||
}
|
||||
|
||||
const selects = controlsPanel.querySelectorAll('select');
|
||||
|
||||
selects.forEach(select => {
|
||||
|
||||
const computedStyle = window.getComputedStyle(el);
|
||||
const controlType = select.dataset.control;
|
||||
|
||||
if (controlType === 'weight') {
|
||||
let weight = computedStyle.fontWeight;
|
||||
if (weight === 'bold') weight = '700';
|
||||
if (weight === 'normal') weight = '400';
|
||||
select.value = weight;
|
||||
}
|
||||
if (controlType === 'style') {
|
||||
select.value = computedStyle.fontStyle;
|
||||
}
|
||||
if (controlType === 'transform') {
|
||||
select.value = computedStyle.textTransform;
|
||||
}
|
||||
|
||||
select.addEventListener('change', function() {
|
||||
const type = this.dataset.control;
|
||||
const val = this.value;
|
||||
|
||||
if (type === 'weight') el.style.fontWeight = val;
|
||||
if (type === 'style') el.style.fontStyle = val;
|
||||
if (type === 'transform') el.style.textTransform = val;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user