Yidhra/TuiCss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created other scroll styles

Browse Source
This commit is contained in:
Vinicius Reif Biavatti 2019-09-11 19:58:36 -03:00
parent 4f56845a7a
commit a256bae66e
16 changed files with 909 additions and 753 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/images/scroll-blue.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 B

0
dist/images/scroll.png → dist/images/scroll-cyan.png vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 B

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/scroll-green.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 B

BIN
dist/images/scroll-orange.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 B

BIN
dist/images/scroll-purple.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/scroll-red.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 B

BIN
dist/images/scroll-white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/scroll-yellow.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 B

67
dist/tuicss.css vendored
View File

@ -909,11 +909,12 @@ input[type=button] {
/* Responsive */ /* Responsive */
/* Scrool */ /* Scrool */
/* Grid */ /* Grid */
/* Default */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; } width: 10px; }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-image: url(images/scroll.png); background-image: url(images/scroll-cyan.png);
background-repeat: repeat; } background-repeat: repeat; }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@ -922,6 +923,70 @@ input[type=button] {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #00a8a8; } background-color: #00a8a8; }
/* Styles */
.tui-scroll-blue ::-webkit-scrollbar-track {
background-image: url(images/scroll-blue.png); }
.tui-scroll-blue ::-webkit-scrollbar-thumb {
background-color: #0000a8; }
.tui-scroll-blue ::-webkit-scrollbar-thumb:hover {
background-color: #0000a8; }
.tui-scroll-green ::-webkit-scrollbar-track {
background-image: url(images/scroll-green.png); }
.tui-scroll-green ::-webkit-scrollbar-thumb {
background-color: #00a800; }
.tui-scroll-green ::-webkit-scrollbar-thumb:hover {
background-color: #00a800; }
.tui-scroll-cyan ::-webkit-scrollbar-track {
background-image: url(images/scroll-cyan.png); }
.tui-scroll-cyan ::-webkit-scrollbar-thumb {
background-color: #00a8a8; }
.tui-scroll-cyan ::-webkit-scrollbar-thumb:hover {
background-color: #00a8a8; }
.tui-scroll-red ::-webkit-scrollbar-track {
background-image: url(images/scroll-red.png); }
.tui-scroll-red ::-webkit-scrollbar-thumb {
background-color: #a80000; }
.tui-scroll-red ::-webkit-scrollbar-thumb:hover {
background-color: #a80000; }
.tui-scroll-purple ::-webkit-scrollbar-track {
background-image: url(images/scroll-purple.png); }
.tui-scroll-purple ::-webkit-scrollbar-thumb {
background-color: #a800a8; }
.tui-scroll-purple ::-webkit-scrollbar-thumb:hover {
background-color: #a800a8; }
.tui-scroll-yellow ::-webkit-scrollbar-track {
background-image: url(images/scroll-yellow.png); }
.tui-scroll-yellow ::-webkit-scrollbar-thumb {
background-color: #a8a800; }
.tui-scroll-yellow ::-webkit-scrollbar-thumb:hover {
background-color: #a8a800; }
.tui-scroll-white ::-webkit-scrollbar-track {
background-image: url(images/scroll-white.png); }
.tui-scroll-white ::-webkit-scrollbar-thumb {
background-color: #a8a8a8; }
.tui-scroll-white ::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8; }
.tui-sidenav { .tui-sidenav {
position: fixed; position: fixed;
top: 0px; top: 0px;

2
dist/tuicss.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
examples/turbo-vision.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="no-tui-scroll">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

1492
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -2,7 +2,12 @@
"name": "tuicss", "name": "tuicss",
"version": "1.0.0", "version": "1.0.0",
"description": "TuiCss is a framework made to develop text-based user interface applications (TUI)", "description": "TuiCss is a framework made to develop text-based user interface applications (TUI)",
"keywords": ["TUI", "Text based user interface", "Turbo vision", "TuiCss"], "keywords": [
"TUI",
"Text based user interface",
"Turbo vision",
"TuiCss"
],
"main": "dist/tuicss.min.css", "main": "dist/tuicss.min.css",
"scripts": { "scripts": {
"build": "gulp" "build": "gulp"

92
src/components/scrollbar.scss
View File

@ -1,15 +1,101 @@
@import '../variables.scss'; @import '../variables.scss';
/* Default */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-image: $scrool-image; background-image: url(images/scroll-cyan.png);
background-repeat: repeat; background-repeat: repeat;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $scrool-color; background-color: rgb(0, 168, 168);;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: $scrool-color; background-color: rgb(0, 168, 168);;
}
/* Styles */
.tui-scroll-blue {
::-webkit-scrollbar-track {
background-image: url(images/scroll-blue.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(0, 0, 168);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(0, 0, 168);
}
}
.tui-scroll-green {
::-webkit-scrollbar-track {
background-image: url(images/scroll-green.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(0, 168, 0);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(0, 168, 0);
}
}
.tui-scroll-cyan {
::-webkit-scrollbar-track {
background-image: url(images/scroll-cyan.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(0, 168, 168);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(0, 168, 168);
}
}
.tui-scroll-red {
::-webkit-scrollbar-track {
background-image: url(images/scroll-red.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(168, 0, 0);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(168, 0, 0);
}
}
.tui-scroll-purple {
::-webkit-scrollbar-track {
background-image: url(images/scroll-purple.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(168, 0, 168);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(168, 0, 168);
}
}
.tui-scroll-yellow {
::-webkit-scrollbar-track {
background-image: url(images/scroll-yellow.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(168, 168, 0);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(168, 168, 0);
}
}
.tui-scroll-white {
::-webkit-scrollbar-track {
background-image: url(images/scroll-white.png);
}
::-webkit-scrollbar-thumb {
background-color: rgb(168, 168, 168);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(168, 168, 168);
}
} }

BIN
src/images/scroll-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
src/images/scroll.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 168 B