vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add bootstrap themes

pull/358/head
cagataycivici 2020-06-25 12:49:23 +03:00
parent 0f28eafe5d
commit 5228d9edd9
11 changed files with 8162 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/themes/bootstrap4-dark/theme.css → public/themes/bootstrap4-dark-blue/theme.css
View File

4062
public/themes/bootstrap4-dark-purple/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

0
public/themes/bootstrap4-light/theme.css → public/themes/bootstrap4-light-blue/theme.css
View File

4062
public/themes/bootstrap4-light-purple/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

33
src/AppConfigurator.vue
View File

@ -24,21 +24,33 @@
<h5>Bootstrap</h5> <h5>Bootstrap</h5>
<div class="p-grid free-themes"> <div class="p-grid free-themes">
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/bootstrap-light.png" alt="Bootstrap Light" @click="changeTheme($event, 'bootstrap4-light')"/> <img src="./assets/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-blue')"/>
</button> </button>
<span>Light</span> <span>Light</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/bootstrap-dark.png" alt="Bootstrap Dark" @click="changeTheme($event, 'bootstrap4-dark', true)"/> <img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-purple')"/>
</button> </button>
<span>Dark</span> <span>Light</span>
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-light-purple', true)"/>
</button>
<span>Light</span>
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"/>
</button>
<span>Light</span>
</div> </div>
</div> </div>
<h5>Material</h5> <h5>Material Design</h5>
<div class="p-grid free-themes"> <div class="p-grid free-themes">
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
@ -54,19 +66,19 @@
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/md-dark-indigo-pink.svg" alt="Material Dark Indigo Pink" @click="changeTheme($event, 'md-dark-indigo-pink')"/> <img src="./assets/images/themes/md-dark-indigo-pink.svg" alt="Material Dark Indigo Pink" @click="changeTheme($event, 'md-dark-indigo-pink', true)"/>
</button> </button>
<span>Indigo - Pink</span> <span>Indigo - Pink</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/md-dark-deeppurple-green.svg" alt="Material Dark Deep Purple Green" @click="changeTheme($event, 'md-dark-deeppurple-green')"/> <img src="./assets/images/themes/md-dark-deeppurple-green.svg" alt="Material Dark Deep Purple Green" @click="changeTheme($event, 'md-dark-deeppurple-green', true)"/>
</button> </button>
<span>Purple - Green</span> <span>Purple - Green</span>
</div> </div>
</div> </div>
<h5>Material Compact</h5> <h5>Material Design Compact</h5>
<div class="p-grid free-themes"> <div class="p-grid free-themes">
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
@ -82,18 +94,17 @@
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/md-dark-indigo-pink.svg" alt="Material Compact Dark Indigo Pink" @click="changeTheme($event, 'mdc-dark-indigo-pink')"/> <img src="./assets/images/themes/md-dark-indigo-pink.svg" alt="Material Compact Dark Indigo Pink" @click="changeTheme($event, 'mdc-dark-indigo-pink', true)"/>
</button> </button>
<span>Indigo - Pink</span> <span>Indigo - Pink</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/md-dark-deeppurple-green.svg" alt="Material Compact Dark Deep Purple Green" @click="changeTheme($event, 'mdc-dark-deeppurple-green')"/> <img src="./assets/images/themes/md-dark-deeppurple-green.svg" alt="Material Compact Dark Deep Purple Green" @click="changeTheme($event, 'mdc-dark-deeppurple-green', true)"/>
</button> </button>
<span>Purple - Green</span> <span>Purple - Green</span>
</div> </div>
</div> </div>
<h5>PrimeOne Design</h5> <h5>PrimeOne Design</h5>
<div class="p-grid free-themes"> <div class="p-grid free-themes">

BIN
src/assets/images/themes/bootstrap-dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/images/themes/bootstrap-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

4
src/assets/images/themes/bootstrap4-dark-blue.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#007BFF"/>
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7V1105.84ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.13 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857V493.164ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7V1748.19Z" fill="#121212"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/assets/images/themes/bootstrap4-dark-purple.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#9954BB"/>
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="#121212"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/assets/images/themes/bootstrap4-light-blue.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#007BFF"/>
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7V1105.84ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.13 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857V493.164ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7V1748.19Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/assets/images/themes/bootstrap4-light-purple.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#9954BB"/>
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB