Create modal component; Change the fieldset class to remove window. Other little changes...
This commit is contained in:
vinibiavatti
parent
742991ace8
commit
b6df894344
47
dist/tuicss.css
vendored
47
dist/tuicss.css
vendored
@ -594,6 +594,12 @@ input, select, textarea {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer !important; }
|
||||
|
||||
.cursor-default {
|
||||
cursor: default !important; }
|
||||
|
||||
/* Components */
|
||||
.tui-button {
|
||||
display: inline-block;
|
||||
@ -695,12 +701,12 @@ input, select, textarea {
|
||||
.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
|
||||
display: block; }
|
||||
|
||||
.tui-window-fieldset {
|
||||
.tui-fieldset {
|
||||
border: 6px white double;
|
||||
padding: 12px;
|
||||
background-color: inherit;
|
||||
margin-bottom: 6px; }
|
||||
.tui-window-fieldset.no-legend {
|
||||
.tui-fieldset.no-legend {
|
||||
margin-top: 6px; }
|
||||
|
||||
.tui-input-fieldset {
|
||||
@ -747,6 +753,18 @@ input, select, textarea {
|
||||
left: initial;
|
||||
right: 16px; }
|
||||
|
||||
.tui-fieldset-statusbar-top {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 16px;
|
||||
color: white;
|
||||
background-color: inherit;
|
||||
z-index: 2;
|
||||
padding: 2px; }
|
||||
.tui-fieldset-statusbar-top.right {
|
||||
left: initial;
|
||||
right: 16px; }
|
||||
|
||||
.tui-fieldset-button::before {
|
||||
content: "["; }
|
||||
|
||||
@ -772,9 +790,7 @@ input, select, textarea {
|
||||
background-color: #a8a8a8;
|
||||
padding: 0px 2px;
|
||||
z-index: 9;
|
||||
display: block; }
|
||||
|
||||
.tui-nav-fixed {
|
||||
display: block;
|
||||
position: fixed; }
|
||||
|
||||
.tui-nav ul li {
|
||||
@ -1758,3 +1774,24 @@ input, select, textarea {
|
||||
right: 100%; }
|
||||
.row .col.push-xl12 {
|
||||
left: 100%; } }
|
||||
|
||||
.tui-modal {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
z-index: 101;
|
||||
display: none; }
|
||||
.tui-modal.active {
|
||||
display: block !important; }
|
||||
|
||||
.tui-overlap {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 100;
|
||||
display: none; }
|
||||
.tui-overlap.active {
|
||||
display: block !important; }
|
||||
|
||||
23
dist/tuicss.js
vendored
23
dist/tuicss.js
vendored
@ -5,6 +5,7 @@ $(document).ready(function() {
|
||||
tabsController();
|
||||
dateController();
|
||||
sidenavController();
|
||||
modalController();
|
||||
});
|
||||
|
||||
/**
|
||||
@ -21,6 +22,9 @@ function tabsController() {
|
||||
$('.tui-tab.active').click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Date field controller
|
||||
*/
|
||||
function dateController() {
|
||||
let interval = setInterval(function () {
|
||||
let today = new Date();
|
||||
@ -49,6 +53,9 @@ function dateController() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidenav Controller
|
||||
*/
|
||||
function sidenavController() {
|
||||
$(".tui-sidenav-button").click(function() {
|
||||
let sidenav = $(".tui-sidenav");
|
||||
@ -58,4 +65,20 @@ function sidenavController() {
|
||||
$(".tui-sidenav").addClass("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal controller
|
||||
*/
|
||||
function modalController() {
|
||||
$(".tui-modal-button").click(function() {
|
||||
$(".tui-overlap").addClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).addClass("active");
|
||||
});
|
||||
$(".tui-modal-close-button").click(function() {
|
||||
$(".tui-overlap").removeClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).removeClass("active");
|
||||
});
|
||||
}
|
||||
2
dist/tuicss.min.css
vendored
2
dist/tuicss.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/tuicss.min.js
vendored
2
dist/tuicss.min.js
vendored
@ -1 +1 @@
|
||||
function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function dateController(){let t=setInterval(function(){let e=new Date,a=$(".tui-date");if(!a.length)return void clearInterval(t);let n=a.attr("data-format"),l=2==(e.getMonth()+"").length?e.getMonth()+1:"0"+(e.getMonth()+1),i=2==(e.getDay()+"").length?e.getDay()+1:"0"+(e.getDay()+1),o=e.getFullYear(),r=2==(e.getHours()+"").length?e.getHours():"0"+e.getHours(),s=2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes(),c=2==(e.getSeconds()+"").length?e.getSeconds():"0"+e.getSeconds();n=(n=(n=(n=(n=(n=n.replace("M",l)).replace("d",i)).replace("y",o)).replace("h",r)).replace("m",s)).replace("s",c),a.html(n)})}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}$(document).ready(function(){tabsController(),dateController(),sidenavController()});
|
||||
function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function dateController(){let t=setInterval(function(){let e=new Date,a=$(".tui-date");if(!a.length)return void clearInterval(t);let l=a.attr("data-format"),n=2==(e.getMonth()+"").length?e.getMonth()+1:"0"+(e.getMonth()+1),o=2==(e.getDay()+"").length?e.getDay()+1:"0"+(e.getDay()+1),i=e.getFullYear(),c=2==(e.getHours()+"").length?e.getHours():"0"+e.getHours(),s=2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes(),r=2==(e.getSeconds()+"").length?e.getSeconds():"0"+e.getSeconds();l=(l=(l=(l=(l=(l=l.replace("M",n)).replace("d",o)).replace("y",i)).replace("h",c)).replace("m",s)).replace("s",r),a.html(l)})}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}function modalController(){$(".tui-modal-button").click(function(){$(".tui-overlap").addClass("active");let t=$(this).attr("data-modal");$(`#${t}`).addClass("active")}),$(".tui-modal-close-button").click(function(){$(".tui-overlap").removeClass("active");let t=$(this).attr("data-modal");$(`#${t}`).removeClass("active")})}$(document).ready(function(){tabsController(),dateController(),sidenavController(),modalController()});
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Form</legend>
|
||||
Text.......: <input class="tui-input" value="text" /><br>
|
||||
Number.....: <input class="tui-input" type="number" value="25" /><br>
|
||||
|
||||
35
examples/modal.html
Normal file
35
examples/modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Modal Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body class="center">
|
||||
<div style="margin-top: 300px"></div>
|
||||
|
||||
<!-- Button -->
|
||||
<button class="tui-button tui-modal-button" data-modal="modal">◄ Click ►</button>
|
||||
|
||||
<!-- Overlap -->
|
||||
<div class="tui-overlap"></div>
|
||||
|
||||
<!-- Modal window -->
|
||||
<div id="modal" class="tui-modal">
|
||||
<div class="tui-window red-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="red-255 yellow-255-text">Alert</legend>
|
||||
This is an example of a modal window.
|
||||
<br><br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<button class="tui-button cyan-168 white-255-text tui-modal-close-button right" data-modal="modal">close</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
|
||||
<div class="center" style="margin-top: 100px;">
|
||||
<div class="tui-window white-168">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend align="center">Pocket Calculator</legend>
|
||||
<input id="display" class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
|
||||
<br><br>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Progress</legend>
|
||||
0% ............:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
|
||||
126
examples/register.html
Normal file
126
examples/register.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Register Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
ul li {
|
||||
display: inline-block;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered white-168 tui-bg-blue-black center">
|
||||
|
||||
<div class="tui-window full-width tui-no-shadow left-align">
|
||||
<fieldset class="tui-fieldset no-legend">
|
||||
<ul>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Tables</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Reports</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Print</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Admin</a></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tui-window left-align" style="margin-top: 60px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="white-255-text center">Register</legend>
|
||||
<div style="display: inline-block; width: 500px">
|
||||
<span class="yellow-255-text">N</span>umber.....:
|
||||
<input style="width: 100px" class="tui-input" type="number" value="106" /><br>
|
||||
<span class="yellow-255-text">D</span>ocument...:
|
||||
<input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
|
||||
<span class="yellow-255-text">F</span>irst Name.:
|
||||
<input style="width: 250px" class="tui-input" value="Robert" /><br>
|
||||
<span class="yellow-255-text">S</span>econd Name:
|
||||
<input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
|
||||
<span class="yellow-255-text">C</span>ity.......:
|
||||
<input style="width: 150px" class="tui-input" value="Blumenau" /><br>
|
||||
S<span class="yellow-255-text">t</span>ate......:
|
||||
<input style="width: 50px" class="tui-input" value="SC" /><br>
|
||||
C<span class="yellow-255-text">o</span>ntry.....:
|
||||
<input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
|
||||
P<span class="yellow-255-text">h</span>one......:
|
||||
<input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
|
||||
F<span class="yellow-255-text">a</span>x........:
|
||||
<input style="width: 200px" class="tui-input" value="" /><br>
|
||||
E<span class="yellow-255-text">m</span>ail......:
|
||||
<input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
|
||||
<span class="yellow-255-text">G</span>roup......:
|
||||
<select class="tui-input">
|
||||
<option>Awner</option>
|
||||
<option>Administrators</option>
|
||||
<option>Common Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 200px; vertical-align: top">
|
||||
<span>Locale</span>
|
||||
<div class="cyan-168">
|
||||
<label class="tui-radio black-255-text"> en-US
|
||||
<input type="radio" name="locale" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> pt-BR
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> ch-CH
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>...Cod:</span><input style="width: 30px" class="tui-input">
|
||||
</div>
|
||||
<br><br>
|
||||
<span>Currency</span>
|
||||
<div class="cyan-168 black-255-text">
|
||||
<label class="tui-radio black-255-text"> USD
|
||||
<input type="radio" name="currency" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> R$
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
Registered at: 09/06/2019 09:38:00 PM
|
||||
</div>
|
||||
<br><br>
|
||||
<button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">d</span>el</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
|
||||
<br><br>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tui-statusbar blue-255 white-255-text absolute left-align">
|
||||
<ul>
|
||||
<li><a>09/06/2019</a></li>
|
||||
<li><a>Service Orders Count: 2</a></li>
|
||||
<li><a>10:43:00 PM</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -43,8 +43,8 @@
|
||||
<br>
|
||||
<div>
|
||||
<span class="cyan-255-text">75% complete</span>
|
||||
<span class="tui-progress right tui-texturized-blue-black" style="width: 550px; ">
|
||||
<span style="width: 75%" class="yellow-255"></span>
|
||||
<span class="tui-progress-bar right tui-bg-blue-black" style="width: 550px; ">
|
||||
<span class="tui-progress" style="width: 75%" class="yellow-255"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table</legend>
|
||||
<table class="tui-table" style="width: 700px">
|
||||
<thead>
|
||||
@ -93,10 +93,10 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table hover</legend>
|
||||
<table class="tui-table tui-table-hover" style="width: 700px">
|
||||
<thead>
|
||||
|
||||
135
examples/turbo-vision.html
Normal file
135
examples/turbo-vision.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Turbo Vision Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered tui-bg-blue-black">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="tui-nav absolute">
|
||||
<span class="tui-date" data-format="h:m:s"></span>
|
||||
<ul>
|
||||
<li class="tui-dropdown"><a class="red-168-text">≡</a></li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">F</span>ile
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">N</span>ew
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen...
|
||||
<span class="tui-shortcut">F3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>ave
|
||||
<span class="tui-shortcut">F2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
S<span class="red-168-text">a</span>ve as...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
Save a<span class="red-168-text">l</span>l
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
|
||||
<!-- SUBMENU EXAMPLE -->
|
||||
|
||||
<li class="tui-dropdown block">
|
||||
<span class="right">►</span>
|
||||
<span class="red-168-text">M</span>ore
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>hange dir...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>rint
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">D</span>OS shell
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">Q</span>uit
|
||||
<span class="tui-shortcut">F10</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit Styled
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">H</span>elp
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Edit panel -->
|
||||
<div class="tui-window full-width tui-no-shadow" style="margin-top: 20px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">MYAPP.CPP</legend>
|
||||
<span class="tui-fieldset-button"><span class="green-255-text">↕</span></span>
|
||||
<span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>
|
||||
<span class="tui-fieldset-statusbar-top right" style="margin-right: 50px">1</span>
|
||||
<span class="tui-fieldset-statusbar" style="margin-left: 50px;"> 1:1 </span>
|
||||
<textarea class="tui-textarea full-width" style="height: 493px; overflow: scroll;">#include <iostream>
|
||||
using namespace std;
|
||||
|
||||
int main()
|
||||
{
|
||||
cout << "Hello, World!";
|
||||
return 0;
|
||||
}</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="tui-statusbar absolute">
|
||||
<ul>
|
||||
<li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F2</span> Save</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">Alt+F9</span> Compile</a></li>
|
||||
<span class="tui-statusbar-divider"></span>
|
||||
<li><a href="#!"><span class="red-168-text">F10</span> Menu</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -26,7 +26,7 @@
|
||||
<!-- Simple window -->
|
||||
<div class="info-text">Simple window</div>
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend>Window</legend>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
@ -45,7 +45,7 @@
|
||||
<!-- Scrool window -->
|
||||
<div class="info-text">Scrool window</div>
|
||||
<div class="tui-window white-168 black-255-text">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="white-255-text">Window</legend>
|
||||
<div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
|
||||
<span class="tui-shadow">The Lorem Ipsum </span><br><br>
|
||||
@ -74,7 +74,7 @@
|
||||
<!-- Fieldset features -->
|
||||
<div class="info-text">Fieldset features</div>
|
||||
<div class="tui-window orange-168 black-255-text">
|
||||
<fieldset class="tui-window-fieldset tui-border-solid white-border">
|
||||
<fieldset class="tui-fieldset tui-border-solid white-border">
|
||||
<legend class="center white-255-text">Window</legend>
|
||||
<button class="tui-fieldset-button left"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
|
||||
@ -98,7 +98,7 @@
|
||||
<!-- Item select -->
|
||||
<div class="info-text">Item select</div>
|
||||
<div class="tui-window purple-168">
|
||||
<fieldset class="tui-window-fieldset no-legend tui-border-solid" style="width: 300px">
|
||||
<fieldset class="tui-fieldset no-legend tui-border-solid" style="width: 300px">
|
||||
<ul>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
@ -125,7 +125,7 @@
|
||||
<!-- Window textarea -->
|
||||
<div class="info-text">Window textarea</div>
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">MYAPP.CPP</legend>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.tui-window-fieldset {
|
||||
.tui-fieldset {
|
||||
border: 6px white double;
|
||||
padding: 12px;
|
||||
background-color: inherit;
|
||||
@ -56,6 +56,20 @@
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
.tui-fieldset-statusbar-top {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 16px;
|
||||
color: white;
|
||||
background-color: inherit;
|
||||
z-index: 2;
|
||||
padding: 2px;
|
||||
|
||||
&.right {
|
||||
left: initial;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
.tui-fieldset-button::before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
23
src/components/modal.scss
Normal file
23
src/components/modal.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.tui-modal {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
z-index: 101;
|
||||
display: none;
|
||||
&.active {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.tui-overlap {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
&.active {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,6 @@
|
||||
padding: 0px 2px;
|
||||
z-index: 9;
|
||||
display: block;
|
||||
}
|
||||
.tui-nav-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.tui-nav ul li {
|
||||
|
||||
@ -5,6 +5,7 @@ $(document).ready(function() {
|
||||
tabsController();
|
||||
dateController();
|
||||
sidenavController();
|
||||
modalController();
|
||||
});
|
||||
|
||||
/**
|
||||
@ -21,6 +22,9 @@ function tabsController() {
|
||||
$('.tui-tab.active').click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Date field controller
|
||||
*/
|
||||
function dateController() {
|
||||
let interval = setInterval(function () {
|
||||
let today = new Date();
|
||||
@ -49,6 +53,9 @@ function dateController() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidenav Controller
|
||||
*/
|
||||
function sidenavController() {
|
||||
$(".tui-sidenav-button").click(function() {
|
||||
let sidenav = $(".tui-sidenav");
|
||||
@ -58,4 +65,20 @@ function sidenavController() {
|
||||
$(".tui-sidenav").addClass("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal controller
|
||||
*/
|
||||
function modalController() {
|
||||
$(".tui-modal-button").click(function() {
|
||||
$(".tui-overlap").addClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).addClass("active");
|
||||
});
|
||||
$(".tui-modal-close-button").click(function() {
|
||||
$(".tui-overlap").removeClass("active");
|
||||
let modalId = $(this).attr("data-modal");
|
||||
$(`#${modalId}`).removeClass("active");
|
||||
});
|
||||
}
|
||||
@ -68,4 +68,11 @@
|
||||
}
|
||||
.tui-disable-select {
|
||||
@include disable-select;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: default !important;
|
||||
}
|
||||
@ -28,4 +28,5 @@
|
||||
@import './components/shadow.scss';
|
||||
@import './components/background.scss';
|
||||
@import './components/border.scss';
|
||||
@import './components/grid.scss';
|
||||
@import './components/grid.scss';
|
||||
@import './components/modal.scss';
|
||||
Loading…
x
Reference in New Issue
Block a user