├── .nvmrc ├── .ignore ├── src ├── site │ ├── modules │ │ ├── embed.variables │ │ ├── nag.overrides │ │ ├── popup.overrides │ │ ├── shape.overrides │ │ ├── tab.overrides │ │ ├── accordion.overrides │ │ ├── chatroom.overrides │ │ ├── checkbox.overrides │ │ ├── dimmer.overrides │ │ ├── dropdown.overrides │ │ ├── embed.overrides │ │ ├── modal.overrides │ │ ├── modal.variables │ │ ├── nag.variables │ │ ├── popup.variables │ │ ├── progress.overrides │ │ ├── rating.overrides │ │ ├── rating.variables │ │ ├── search.overrides │ │ ├── search.variables │ │ ├── shape.variables │ │ ├── sidebar.overrides │ │ ├── sidebar.variables │ │ ├── sticky.overrides │ │ ├── sticky.variables │ │ ├── tab.variables │ │ ├── accordion.variables │ │ ├── chatroom.variables │ │ ├── checkbox.variables │ │ ├── dimmer.variables │ │ ├── dropdown.variables │ │ ├── progress.variables │ │ ├── transition.overrides │ │ └── transition.variables │ ├── elements │ │ ├── flag.variables │ │ ├── button.overrides │ │ ├── divider.overrides │ │ ├── flag.overrides │ │ ├── header.overrides │ │ ├── icon.overrides │ │ ├── icon.variables │ │ ├── image.overrides │ │ ├── input.overrides │ │ ├── label.overrides │ │ ├── list.overrides │ │ ├── list.variables │ │ ├── loader.overrides │ │ ├── rail.overrides │ │ ├── rail.variables │ │ ├── reveal.overrides │ │ ├── segment.overrides │ │ ├── step.overrides │ │ ├── step.variables │ │ ├── button.variables │ │ ├── container.overrides │ │ ├── container.variables │ │ ├── divider.variables │ │ ├── header.variables │ │ ├── image.variables │ │ ├── input.variables │ │ ├── label.variables │ │ ├── loader.variables │ │ ├── reveal.variables │ │ └── segment.variables │ ├── collections │ │ ├── menu.overrides │ │ ├── form.overrides │ │ ├── grid.overrides │ │ ├── table.overrides │ │ ├── breadcrumb.overrides │ │ ├── breadcrumb.variables │ │ ├── form.variables │ │ ├── grid.variables │ │ ├── menu.variables │ │ ├── message.overrides │ │ ├── table.variables │ │ └── message.variables │ ├── views │ │ ├── ad.overrides │ │ ├── ad.variables │ │ ├── card.overrides │ │ ├── card.variables │ │ ├── comment.overrides │ │ ├── comment.variables │ │ ├── feed.overrides │ │ ├── feed.variables │ │ ├── item.overrides │ │ ├── item.variables │ │ ├── statistic.overrides │ │ └── statistic.variables │ └── globals │ │ ├── reset.overrides │ │ ├── reset.variables │ │ └── site.variables ├── themes │ └── default │ │ ├── collections │ │ ├── table.overrides │ │ ├── form.overrides │ │ ├── menu.overrides │ │ ├── grid.overrides │ │ ├── message.overrides │ │ ├── breadcrumb.overrides │ │ ├── breadcrumb.variables │ │ ├── grid.variables │ │ └── message.variables │ │ ├── modules │ │ ├── chatroom.variables │ │ ├── nag.overrides │ │ ├── tab.overrides │ │ ├── chatroom.overrides │ │ ├── dimmer.overrides │ │ ├── embed.overrides │ │ ├── modal.overrides │ │ ├── popup.overrides │ │ ├── progress.overrides │ │ ├── search.overrides │ │ ├── shape.overrides │ │ ├── sidebar.overrides │ │ ├── sticky.overrides │ │ ├── sticky.variables │ │ ├── tab.variables │ │ ├── transition.variables │ │ ├── shape.variables │ │ ├── sidebar.variables │ │ ├── embed.variables │ │ ├── dimmer.variables │ │ ├── nag.variables │ │ ├── checkbox.overrides │ │ ├── accordion.variables │ │ ├── rating.variables │ │ ├── progress.variables │ │ ├── dropdown.overrides │ │ ├── accordion.overrides │ │ └── popup.variables │ │ ├── views │ │ ├── ad.overrides │ │ ├── card.overrides │ │ ├── feed.overrides │ │ ├── item.overrides │ │ ├── comment.overrides │ │ ├── statistic.overrides │ │ ├── ad.variables │ │ ├── comment.variables │ │ ├── statistic.variables │ │ ├── feed.variables │ │ └── item.variables │ │ ├── assets │ │ ├── fonts │ │ │ ├── icons.eot │ │ │ ├── icons.ttf │ │ │ ├── icons.woff │ │ │ ├── icons.woff2 │ │ │ ├── brand-icons.eot │ │ │ ├── brand-icons.ttf │ │ │ ├── brand-icons.woff │ │ │ ├── brand-icons.woff2 │ │ │ ├── outline-icons.eot │ │ │ ├── outline-icons.ttf │ │ │ ├── outline-icons.woff │ │ │ └── outline-icons.woff2 │ │ └── images │ │ │ └── flags.png │ │ ├── elements │ │ ├── image.overrides │ │ ├── input.overrides │ │ ├── label.overrides │ │ ├── list.overrides │ │ ├── loader.overrides │ │ ├── rail.overrides │ │ ├── reveal.overrides │ │ ├── container.overrides │ │ ├── header.overrides │ │ ├── placeholder.overrides │ │ ├── segment.overrides │ │ ├── flag.variables │ │ ├── reveal.variables │ │ ├── button.overrides │ │ ├── rail.variables │ │ ├── image.variables │ │ ├── divider.variables │ │ ├── placeholder.variables │ │ ├── loader.variables │ │ ├── container.variables │ │ ├── input.variables │ │ ├── icon.variables │ │ ├── divider.overrides │ │ ├── step.variables │ │ ├── segment.variables │ │ └── header.variables │ │ └── globals │ │ └── site.overrides ├── definitions │ ├── elements │ │ ├── flag.less │ │ ├── rail.less │ │ └── container.less │ ├── modules │ │ ├── sticky.less │ │ ├── transition.less │ │ ├── tab.less │ │ ├── shape.less │ │ ├── nag.less │ │ └── embed.less │ └── collections │ │ └── breadcrumb.less ├── theme.less ├── theme.config └── semantic.less ├── .gitignore ├── img ├── screenshot-macos.png ├── screenshot-windows.png └── windows-preferences.png ├── styles └── themes │ └── default │ └── assets │ ├── fonts │ ├── icons.eot │ ├── icons.ttf │ ├── icons.woff │ ├── icons.woff2 │ ├── brand-icons.eot │ ├── brand-icons.ttf │ ├── brand-icons.woff │ ├── brand-icons.woff2 │ ├── outline-icons.eot │ ├── outline-icons.ttf │ ├── outline-icons.woff │ └── outline-icons.woff2 │ └── images │ └── flags.png ├── tasks ├── config │ ├── admin │ │ ├── oauth.example.js │ │ ├── templates │ │ │ ├── component-package.js │ │ │ ├── less-package.js │ │ │ ├── package.json │ │ │ ├── composer.json │ │ │ ├── bower.json │ │ │ ├── css-package.js │ │ │ └── README.md │ │ ├── github.js │ │ └── release.js │ ├── npm │ │ └── gulpfile.js │ ├── docs.js │ ├── user.js │ ├── project │ │ └── release.js │ └── defaults.js ├── version.js ├── rtl │ ├── watch.js │ └── build.js ├── clean.js ├── collections │ ├── README.md │ ├── rtl.js │ ├── various.js │ ├── install.js │ ├── docs.js │ ├── build.js │ └── admin.js ├── README.md ├── admin │ ├── publish.js │ ├── release.js │ └── register.js ├── build.js ├── check-install.js ├── watch.js ├── build │ └── assets.js └── docs │ ├── serve.js │ ├── build.js │ └── metadata.js ├── lib └── index.js ├── gulpfile.js ├── LICENSE ├── README.md ├── semantic.json └── package.json /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /.ignore: -------------------------------------------------------------------------------- 1 | *.min.css 2 | -------------------------------------------------------------------------------- /src/site/modules/embed.variables: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/themes/default/collections/table.overrides: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | package-lock.json 4 | styles/components 5 | -------------------------------------------------------------------------------- /src/site/elements/flag.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Flag Variables 3 | --------------------*/ 4 | -------------------------------------------------------------------------------- /img/screenshot-macos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/img/screenshot-macos.png -------------------------------------------------------------------------------- /img/screenshot-windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/img/screenshot-windows.png -------------------------------------------------------------------------------- /img/windows-preferences.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/img/windows-preferences.png -------------------------------------------------------------------------------- /src/site/collections/menu.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ -------------------------------------------------------------------------------- /src/site/modules/nag.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/popup.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/shape.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/tab.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/ad.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/ad.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/form.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/grid.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/table.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/divider.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/flag.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/icon.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/icon.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/image.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/input.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/label.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/list.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/list.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/loader.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/rail.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/rail.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/reveal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/segment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/step.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/step.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/globals/reset.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/globals/reset.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Global Variables 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/accordion.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/chatroom.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/checkbox.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/dimmer.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/dropdown.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/embed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/modal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/modal.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/nag.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/popup.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/progress.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/rating.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/rating.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/search.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/search.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/shape.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/sidebar.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/sidebar.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/sticky.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/sticky.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/tab.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/card.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/card.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/comment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/comment.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/feed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/feed.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/item.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/item.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/breadcrumb.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/breadcrumb.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/form.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/grid.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/menu.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/message.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/table.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/button.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/container.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/container.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/divider.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/header.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/image.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/input.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/label.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/loader.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/reveal.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/elements/segment.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/accordion.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/chatroom.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/checkbox.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/dimmer.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/dropdown.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/progress.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/transition.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/modules/transition.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/statistic.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/views/statistic.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/chatroom.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Chatroom 3 | *******************************/ -------------------------------------------------------------------------------- /src/themes/default/modules/nag.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/tab.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Tab Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/views/ad.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/views/card.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/views/feed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/views/item.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/site/collections/message.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /src/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /src/themes/default/collections/form.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/collections/menu.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/image.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/input.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/label.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/list.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/loader.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/rail.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/reveal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/chatroom.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/dimmer.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/embed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Video Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/modal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/popup.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/progress.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/search.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/shape.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/sidebar.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/modules/sticky.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/views/comment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/views/statistic.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/collections/grid.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /src/themes/default/collections/message.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/container.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /src/themes/default/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /src/themes/default/elements/placeholder.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /src/themes/default/collections/breadcrumb.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /src/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/src/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inkdropapp/vibrant-dark-ui/HEAD/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /src/themes/default/globals/site.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Global Overrides 3 | *******************************/ 4 | 5 | :root { 6 | color-scheme: dark; 7 | } 8 | -------------------------------------------------------------------------------- /src/themes/default/modules/sticky.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Sticky 3 | *******************************/ 4 | 5 | @transitionDuration: @defaultDuration; 6 | @transition: none; 7 | @zIndex: 800; -------------------------------------------------------------------------------- /tasks/config/admin/oauth.example.js: -------------------------------------------------------------------------------- 1 | /* 2 | Used to import GitHub Auth Token 3 | To Automate GitHub Updates 4 | */ 5 | 6 | module.exports = { 7 | token : 'AN-OAUTH2-TOKEN', 8 | username : 'github-username', 9 | name : 'Your Name', 10 | email : 'user@email.com' 11 | }; -------------------------------------------------------------------------------- /tasks/version.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Version Task 3 | *******************************/ 4 | 5 | var 6 | release = require('./config/project/release') 7 | ; 8 | 9 | module.exports = function(callback) { 10 | console.log(release.title + ' ' + release.version); 11 | callback(); 12 | }; -------------------------------------------------------------------------------- /src/themes/default/elements/segment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | .ui.piled.segments:after, 5 | .ui.piled.segments:before, 6 | .ui.piled.segment:after, 7 | .ui.piled.segment:before { 8 | background-color: @stackedPageBackground; 9 | } 10 | -------------------------------------------------------------------------------- /src/themes/default/modules/tab.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Tab 3 | *******************************/ 4 | 5 | /* Loading */ 6 | @loadingMinHeight: 250px; 7 | @loadingContentPosition: relative; 8 | @loadingContentOffset: -10000px; 9 | 10 | @loaderDistanceFromTop: 100px; 11 | @loaderSize: 2.5em; -------------------------------------------------------------------------------- /tasks/rtl/watch.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Watch Task 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp') 7 | ; 8 | 9 | // RTL watch are now handled by the default watch process 10 | module.exports = function (callback) { 11 | gulp.series(require('../watch'))(callback); 12 | }; -------------------------------------------------------------------------------- /tasks/rtl/build.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Build Task 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp') 7 | ; 8 | 9 | // RTL builds are now handled by the default build process 10 | module.exports = function (callback) { 11 | gulp.series(require('../build'))(callback); 12 | }; 13 | -------------------------------------------------------------------------------- /src/themes/default/modules/transition.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Transition 3 | *******************************/ 4 | 5 | @transitionDefaultEasing: @defaultEasing; 6 | @transitionDefaultFill: both; 7 | @transitionDefaultDuration: 300ms; 8 | 9 | @use3DAcceleration: translateZ(0); 10 | @backfaceVisibility: hidden; -------------------------------------------------------------------------------- /src/themes/default/elements/flag.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Flag 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @spritePath: "@{imagePath}/flags.png"; 10 | @width: 16px; 11 | @height: 11px; 12 | @verticalAlign: baseline; 13 | @margin: 0.5em; -------------------------------------------------------------------------------- /src/themes/default/views/ad.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Advertisement 3 | *******************************/ 4 | 5 | @margin: 1em 0em; 6 | @overflow: hidden; 7 | 8 | @testBackground: @lightBlack; 9 | @testColor: @white; 10 | @testFontWeight: @bold; 11 | @testText: 'Ad'; 12 | @testFontSize: @relativeMedium; 13 | @testMobileFontSize: @relativeTiny; 14 | -------------------------------------------------------------------------------- /tasks/clean.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Clean Task 3 | *******************************/ 4 | 5 | var 6 | del = require('del'), 7 | config = require('./config/user'), 8 | tasks = require('./config/tasks') 9 | ; 10 | 11 | // cleans distribution files 12 | module.exports = function() { 13 | return del([config.paths.clean], tasks.settings.del); 14 | }; -------------------------------------------------------------------------------- /tasks/collections/README.md: -------------------------------------------------------------------------------- 1 | ## How to use 2 | 3 | These are collections of tasks that are imported together. 4 | 5 | To import them into gulp: 6 | ```javascript 7 | var 8 | gulp = require('gulp'), 9 | // modified to point to semantic folder 10 | install = require('tasks/collections/install') 11 | ; 12 | gulp = install(gulp); 13 | 14 | // tasks are now injected and ready to be used 15 | gulp.start('install'); 16 | ``` -------------------------------------------------------------------------------- /tasks/config/admin/templates/component-package.js: -------------------------------------------------------------------------------- 1 | 2 | Package.describe({ 3 | name : 'semantic:ui-{component}', 4 | summary : 'Semantic UI - {Component}: Single component release', 5 | version : '{version}', 6 | git : 'git://github.com/Semantic-Org/UI-{Component}.git', 7 | }); 8 | 9 | Package.onUse(function(api) { 10 | api.versionsFrom('1.0'); 11 | api.addFiles([ 12 | {files} 13 | ], 'client'); 14 | }); 15 | -------------------------------------------------------------------------------- /tasks/README.md: -------------------------------------------------------------------------------- 1 | ## Tasks 2 | 3 | * Watch - Compile only changed files from source 4 | * Build - Build all files from source 5 | * Version - Output version number 6 | * Install - Run Installer to Set-up Paths 7 | 8 | ## How to use 9 | 10 | These tasks can be imported into your own gulpfile allowing you to avoid using Semantic's build tools 11 | 12 | ```javascript 13 | var 14 | watch = require('path/to/semantic/tasks/watch') 15 | ; 16 | gulp.task('watch ui', watch); 17 | ``` 18 | -------------------------------------------------------------------------------- /tasks/config/admin/templates/less-package.js: -------------------------------------------------------------------------------- 1 | var 2 | where = 'client' // Adds files only to the client 3 | ; 4 | 5 | Package.describe({ 6 | name : 'semantic:ui', 7 | summary : 'Semantic UI - LESS Release of Semantic UI', 8 | version : '{version}', 9 | git : 'git://github.com/Semantic-Org/Semantic-UI-LESS.git', 10 | }); 11 | 12 | Package.onUse(function(api) { 13 | 14 | api.versionsFrom('1.0'); 15 | api.use('less', 'client'); 16 | 17 | api.addFiles([ 18 | {files} 19 | ], 'client'); 20 | 21 | }); 22 | -------------------------------------------------------------------------------- /tasks/config/admin/templates/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semantic", 3 | "version": "1.0.0", 4 | "title": "Semantic UI", 5 | "description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.", 6 | "homepage": "http://www.semantic-ui.com", 7 | "author": "Jack Lukic ", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/Semantic-Org/Semantic-UI.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/Semantic-Org/Semantic-UI/issues" 15 | }, 16 | "devDependencies": {} 17 | } 18 | -------------------------------------------------------------------------------- /tasks/admin/publish.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Release All 3 | *******************************/ 4 | 5 | /* 6 | This task update all SUI individual component repos with new versions of components 7 | 8 | * Commits changes from create components to GitHub and Tags 9 | 10 | */ 11 | 12 | var 13 | gulp = require('gulp') 14 | ; 15 | 16 | /* Release All */ 17 | module.exports = function (callback) { 18 | 19 | gulp.series( 20 | 'update distributions', // commit less/css versions to github 21 | 'update components', // commit components to github 22 | )(callback); 23 | 24 | }; -------------------------------------------------------------------------------- /tasks/build.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Build Task 3 | *******************************/ 4 | 5 | var 6 | // dependencies 7 | gulp = require('gulp'), 8 | 9 | // config 10 | install = require('./config/project/install') 11 | ; 12 | 13 | module.exports = function (callback) { 14 | 15 | console.info('Building Semantic'); 16 | 17 | if (!install.isSetup()) { 18 | console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic'); 19 | return 1; 20 | } 21 | 22 | gulp.series('build-css'/*, 'build-javascript'*/, 'build-assets')(callback); 23 | }; 24 | -------------------------------------------------------------------------------- /tasks/collections/rtl.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Define RTL Sub-Tasks 3 | *******************************/ 4 | 5 | module.exports = function (gulp) { 6 | 7 | // rtl 8 | var 9 | buildRTL = require('./../rtl/build'), 10 | watchRTL = require('./../rtl/watch') 11 | ; 12 | 13 | gulp.task('watch-rtl', watchRTL); 14 | gulp.task('watch-rtl').description = 'DEPRECATED - use \'watch\' instead - Watch files as RTL'; 15 | 16 | gulp.task('build-rtl', buildRTL); 17 | gulp.task('build-rtl').description = 'DEPRECATED - use \'build\' instead - Build all files as RTL'; 18 | 19 | }; 20 | -------------------------------------------------------------------------------- /tasks/config/admin/templates/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "fomantic/ui", 3 | "description" : "Fomantic empowers designers and developers by creating a shared vocabulary for UI.", 4 | "homepage" : "https://fomantic-ui.com", 5 | "authors": [ 6 | { 7 | "name" : "Jack Lukic", 8 | "email": "jacklukic@gmail.com", 9 | "homepage" : "http://www.jacklukic.com", 10 | "role" : "Creator" 11 | } 12 | ], 13 | "keywords": [ 14 | "fomantic", 15 | "fomantic-ui", 16 | "semantic", 17 | "ui", 18 | "css", 19 | "framework" 20 | ], 21 | "license" : "MIT" 22 | } -------------------------------------------------------------------------------- /tasks/collections/various.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Define Various Sub-Tasks 3 | *******************************/ 4 | 5 | /* 6 | Lets you serve files to a local documentation instance 7 | https://github.com/Semantic-Org/Semantic-UI-Docs/ 8 | */ 9 | module.exports = function (gulp) { 10 | 11 | var 12 | clean = require('./../clean'), 13 | version = require('./../version') 14 | ; 15 | 16 | gulp.task('clean', clean); 17 | gulp.task('clean').description = 'Clean dist folder'; 18 | 19 | gulp.task('version', version); 20 | gulp.task('version').description = 'Clean dist folder'; 21 | 22 | }; 23 | -------------------------------------------------------------------------------- /tasks/config/admin/templates/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "Component", 3 | "description" : "Component distribution", 4 | "homepage" : "http://www.semantic-ui.com", 5 | "author": { 6 | "name" : "Jack Lukic", 7 | "web" : "http://www.jacklukic.com" 8 | }, 9 | "ignore": [ 10 | "./index.js" 11 | ], 12 | "keywords": [ 13 | "semantic", 14 | "ui", 15 | "css3", 16 | "framework" 17 | ], 18 | "license" : [ 19 | "http://semantic-ui.mit-license.org/" 20 | ], 21 | "ignore": [ 22 | "docs", 23 | "node", 24 | "server", 25 | "spec", 26 | "src", 27 | "test" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /src/themes/default/elements/reveal.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Reveal 3 | *******************************/ 4 | 5 | @transitionDelay: 0.1s; 6 | @transitionDuration: 0.5s; 7 | @transitionEasing: cubic-bezier(0.175, 0.885, 0.320, 1); 8 | @transition: all @transitionDuration @defaultEasing @transitionDelay; 9 | 10 | @bottomZIndex: 2; 11 | @topZIndex: 3; 12 | @activeZIndex: 4; 13 | @overlayZIndex: 5; 14 | 15 | /* Types */ 16 | @rotateDegrees: 110deg; 17 | @moveTransition: transform @transitionDuration @transitionEasing @transitionDelay; 18 | @slideTransition: transform @transitionDuration @defaultEasing @transitionDelay; 19 | -------------------------------------------------------------------------------- /src/themes/default/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | /* Standard Basic Inverted */ 6 | .ui.basic.inverted.buttons .button, 7 | .ui.basic.inverted.button { 8 | color: @textColor !important; 9 | } 10 | .ui.basic.inverted.buttons .button:hover, 11 | .ui.basic.inverted.button:hover { 12 | color: @fullBlack !important; 13 | } 14 | .ui.basic.inverted.buttons .button:focus, 15 | .ui.basic.inverted.button:focus { 16 | color: @fullBlack !important; 17 | } 18 | .ui.basic.inverted.buttons .button:active, 19 | .ui.basic.inverted.button:active { 20 | color: @fullBlack !important; 21 | } 22 | -------------------------------------------------------------------------------- /tasks/collections/install.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Define Install Sub-Tasks 3 | *******************************/ 4 | 5 | /* 6 | Lets you serve files to a local documentation instance 7 | https://github.com/Semantic-Org/Semantic-UI-Docs/ 8 | */ 9 | module.exports = function (gulp) { 10 | 11 | var 12 | // docs tasks 13 | install = require('./../install'), 14 | checkInstall = require('./../check-install') 15 | ; 16 | 17 | gulp.task('install', install); 18 | gulp.task('install').description = 'Runs set-up'; 19 | 20 | gulp.task('check-install', checkInstall); 21 | gulp.task('check-install').description = 'Displays current version of Semantic'; 22 | 23 | }; 24 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | const remote = require('@electron/remote') 2 | 3 | module.exports = { 4 | activate() { 5 | remote.nativeTheme.themeSource = 'dark' 6 | 7 | const acrylicEnabled = inkdrop.config.get('core.mainWindow.acrylicEnabled') 8 | if (!acrylicEnabled) { 9 | inkdrop.notifications.addError('Acrylic background not enabled', { 10 | detail: 'Go to Preferences → Themes → Enable the experimental feature "Acrylic translucent background".', 11 | dismissable: true 12 | }) 13 | } 14 | }, 15 | deactivate() { 16 | // https://forum.inkdrop.app/t/vibrant-dark-theme-becomes-bright-when-closing-preferences/4979 17 | // remote.nativeTheme.themeSource = 'system' 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /tasks/collections/docs.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Define Docs Sub-Tasks 3 | *******************************/ 4 | 5 | /* 6 | Lets you serve files to a local documentation instance 7 | https://github.com/Semantic-Org/Semantic-UI-Docs/ 8 | */ 9 | module.exports = function (gulp) { 10 | 11 | var 12 | // docs tasks 13 | serveDocs = require('./../docs/serve'), 14 | buildDocs = require('./../docs/build') 15 | ; 16 | 17 | gulp.task('serve-docs', serveDocs); 18 | gulp.task('serve-docs').description = 'Serve file changes to SUI Docs'; 19 | 20 | gulp.task('build-docs', buildDocs); 21 | gulp.task('build-docs').description = 'Build all files and add to SUI Docs'; 22 | 23 | }; 24 | -------------------------------------------------------------------------------- /tasks/check-install.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Check Install 3 | *******************************/ 4 | 5 | var 6 | // node dependencies 7 | gulp = require('gulp'), 8 | console = require('better-console'), 9 | isSetup = require('./config/project/install').isSetup, 10 | 11 | install = require('./install'), 12 | watch = require('./watch') 13 | ; 14 | 15 | // export task 16 | module.exports = function (callback) { 17 | 18 | setTimeout(function () { 19 | if (!isSetup()) { 20 | console.log('Starting install...'); 21 | install(callback); 22 | } else { 23 | watch(callback); 24 | } 25 | }, 50); // Delay to allow console.clear to remove messages from check event 26 | 27 | }; -------------------------------------------------------------------------------- /src/themes/default/collections/breadcrumb.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Breadcrumb 3 | *******************************/ 4 | 5 | /*------------------- 6 | Breadcrumb 7 | --------------------*/ 8 | 9 | @verticalMargin: 0em; 10 | @display: inline-block; 11 | @verticalAlign: middle; 12 | 13 | @dividerSpacing: @3px; 14 | @dividerOpacity: 0.7; 15 | @dividerColor: @lightTextColor; 16 | 17 | @dividerSize: @relativeSmall; 18 | @dividerVerticalAlign: baseline; 19 | 20 | @iconDividerSize: @relativeTiny; 21 | @iconDividerVerticalAlign: baseline; 22 | 23 | @sectionMargin: 0em; 24 | @sectionPadding: 0em; 25 | 26 | /* Coupling */ 27 | @segmentPadding: @relativeMini @relativeMedium; 28 | 29 | /*------------------- 30 | States 31 | --------------------*/ 32 | 33 | @activeFontWeight: @bold; 34 | -------------------------------------------------------------------------------- /tasks/admin/release.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Release 3 | *******************************/ 4 | 5 | /* 6 | This task update all SUI individual component repos with new versions of components 7 | 8 | * Initializes repositories with current versions 9 | * Creates local files at ../distributions/ with each repo for release 10 | 11 | */ 12 | 13 | var 14 | gulp = require('gulp') 15 | ; 16 | 17 | /* Release All */ 18 | module.exports = function (callback) { 19 | 20 | gulp.series( 21 | //'build', // build Semantic 22 | 'init distributions', // sync with current github version 23 | 'create distributions', // update each repo with changes from master repo 24 | 'init components', // sync with current github version 25 | 'create components', // update each repo 26 | )(callback); 27 | 28 | }; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Set-up 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp'), 7 | 8 | // read user config to know what task to load 9 | config = require('./tasks/config/user') 10 | ; 11 | 12 | 13 | /******************************* 14 | * Tasks 15 | *******************************/ 16 | 17 | require('./tasks/collections/build')(gulp); 18 | require('./tasks/collections/various')(gulp); 19 | require('./tasks/collections/install')(gulp); 20 | 21 | gulp.task('default', gulp.series('watch')); 22 | 23 | /*-------------- 24 | Docs 25 | ---------------*/ 26 | 27 | require('./tasks/collections/docs')(gulp); 28 | 29 | /*-------------- 30 | RTL 31 | ---------------*/ 32 | 33 | if (config.rtl) { 34 | require('./tasks/collections/rtl')(gulp); 35 | } 36 | -------------------------------------------------------------------------------- /tasks/config/npm/gulpfile.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Set-up 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp'), 7 | 8 | // read user config to know what task to load 9 | config = require('./tasks/config/user') 10 | ; 11 | 12 | 13 | /******************************* 14 | * Tasks 15 | *******************************/ 16 | 17 | require('./tasks/collections/build')(gulp); 18 | require('./tasks/collections/various')(gulp); 19 | require('./tasks/collections/install')(gulp); 20 | 21 | gulp.task('default', gulp.series('watch')); 22 | 23 | /*-------------- 24 | Docs 25 | ---------------*/ 26 | 27 | require('./tasks/collections/docs')(gulp); 28 | 29 | /*-------------- 30 | RTL 31 | ---------------*/ 32 | 33 | if (config.rtl) { 34 | require('./tasks/collections/rtl')(gulp); 35 | } 36 | -------------------------------------------------------------------------------- /tasks/config/admin/github.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | GitHub Login 3 | *******************************/ 4 | /* 5 | Logs into GitHub using OAuth 6 | */ 7 | 8 | var 9 | fs = require('fs'), 10 | path = require('path'), 11 | githubAPI = require('@octokit/rest'), 12 | 13 | // stores oauth info for GitHub API 14 | oAuthConfig = path.join(__dirname, 'oauth.js'), 15 | oAuth = fs.existsSync(oAuthConfig) 16 | ? require(oAuthConfig) 17 | : false, 18 | github 19 | ; 20 | 21 | if(!oAuth) { 22 | console.error('Must add oauth token for GitHub in tasks/config/admin/oauth.js'); 23 | } 24 | 25 | github = new githubAPI({ 26 | version : '3.0.0', 27 | debug : true, 28 | protocol : 'https', 29 | timeout : 5000 30 | }); 31 | 32 | github.authenticate({ 33 | type: 'oauth', 34 | token: oAuth.token 35 | }); 36 | 37 | module.exports = github; 38 | -------------------------------------------------------------------------------- /src/themes/default/modules/shape.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Shape 3 | *******************************/ 4 | 5 | @display: inline-block; 6 | 7 | /* Animating */ 8 | @perspective: 2000px; 9 | 10 | @duration: 0.6s; 11 | @easing: ease-in-out; 12 | 13 | @hiddenSideOpacity: 0.6; 14 | @animatingZIndex: 100; 15 | 16 | @transition: 17 | transform @duration @easing, 18 | left @duration @easing, 19 | width @duration @easing, 20 | height @duration @easing 21 | ; 22 | @sideTransition: opacity @duration @easing; 23 | @backfaceVisibility: hidden; 24 | 25 | /* Side */ 26 | @sideMargin: 0em; 27 | 28 | /*-------------- 29 | Types 30 | ---------------*/ 31 | 32 | /* Cube */ 33 | @cubeSize: 15em; 34 | @cubeBackground: #E6E6E6; 35 | @cubePadding: 2em; 36 | @cubeTextColor: @textColor; 37 | @cubeBoxShadow: 0px 0px 2px rgba(0, 0, 0, 0.3); 38 | 39 | @cubeTextAlign: center; 40 | @cubeFontSize: 2em; 41 | -------------------------------------------------------------------------------- /tasks/config/admin/templates/css-package.js: -------------------------------------------------------------------------------- 1 | var 2 | where = 'client' // Adds files only to the client 3 | ; 4 | 5 | Package.describe({ 6 | name : 'semantic:ui-css', 7 | summary : 'Semantic UI - CSS Release of Semantic UI', 8 | version : '{version}', 9 | git : 'git://github.com/Semantic-Org/Semantic-UI-CSS.git', 10 | }); 11 | 12 | Package.onUse(function(api) { 13 | 14 | api.versionsFrom('1.0'); 15 | 16 | api.use('jquery', 'client'); 17 | 18 | api.addFiles([ 19 | // icons 20 | 'themes/default/assets/fonts/icons.eot', 21 | 'themes/default/assets/fonts/icons.svg', 22 | 'themes/default/assets/fonts/icons.ttf', 23 | 'themes/default/assets/fonts/icons.woff', 24 | 'themes/default/assets/fonts/icons.woff2', 25 | 26 | // flags 27 | 'themes/default/assets/images/flags.png', 28 | 29 | // release 30 | 'semantic.css', 31 | 'semantic.js' 32 | ], 'client'); 33 | 34 | }); 35 | -------------------------------------------------------------------------------- /src/themes/default/elements/rail.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Rail 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @width: 300px; 10 | @height: 100%; 11 | 12 | @distance: 4rem; 13 | @splitDistance: (@distance / 2); 14 | 15 | /*------------------- 16 | Variations 17 | --------------------*/ 18 | 19 | /* Close */ 20 | @closeDistance: 2em; 21 | @veryCloseDistance: 1em; 22 | 23 | @splitCloseDistance: (@closeDistance / 2); 24 | @splitVeryCloseDistance: (@veryCloseDistance / 2); 25 | 26 | @closeWidth: ~"calc("@width~" + "@splitCloseDistance~")"; 27 | @veryCloseWidth: ~"calc("@width~" + "@splitVeryCloseDistance~")"; 28 | 29 | /* Dividing */ 30 | @dividingBorder: 1px solid @borderColor; 31 | @dividingDistance: 5rem; 32 | @splitDividingDistance: (@dividingDistance / 2); 33 | @dividingWidth: @width + @splitDividingDistance; 34 | 35 | -------------------------------------------------------------------------------- /tasks/config/docs.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Docs 3 | *******************************/ 4 | 5 | /* Paths used for "serve-docs" and "build-docs" tasks */ 6 | module.exports = { 7 | base: '', 8 | globs: { 9 | eco: '**/*.html.eco' 10 | }, 11 | paths: { 12 | clean: '../docs/out/dist/', 13 | source: { 14 | config : 'src/theme.config', 15 | definitions : 'src/definitions/', 16 | site : 'src/site/', 17 | themes : 'src/themes/' 18 | }, 19 | output: { 20 | examples : '../docs/out/examples/', 21 | less : '../docs/out/src/', 22 | metadata : '../docs/out/', 23 | packaged : '../docs/out/dist/', 24 | uncompressed : '../docs/out/dist/components/', 25 | compressed : '../docs/out/dist/components/', 26 | themes : '../docs/out/dist/themes/' 27 | }, 28 | template: { 29 | eco: '../docs/server/documents/' 30 | }, 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/themes/default/elements/image.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Image 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @placeholderColor: transparent; 10 | @roundedBorderRadius: 0.3125em; 11 | 12 | @imageHorizontalMargin: 0.25rem; 13 | @imageVerticalMargin: 0.5rem; 14 | @imageBorder: 1px solid rgba(0, 0, 0, 0.1); 15 | 16 | /*------------------- 17 | Types 18 | --------------------*/ 19 | 20 | /* Avatar */ 21 | @avatarSize: 2em; 22 | @avatarMargin: 0.25em; 23 | 24 | 25 | /*------------------- 26 | Variations 27 | --------------------*/ 28 | 29 | /* Spaced */ 30 | @spacedDistance: 0.5em; 31 | 32 | /* Floated */ 33 | @floatedHorizontalMargin: 1em; 34 | @floatedVerticalMargin: 1em; 35 | 36 | /* Size */ 37 | @miniWidth: 35px; 38 | @tinyWidth: 80px; 39 | @smallWidth: 150px; 40 | @mediumWidth: 300px; 41 | @largeWidth: 450px; 42 | @bigWidth: 600px; 43 | @hugeWidth: 800px; 44 | @massiveWidth: 960px; 45 | -------------------------------------------------------------------------------- /src/themes/default/modules/sidebar.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Sidebar 3 | *******************************/ 4 | 5 | /*------------------- 6 | Content 7 | --------------------*/ 8 | 9 | /* Animation */ 10 | @perspective: 1500px; 11 | @duration: 500ms; 12 | @easing: @defaultEasing; 13 | 14 | /* Dimmer */ 15 | @dimmerColor: rgba(0, 0, 0, 0.4); 16 | @dimmerTransition: opacity @duration; 17 | 18 | /* Color below page */ 19 | @canvasBackground: @lightBlack; 20 | 21 | /* Shadow */ 22 | @boxShadow: 0px 0px 20px @borderColor; 23 | @horizontalBoxShadow: @boxShadow; 24 | @verticalBoxShadow: @boxShadow; 25 | 26 | /* Layering */ 27 | @bottomLayer: 1; 28 | @middleLayer: 2; 29 | @fixedLayer: 101; 30 | @topLayer: 102; 31 | @dimmerLayer: 1000; 32 | 33 | /*------------------- 34 | Variations 35 | --------------------*/ 36 | 37 | /* Width */ 38 | @veryThinWidth: 60px; 39 | @thinWidth: 150px; 40 | @width: 260px; 41 | @wideWidth: 350px; 42 | @veryWideWidth: 475px; 43 | 44 | /* Height */ 45 | @height: 36px; 46 | -------------------------------------------------------------------------------- /tasks/collections/build.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Define Build Sub-Tasks 3 | *******************************/ 4 | 5 | module.exports = function (gulp) { 6 | 7 | // build sub-tasks 8 | const 9 | watch = require('./../watch'), 10 | 11 | build = require('./../build'), 12 | buildJS = require('./../build/javascript'), 13 | buildCSS = require('./../build/css'), 14 | buildAssets = require('./../build/assets') 15 | ; 16 | 17 | gulp.task('watch', watch); 18 | gulp.task('watch').description = 'Watch for site/theme changes'; 19 | 20 | gulp.task('build', build); 21 | gulp.task('build').description = 'Builds all files from source'; 22 | 23 | gulp.task('build-javascript', buildJS); 24 | gulp.task('build-javascript').description = 'Builds all javascript from source'; 25 | 26 | gulp.task('build-css', buildCSS); 27 | gulp.task('build-css').description = 'Builds all css from source'; 28 | 29 | gulp.task('build-assets', buildAssets); 30 | gulp.task('build-assets').description = 'Copies all assets from source'; 31 | 32 | }; 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Inkdrop 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/definitions/elements/flag.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Flag 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Theme 14 | *******************************/ 15 | 16 | @type : 'element'; 17 | @element : 'flag'; 18 | 19 | @import (multiple) '../../theme.config'; 20 | 21 | 22 | /******************************* 23 | Flag 24 | *******************************/ 25 | 26 | i.flag:not(.icon) { 27 | display: inline-block; 28 | 29 | width: @width; 30 | height: @height; 31 | 32 | line-height: @height; 33 | vertical-align: @verticalAlign; 34 | margin: 0em @margin 0em 0em; 35 | 36 | text-decoration: inherit; 37 | 38 | speak: none; 39 | font-smoothing: antialiased; 40 | backface-visibility: hidden; 41 | } 42 | 43 | /* Sprite */ 44 | i.flag:not(.icon):before { 45 | display: inline-block; 46 | content: ''; 47 | background: url(@spritePath) no-repeat -108px -1976px; 48 | width: @width; 49 | height: @height; 50 | } 51 | 52 | .loadUIOverrides(); 53 | -------------------------------------------------------------------------------- /tasks/watch.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Watch Task 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp'), 7 | 8 | // node dependencies 9 | console = require('better-console'), 10 | 11 | // user config 12 | config = require('./config/user'), 13 | 14 | // task config 15 | install = require('./config/project/install'), 16 | 17 | css = require('./build/css'), 18 | js = require('./build/javascript'), 19 | assets = require('./build/assets') 20 | 21 | ; 22 | 23 | // export task 24 | module.exports = function () { 25 | 26 | if (!install.isSetup()) { 27 | console.error('Cannot watch files. Run "gulp install" to set-up Semantic'); 28 | return; 29 | } 30 | 31 | console.clear(); 32 | console.log('Watching source files for changes'); 33 | 34 | /*-------------- 35 | Watch CSS 36 | ---------------*/ 37 | css.watch('default', config); 38 | 39 | /*-------------- 40 | Watch JS 41 | ---------------*/ 42 | 43 | js.watch('default', config); 44 | 45 | /*-------------- 46 | Watch Assets 47 | ---------------*/ 48 | 49 | assets.watch('default', config); 50 | 51 | }; 52 | -------------------------------------------------------------------------------- /src/themes/default/elements/divider.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Divider 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @margin: 1rem 0rem; 10 | 11 | @highlightWidth: 1px; 12 | @highlightColor: @whiteBorderColor; 13 | 14 | @shadowWidth: 1px; 15 | @shadowColor: @borderColor; 16 | 17 | /* Text */ 18 | @letterSpacing: 0.05em; 19 | @fontWeight: @bold; 20 | @color: @darkTextColor; 21 | @textTransform: uppercase; 22 | 23 | /*------------------- 24 | Coupling 25 | --------------------*/ 26 | 27 | /* Icon */ 28 | @dividerIconSize: 1rem; 29 | @dividerIconMargin: 0rem; 30 | 31 | 32 | /******************************* 33 | Variations 34 | *******************************/ 35 | 36 | /* Horizontal / Vertical */ 37 | @horizontalMargin: ''; 38 | @horizontalDividerMargin: 1em; 39 | @horizontalRulerOffset: ~"calc(-50% - "(@horizontalDividerMargin)~")"; 40 | 41 | @verticalDividerMargin: 1rem; 42 | @verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")"; 43 | 44 | /* Inverted */ 45 | @invertedTextColor: @white; 46 | @invertedHighlightColor: rgba(255, 255, 255, 0.15); 47 | @invertedShadowColor: @borderColor; 48 | 49 | /* Section */ 50 | @sectionMargin: 2rem; 51 | 52 | /* Sizes */ 53 | @medium: 1rem; 54 | -------------------------------------------------------------------------------- /tasks/config/admin/templates/README.md: -------------------------------------------------------------------------------- 1 | # Semantic {Component} 2 | 3 | This repository contains pre-compiled {component} files using the default themes. This is intended for use in projects that do not need all the bells and whistles of Semantic UI, and want to keep file size to a minimum. 4 | 5 | For the latest changes please see the [Release Notes](https://github.com/Semantic-Org/UI-{Component}/blob/master/RELEASE-NOTES.md) 6 | 7 | **Special Note** 8 | An update in `2.0.8` has fixed an issue which may have prevented some single component modules from working correctly. Please see notes in [this pull request](https://github.com/Semantic-Org/Semantic-UI/pull/2816). 9 | 10 | If you're looking for the full version of Semantic including all components and build tools [check out the main project repository](https://github.com/Semantic-Org/Semantic-UI/tree/1.0) 11 | 12 | #### To install with Bower 13 | ``` 14 | bower install semantic-ui-{component} 15 | ``` 16 | 17 | #### To install with NPM 18 | ``` 19 | npm install semantic-ui-{component} 20 | ``` 21 | 22 | #### To install with Meteor 23 | ``` 24 | meteor add semantic:ui-{component} 25 | ``` 26 | 27 | 28 | ## Addendum 29 | 30 | This element's definitions (required class names, html structures) are available in the [UI Docs](http://www.semantic-ui.com) 31 | 32 | Please consider checking out [all the benefits to theming](http://www.learnsemantic.com/guide/expert.html) before using these stand-alone releases. 33 | -------------------------------------------------------------------------------- /src/themes/default/modules/embed.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Video 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | /* Simple */ 10 | @background: @lightGrey; 11 | @transitionDuration: 0.5s; 12 | @transitionEasing: @defaultEasing; 13 | 14 | /* Placeholder */ 15 | @placeholderUnderlay: @background; 16 | 17 | /* Placeholder Overlayed Background */ 18 | @placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); 19 | @placeholderBackgroundOpacity: 0.5; 20 | @placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing; 21 | 22 | /* Icon */ 23 | @iconBackground: @veryStrongTransparentBlack; 24 | @iconSize: 6rem; 25 | @iconTransition: 26 | opacity @transitionDuration @transitionEasing, 27 | color @transitionDuration @transitionEasing 28 | ; 29 | @iconColor: @white; 30 | @iconShadow: 31 | 0px 2px 10px rgba(34, 36, 38, 0.2) 32 | ; 33 | @iconZIndex: 10; 34 | 35 | /*------------------- 36 | States 37 | --------------------*/ 38 | 39 | /* Hover */ 40 | @hoverPlaceholderBackground: @placeholderBackground; 41 | @hoverPlaceholderBackgroundOpacity: 1; 42 | @hoverIconColor: @white; 43 | 44 | 45 | /*------------------- 46 | Variations 47 | --------------------*/ 48 | 49 | /* Aspect Ratios */ 50 | @squareRatio: (1/1) * 100%; 51 | @widescreenRatio: (9/16) * 100%; 52 | @ultraWidescreenRatio: (9/21) * 100%; 53 | @standardRatio: (3/4) * 100%; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vibrant Dark UI Theme for Inkdrop 2 | 3 | > [!IMPORTANT] 4 | > This theme has been deprecated as of v5.9.0. Please use the default dark UI theme and enable the acrylic background option in the Preferences. 5 | > Check out [the release notes for more information](https://forum.inkdrop.app/t/inkdrop-desktop-v5-9-0/5059). 6 | 7 | 8 | ## Install 9 | 10 | ``` 11 | ipm install vibrant-dark-ui 12 | ``` 13 | 14 | Go to Preferences → Themes → Enable the experimental feature "Acrylic translucent background". 15 | 16 | ![Preferences](https://github.com/inkdropapp/vibrant-dark-ui/blob/master/img/windows-preferences.png?raw=true) 17 | 18 | ### macOS 19 | 20 | ![Screenshot on macOS](https://github.com/inkdropapp/vibrant-dark-ui/blob/master/img/screenshot-macos.png?raw=true) 21 | 22 | ### Windows 23 | 24 | > [!WARNING] 25 | > **Not supported in the latest version**. 26 | > As of 5.6.0, the acrylic window background no longer works due to a bug in Electron. See [this issue](https://forum.inkdrop.app/t/lag-when-resizing-the-window-with-acrylic-background/4011/). 27 | 28 | ![Screenshot on Windows](https://github.com/inkdropapp/vibrant-dark-ui/blob/master/img/screenshot-windows.png?raw=true) 29 | 30 | ### Linux 31 | 32 | Not supported. 33 | 34 | ## How to build 35 | 36 | ``` 37 | npm install 38 | npm build 39 | ``` 40 | 41 | ## Changelog 42 | 43 | See [the GitHub releases](https://github.com/inkdropapp/vibrant-dark-ui/releases) for an overview of what changed in each update. 44 | -------------------------------------------------------------------------------- /tasks/admin/register.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Register PM 3 | *******************************/ 4 | 5 | /* 6 | Task to register component repos with Package Managers 7 | * Registers component with bower 8 | * Registers component with NPM 9 | */ 10 | 11 | var 12 | // node dependencies 13 | process = require('child_process'), 14 | 15 | // config 16 | release = require('../config/admin/release'), 17 | 18 | // register components and distributions 19 | repos = release.distributions.concat(release.components), 20 | total = repos.length, 21 | index = -1, 22 | 23 | stream, 24 | stepRepo 25 | ; 26 | 27 | module.exports = function(callback) { 28 | 29 | console.log('Registering repos with package managers'); 30 | 31 | // Do Git commands synchronously per component, to avoid issues 32 | stepRepo = function() { 33 | index = index + 1; 34 | if(index >= total) { 35 | callback(); 36 | return; 37 | } 38 | var 39 | repo = repos[index].toLowerCase(), 40 | outputDirectory = release.outputRoot + repo + '/', 41 | exec = process.exec, 42 | execSettings = {cwd: outputDirectory}, 43 | updateNPM = 'npm publish;meteor publish;' 44 | ; 45 | 46 | /* Register with NPM */ 47 | exec(updateNPM, execSettings, function(err, stdout, stderr) { 48 | console.log(err, stdout, stderr); 49 | stepRepo(); 50 | }); 51 | 52 | }; 53 | stepRepo(); 54 | }; 55 | 56 | -------------------------------------------------------------------------------- /tasks/config/user.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Set-up 3 | *******************************/ 4 | 5 | var 6 | // npm dependencies 7 | extend = require('extend'), 8 | fs = require('fs'), 9 | path = require('path'), 10 | requireDotFile = require('require-dot-file'), 11 | 12 | // semantic.json defaults 13 | defaults = require('./defaults'), 14 | config = require('./project/config'), 15 | 16 | // Final config object 17 | gulpConfig = {}, 18 | 19 | // semantic.json settings 20 | userConfig 21 | 22 | ; 23 | 24 | 25 | /******************************* 26 | User Config 27 | *******************************/ 28 | 29 | try { 30 | // looks for config file across all parent directories 31 | userConfig = requireDotFile('semantic.json', process.cwd()); 32 | } 33 | catch(error) { 34 | if(error.code === 'MODULE_NOT_FOUND') { 35 | console.error('No semantic.json config found'); 36 | } 37 | } 38 | 39 | // extend user config with defaults 40 | gulpConfig = (!userConfig) 41 | ? extend(true, {}, defaults) 42 | : extend(false, {}, defaults, userConfig) 43 | ; 44 | 45 | /******************************* 46 | Add Derived Values 47 | *******************************/ 48 | 49 | // adds calculated values 50 | config.addDerivedValues(gulpConfig); 51 | 52 | 53 | /******************************* 54 | Export 55 | *******************************/ 56 | 57 | module.exports = gulpConfig; 58 | 59 | -------------------------------------------------------------------------------- /semantic.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "./", 3 | "paths": { 4 | "source": { 5 | "config": "src/theme.config", 6 | "definitions": "src/definitions/", 7 | "site": "src/site/", 8 | "themes": "src/themes/" 9 | }, 10 | "output": { 11 | "packaged": "styles/", 12 | "uncompressed": "styles/components/", 13 | "compressed": "styles/components/", 14 | "themes": "styles/themes/" 15 | }, 16 | "clean": "styles/" 17 | }, 18 | "permission": false, 19 | "autoInstall": false, 20 | "rtl": false, 21 | "components": [ 22 | "site", 23 | "button", 24 | "container", 25 | "divider", 26 | "flag", 27 | "header", 28 | "icon", 29 | "image", 30 | "input", 31 | "label", 32 | "list", 33 | "loader", 34 | "placeholder", 35 | "rail", 36 | "reveal", 37 | "segment", 38 | "step", 39 | "breadcrumb", 40 | "form", 41 | "grid", 42 | "menu", 43 | "message", 44 | "table", 45 | "ad", 46 | "card", 47 | "comment", 48 | "feed", 49 | "item", 50 | "statistic", 51 | "accordion", 52 | "checkbox", 53 | "dimmer", 54 | "dropdown", 55 | "embed", 56 | "modal", 57 | "nag", 58 | "popup", 59 | "progress", 60 | "rating", 61 | "search", 62 | "shape", 63 | "sidebar", 64 | "sticky", 65 | "tab", 66 | "transition", 67 | "api", 68 | "form", 69 | "state", 70 | "visibility", 71 | "text" 72 | ], 73 | "version": "2.8.8" 74 | } 75 | -------------------------------------------------------------------------------- /src/definitions/modules/sticky.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Sticky 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Theme 14 | *******************************/ 15 | 16 | @type : 'module'; 17 | @element : 'sticky'; 18 | 19 | @import (multiple) '../../theme.config'; 20 | 21 | /******************************* 22 | Sticky 23 | *******************************/ 24 | 25 | .ui.sticky { 26 | position: static; 27 | transition: @transition; 28 | z-index: @zIndex; 29 | } 30 | 31 | /******************************* 32 | States 33 | *******************************/ 34 | 35 | /* Bound */ 36 | .ui.sticky.bound { 37 | position: absolute; 38 | left: auto; 39 | right: auto; 40 | } 41 | 42 | /* Fixed */ 43 | .ui.sticky.fixed { 44 | position: fixed; 45 | left: auto; 46 | right: auto; 47 | } 48 | 49 | /* Bound/Fixed Position */ 50 | .ui.sticky.bound.top, 51 | .ui.sticky.fixed.top { 52 | top: 0px; 53 | bottom: auto; 54 | } 55 | .ui.sticky.bound.bottom, 56 | .ui.sticky.fixed.bottom { 57 | top: auto; 58 | bottom: 0px; 59 | } 60 | 61 | 62 | /******************************* 63 | Types 64 | *******************************/ 65 | 66 | .ui.native.sticky { 67 | position: -webkit-sticky; 68 | position: -moz-sticky; 69 | position: -ms-sticky; 70 | position: -o-sticky; 71 | position: sticky; 72 | } 73 | 74 | .loadUIOverrides(); 75 | -------------------------------------------------------------------------------- /src/themes/default/modules/dimmer.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Dimmer 3 | *******************************/ 4 | 5 | @dimmablePosition: relative; 6 | @dimmerPosition: absolute; 7 | 8 | @backgroundColor: rgba(0, 0, 0 , 0.25); 9 | @lineHeight: 1; 10 | @perspective: 2000px; 11 | @padding: 1em; 12 | 13 | @duration: 0.5s; 14 | @transition: 15 | background-color @duration linear 16 | ; 17 | @zIndex: 1000; 18 | @textAlign: center; 19 | @verticalAlign: middle; 20 | @textColor: @white; 21 | @overflow: hidden; 22 | 23 | @blurredStartFilter: ~"blur(0px) grayscale(0)"; 24 | @blurredEndFilter: ~"blur(5px) grayscale(0.7)"; 25 | @blurredTransition: 800ms filter @defaultEasing; 26 | 27 | @blurredBackgroundColor: rgba(0, 0, 0, 0.6); 28 | @blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6); 29 | 30 | /* Hidden (Default) */ 31 | @hiddenOpacity: 0; 32 | 33 | /* Visible */ 34 | @visibleOpacity: 1; 35 | 36 | /*------------------- 37 | Types 38 | --------------------*/ 39 | 40 | /* Page Dimmer*/ 41 | @transformStyle: ''; 42 | @pageDimmerPosition: fixed; 43 | 44 | 45 | /*------------------- 46 | Variations 47 | --------------------*/ 48 | 49 | /* Inverted */ 50 | @invertedBackgroundColor: rgba(255, 255, 255, 0.85); 51 | @invertedTextColor: @textColor; 52 | 53 | /* Simple */ 54 | @simpleZIndex: 1; 55 | @simpleStartBackgroundColor: rgba(0, 0, 0, 0); 56 | @simpleEndBackgroundColor: @backgroundColor; 57 | @simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0); 58 | @simpleInvertedEndBackgroundColor: @invertedBackgroundColor; 59 | -------------------------------------------------------------------------------- /src/themes/default/modules/nag.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Nag 3 | *******************************/ 4 | 5 | /*-------------- 6 | Collection 7 | ---------------*/ 8 | 9 | @position: relative; 10 | @width: 100%; 11 | @zIndex: 999; 12 | @margin: 0em; 13 | 14 | @background: #555555; 15 | @opacity: 0.95; 16 | @minHeight: 0em; 17 | @padding: 0.75em 1em; 18 | @lineHeight: 1em; 19 | @boxShadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); 20 | 21 | @fontSize: 1rem; 22 | @textAlign: center; 23 | @color: @textColor; 24 | 25 | @transition: 0.2s background ease; 26 | 27 | 28 | /*-------------- 29 | Elements 30 | ---------------*/ 31 | 32 | /* Title */ 33 | @titleColor: @white; 34 | @titleMargin: 0em 0.5em; 35 | 36 | @closeSize: 1em; 37 | @closeMargin: (-@closeSize / 2) 0em 0em; 38 | @closeTop: 50%; 39 | @closeRight: 1em; 40 | @closeColor: @white; 41 | @closeTransition: opacity 0.2s ease; 42 | @closeOpacity: 0.4; 43 | 44 | 45 | /*-------------- 46 | States 47 | ---------------*/ 48 | 49 | /* Hover */ 50 | @nagHoverBackground: @background; 51 | @nagHoverOpacity: 1; 52 | 53 | @closeHoverOpacity: 1; 54 | 55 | /*-------------- 56 | Variations 57 | ---------------*/ 58 | 59 | /* Top / Bottom */ 60 | @top: 0em; 61 | @bottom: 0em; 62 | @borderRadius: @defaultBorderRadius; 63 | @topBorderRadius: 0em 0em @borderRadius @borderRadius; 64 | @bottomBorderRadius: @borderRadius @borderRadius 0em 0em; 65 | 66 | /* Inverted */ 67 | @invertedBackground: @darkWhite; 68 | 69 | /*-------------- 70 | Plural 71 | ---------------*/ 72 | 73 | @groupedBorderRadius: 0em; 74 | 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vibrant-dark-ui", 3 | "version": "1.4.2", 4 | "theme": "ui", 5 | "main": "./lib/index", 6 | "styleSheets": [ 7 | "theme.css" 8 | ], 9 | "description": "A dark UI with vibrant appearance theme", 10 | "scripts": { 11 | "dev": "gulp", 12 | "build": "gulp build", 13 | "watch": "gulp watch" 14 | }, 15 | "repository": "https://github.com/inkdropapp/vibrant-dark-ui", 16 | "author": "Takuya Matsuyama", 17 | "license": "MIT", 18 | "devDependencies": { 19 | "better-console": "^1.0.1", 20 | "del": "^6.0.0", 21 | "extend": "^3.0.2", 22 | "gulp": "^4.0.2", 23 | "gulp-autoprefixer": "^8.0.0", 24 | "gulp-chmod": "^3.0.0", 25 | "gulp-clean-css": "^4.3.0", 26 | "gulp-clone": "^2.0.1", 27 | "gulp-concat": "^2.6.1", 28 | "gulp-concat-css": "^3.1.0", 29 | "gulp-copy": "^4.0.1", 30 | "gulp-dedupe": "0.0.2", 31 | "gulp-flatten": "^0.4.0", 32 | "gulp-header": "^2.0.9", 33 | "gulp-if": "^3.0.0", 34 | "gulp-json-editor": "^2.5.6", 35 | "gulp-less": "^5.0.0", 36 | "gulp-notify": "^4.0.0", 37 | "gulp-plumber": "^1.2.1", 38 | "gulp-print": "^5.0.2", 39 | "gulp-rename": "^2.0.0", 40 | "gulp-replace": "^1.1.3", 41 | "gulp-rtlcss": "^2.0.0", 42 | "gulp-tap": "^2.0.0", 43 | "gulp-uglify": "^3.0.2", 44 | "inquirer": "^8.1.2", 45 | "mkdirp": "^1.0.4", 46 | "require-dot-file": "^0.4.0", 47 | "wrench-sui": "0.0.3", 48 | "yamljs": "^0.3.0" 49 | }, 50 | "browserslist": [ 51 | "Electron 27.0.0" 52 | ], 53 | "engines": { 54 | "inkdrop": "^5.8.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /tasks/config/project/release.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Release Config 3 | *******************************/ 4 | 5 | var 6 | requireDotFile = require('require-dot-file'), 7 | config, 8 | npmPackage, 9 | version 10 | ; 11 | 12 | 13 | /******************************* 14 | Derived Values 15 | *******************************/ 16 | 17 | try { 18 | config = requireDotFile('semantic.json', process.cwd()); 19 | } 20 | catch(error) {} 21 | 22 | 23 | try { 24 | npmPackage = require('../../../package.json'); 25 | } 26 | catch(error) { 27 | // generate fake package 28 | npmPackage = { 29 | name: 'Unknown', 30 | version: 'x.x' 31 | }; 32 | } 33 | 34 | // looks for version in config or package.json (whichever is available) 35 | version = (npmPackage && npmPackage.version !== undefined && npmPackage.name == 'fomantic-ui') 36 | ? npmPackage.version 37 | : config.version 38 | ; 39 | 40 | 41 | /******************************* 42 | Export 43 | *******************************/ 44 | 45 | module.exports = { 46 | 47 | title : 'Fomantic UI', 48 | repository : 'https://github.com/fomantic/Fomantic-UI', 49 | url : 'http://fomantic-ui.com/', 50 | 51 | banner: '' 52 | + '/*' + '\n' 53 | + ' * # <%= title %> - <%= version %>' + '\n' 54 | + ' * <%= repository %>' + '\n' 55 | + ' * <%= url %>' + '\n' 56 | + ' *' + '\n' 57 | + ' * Copyright <%= year %> Contributors' + '\n' 58 | + ' * Released under the MIT license' + '\n' 59 | + ' * http://opensource.org/licenses/MIT' + '\n' 60 | + ' *' + '\n' 61 | + ' */' + '\n', 62 | 63 | version : version 64 | 65 | }; 66 | -------------------------------------------------------------------------------- /src/theme.less: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Import Directives 3 | *******************************/ 4 | 5 | /*------------------ 6 | Theme 7 | -------------------*/ 8 | 9 | @theme: @@element; 10 | 11 | /*-------------------- 12 | Site Variables 13 | ---------------------*/ 14 | 15 | /* Default site.variables */ 16 | @import "@{themesFolder}/default/globals/site.variables"; 17 | 18 | /* Packaged site.variables */ 19 | @import "@{themesFolder}/@{site}/globals/site.variables"; 20 | 21 | /* Component's site.variables */ 22 | @import (optional) "@{themesFolder}/@{theme}/globals/site.variables"; 23 | 24 | /* Site theme site.variables */ 25 | @import (optional) "@{siteFolder}/globals/site.variables"; 26 | 27 | 28 | /*------------------- 29 | Component Variables 30 | ---------------------*/ 31 | 32 | /* Default */ 33 | @import "@{themesFolder}/default/@{type}s/@{element}.variables"; 34 | 35 | /* Packaged Theme */ 36 | @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.variables"; 37 | 38 | /* Site Theme */ 39 | @import (optional) "@{siteFolder}/@{type}s/@{element}.variables"; 40 | 41 | 42 | /******************************* 43 | Mix-ins 44 | *******************************/ 45 | 46 | /*------------------ 47 | Fonts 48 | -------------------*/ 49 | 50 | .loadFonts() when (@importGoogleFonts) { 51 | @import (css) url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}'); 52 | } 53 | 54 | /*------------------ 55 | Overrides 56 | -------------------*/ 57 | 58 | .loadUIOverrides() { 59 | @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides"; 60 | @import (optional) "@{siteFolder}/@{type}s/@{element}.overrides"; 61 | } 62 | -------------------------------------------------------------------------------- /src/definitions/modules/transition.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Transition 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Theme 14 | *******************************/ 15 | 16 | @type : 'module'; 17 | @element : 'transition'; 18 | 19 | @import (multiple) '../../theme.config'; 20 | 21 | /******************************* 22 | Transitions 23 | *******************************/ 24 | 25 | .transition { 26 | animation-iteration-count: 1; 27 | animation-duration: @transitionDefaultDuration; 28 | animation-timing-function: @transitionDefaultEasing; 29 | animation-fill-mode: @transitionDefaultFill; 30 | } 31 | 32 | /******************************* 33 | States 34 | *******************************/ 35 | 36 | 37 | /* Animating */ 38 | .animating.transition { 39 | backface-visibility: @backfaceVisibility; 40 | visibility: visible !important; 41 | } 42 | 43 | /* Loading */ 44 | .loading.transition { 45 | position: absolute; 46 | top: -99999px; 47 | left: -99999px; 48 | } 49 | 50 | /* Hidden */ 51 | .hidden.transition { 52 | display: none; 53 | visibility: hidden; 54 | } 55 | 56 | /* Visible */ 57 | .visible.transition { 58 | display: block !important; 59 | visibility: visible !important; 60 | /* backface-visibility: @backfaceVisibility; 61 | transform: @use3DAcceleration;*/ 62 | } 63 | 64 | /* Disabled */ 65 | .disabled.transition { 66 | animation-play-state: paused; 67 | } 68 | 69 | /******************************* 70 | Variations 71 | *******************************/ 72 | 73 | .looping.transition { 74 | animation-iteration-count: infinite; 75 | } 76 | 77 | 78 | .loadUIOverrides(); 79 | -------------------------------------------------------------------------------- /src/themes/default/elements/placeholder.variables: -------------------------------------------------------------------------------- 1 | @placeholderMaxWidth: 30rem; 2 | 3 | /* Key Content Sizing */ 4 | @placeholderLineMargin: @relative12px; 5 | @placeholderHeaderLineHeight: @relative9px; 6 | @placeholderLineHeight: @relative7px; 7 | @placeholderParagraphLineHeight: @placeholderLineHeight; 8 | 9 | @placeholderSpacing: @relative20px; 10 | 11 | /* Interval between consecutive placeholders */ 12 | @placeholderAnimationInterval: 0.15s; 13 | 14 | /* Repeated Placeholder */ 15 | @consecutivePlaceholderSpacing: 2rem; 16 | 17 | /* Image */ 18 | @placeholderImageHeight: 100px; 19 | 20 | /* Header Image */ 21 | @placeholderImageWidth: 3em; 22 | @placeholderImageTextIndent: @10px; 23 | 24 | /* Paragraph */ 25 | @placeholderHeaderLineOneOutdent: 20%; 26 | @placeholderHeaderLineTwoOutdent: 60%; 27 | 28 | @placeholderLineOneOutdent: @placeholderFullLineOutdent; 29 | @placeholderLineTwoOutdent: @placeholderMediumLineOutdent; 30 | @placeholderLineThreeOutdent: @placeholderVeryLongLineOutdent; 31 | @placeholderLineFourOutdent: @placeholderLongLineOutdent; 32 | @placeholderLineFiveOutdent: @placeholderShortLineOutdent; 33 | 34 | 35 | /* Glow Gradient */ 36 | @placeholderLoadingAnimationDuration: 2s; 37 | @placeholderLoadingGradientWidth: 1200px; 38 | @placeholderLoadingGradient: linear-gradient(to right, 39 | rgba(0, 0, 0, 0.08) 0%, 40 | rgba(0, 0, 0, 0.15) 15%, 41 | rgba(0, 0, 0, 0.08) 30% 42 | ); 43 | @placeholderInvertedLoadingGradient: linear-gradient(to right, 44 | rgba(255, 255, 255, 0.08) 0%, 45 | rgba(255, 255, 255, 0.14) 15%, 46 | rgba(255, 255, 255, 0.08) 30% 47 | ); 48 | 49 | /* Variations */ 50 | @placeholderFullLineOutdent: 0%; 51 | @placeholderVeryLongLineOutdent: 10%; 52 | @placeholderLongLineOutdent: 35%; 53 | @placeholderMediumLineOutdent: 50%; 54 | @placeholderShortLineOutdent: 65%; 55 | @placeholderVeryShortLineOutdent: 80%; 56 | -------------------------------------------------------------------------------- /tasks/build/assets.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Build Task 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp'), 7 | 8 | // gulp dependencies 9 | chmod = require('gulp-chmod'), 10 | gulpif = require('gulp-if'), 11 | normalize = require('normalize-path'), 12 | print = require('gulp-print').default, 13 | 14 | // config 15 | config = require('../config/user'), 16 | tasks = require('../config/tasks'), 17 | install = require('../config/project/install'), 18 | 19 | log = tasks.log 20 | ; 21 | 22 | function build(src, config) { 23 | return gulp.src(src, {base: config.paths.source.themes}) 24 | .pipe(gulpif(config.hasPermissions, chmod(config.parsedPermissions))) 25 | .pipe(gulp.dest(config.paths.output.themes)) 26 | .pipe(print(log.created)) 27 | ; 28 | } 29 | 30 | function buildAssets(src, config, callback) { 31 | if (!install.isSetup()) { 32 | console.error('Cannot build assets. Run "gulp install" to set-up Semantic'); 33 | callback(); 34 | return; 35 | } 36 | 37 | if (callback === undefined) { 38 | callback = config; 39 | config = src; 40 | src = config.paths.source.themes + '/**/assets/**/*.*'; 41 | } 42 | 43 | // copy assets 44 | var assets = () => build(src, config); 45 | assets.displayName = "Building Assets"; 46 | 47 | gulp.series(assets)(callback); 48 | } 49 | 50 | module.exports = function (callback) { 51 | buildAssets(config, callback); 52 | }; 53 | 54 | module.exports.watch = function (type, config) { 55 | gulp 56 | .watch([normalize(config.paths.source.themes + '/**/assets/**/*.*')]) 57 | .on('all', function (event, path) { 58 | console.log('Change in assets detected'); 59 | return gulp.series((callback) => buildAssets(path, config, callback))(); 60 | }); 61 | }; 62 | 63 | module.exports.buildAssets = buildAssets; -------------------------------------------------------------------------------- /src/themes/default/elements/loader.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Loader 3 | *******************************/ 4 | 5 | /* Some global loader styles defined in site.variables */ 6 | // @loaderSpeed 7 | // @loaderLineWidth 8 | // @loaderFillColor 9 | // @loaderLineColor 10 | // @invertedLoaderFillColor 11 | // @invertedLoaderLineColor 12 | 13 | /*------------------- 14 | Standard 15 | --------------------*/ 16 | 17 | @loaderTopOffset: 50%; 18 | @loaderLeftOffset: 50%; 19 | 20 | @shapeBorderColor: @loaderLineColor transparent transparent; 21 | @invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent; 22 | 23 | /*------------------- 24 | Types 25 | --------------------*/ 26 | 27 | /* Text */ 28 | @textDistance: @relativeMini; 29 | @loaderTextColor: @textColor; 30 | @invertedLoaderTextColor: @invertedTextColor; 31 | 32 | 33 | /*------------------- 34 | States 35 | --------------------*/ 36 | 37 | @indeterminateDirection: reverse; 38 | @indeterminateSpeed: (2 * @loaderSpeed); 39 | 40 | /*------------------- 41 | Variations 42 | --------------------*/ 43 | 44 | @inlineVerticalAlign: middle; 45 | @inlineMargin: 0em; 46 | 47 | /* Exact Sizes (Avoids Rounding Errors) */ 48 | @mini : @14px; 49 | @tiny : @16px; 50 | @small : @24px; 51 | @medium : @32px; 52 | @large : @48px; 53 | @big : @52px; 54 | @huge : @58px; 55 | @massive : @64px; 56 | 57 | @miniOffset: 0em 0em 0em -(@mini / 2); 58 | @tinyOffset: 0em 0em 0em -(@tiny / 2); 59 | @smallOffset: 0em 0em 0em -(@small / 2); 60 | @mediumOffset: 0em 0em 0em -(@medium / 2); 61 | @largeOffset: 0em 0em 0em -(@large / 2); 62 | @bigOffset: 0em 0em 0em -(@big / 2); 63 | @hugeOffset: 0em 0em 0em -(@huge / 2); 64 | @massiveOffset: 0em 0em 0em -(@massive / 2); 65 | 66 | @tinyFontSize: @relativeTiny; 67 | @miniFontSize: @relativeMini; 68 | @smallFontSize: @relativeSmall; 69 | @mediumFontSize: @relativeMedium; 70 | @largeFontSize: @relativeLarge; 71 | @bigFontSize: @relativeBig; 72 | @hugeFontSize: @relativeHuge; 73 | @massiveFontSize: @relativeMassive; 74 | -------------------------------------------------------------------------------- /src/definitions/modules/tab.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Tab 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Theme 14 | *******************************/ 15 | 16 | @type : 'module'; 17 | @element : 'tab'; 18 | 19 | @import (multiple) '../../theme.config'; 20 | 21 | /******************************* 22 | UI Tabs 23 | *******************************/ 24 | 25 | .ui.tab { 26 | display: none; 27 | } 28 | 29 | /******************************* 30 | States 31 | *******************************/ 32 | 33 | /*-------------------- 34 | Active 35 | ---------------------*/ 36 | 37 | .ui.tab.active, 38 | .ui.tab.open { 39 | display: block; 40 | } 41 | 42 | /*-------------------- 43 | Loading 44 | ---------------------*/ 45 | 46 | .ui.tab.loading { 47 | position: relative; 48 | overflow: hidden; 49 | display: block; 50 | min-height: @loadingMinHeight; 51 | } 52 | .ui.tab.loading * { 53 | position: @loadingContentPosition !important; 54 | left: @loadingContentOffset !important; 55 | } 56 | 57 | .ui.tab.loading:before, 58 | .ui.tab.loading.segment:before { 59 | position: absolute; 60 | content: ''; 61 | top: @loaderDistanceFromTop; 62 | left: 50%; 63 | 64 | margin: @loaderMargin; 65 | width: @loaderSize; 66 | height: @loaderSize; 67 | 68 | border-radius: @circularRadius; 69 | border: @loaderLineWidth solid @loaderFillColor; 70 | } 71 | .ui.tab.loading:after, 72 | .ui.tab.loading.segment:after { 73 | position: absolute; 74 | content: ''; 75 | top: @loaderDistanceFromTop; 76 | left: 50%; 77 | 78 | margin: @loaderMargin; 79 | width: @loaderSize; 80 | height: @loaderSize; 81 | 82 | animation: button-spin @loaderSpeed linear; 83 | animation-iteration-count: infinite; 84 | 85 | border-radius: @circularRadius; 86 | 87 | border-color: @loaderLineColor transparent transparent; 88 | border-style: solid; 89 | border-width: @loaderLineWidth; 90 | 91 | box-shadow: 0px 0px 0px 1px transparent; 92 | } 93 | 94 | .loadUIOverrides(); 95 | -------------------------------------------------------------------------------- /src/themes/default/elements/container.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Container 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | /* Minimum Gutter is used to determine the maximum container width for a given device */ 10 | 11 | @maxWidth: 100%; 12 | 13 | /* Devices */ 14 | @mobileMinimumGutter: 0em; 15 | @mobileWidth: auto; 16 | @mobileGutter: 1em; 17 | 18 | @tabletMinimumGutter: (@emSize * 1); 19 | @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth; 20 | @tabletGutter: auto; 21 | 22 | @computerMinimumGutter: (@emSize * 1.5); 23 | @computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth; 24 | @computerGutter: auto; 25 | 26 | @largeMonitorMinimumGutter: (@emSize * 2); 27 | @largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth; 28 | @largeMonitorGutter: auto; 29 | 30 | /* Coupling (Add Negative Margin to container size) */ 31 | @gridGutterWidth: 2rem; 32 | @relaxedGridGutterWidth: 3rem; 33 | @veryRelaxedGridGutterWidth: 5rem; 34 | 35 | @mobileGridWidth: @mobileWidth; 36 | @tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")"; 37 | @computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")"; 38 | @largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")"; 39 | 40 | @mobileRelaxedGridWidth: @mobileWidth; 41 | @tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")"; 42 | @computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")"; 43 | @largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")"; 44 | 45 | @mobileVeryRelaxedGridWidth: @mobileWidth; 46 | @tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")"; 47 | @computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")"; 48 | @largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")"; 49 | 50 | /*------------------- 51 | Types 52 | --------------------*/ 53 | 54 | /* Text */ 55 | @textWidth: 700px; 56 | @textFontFamily: @pageFont; 57 | @textLineHeight: 1.5; 58 | @textSize: @large; -------------------------------------------------------------------------------- /tasks/docs/serve.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Serve Docs 3 | *******************************/ 4 | var 5 | gulp = require('gulp'), 6 | 7 | // node dependencies 8 | console = require('better-console'), 9 | 10 | // gulp dependencies 11 | print = require('gulp-print').default, 12 | 13 | // user config 14 | config = require('../config/docs'), 15 | 16 | // task config 17 | tasks = require('../config/tasks'), 18 | configSetup = require('../config/project/config'), 19 | 20 | // shorthand 21 | log = tasks.log, 22 | 23 | css = require('../build/css'), 24 | js = require('../build/javascript'), 25 | assets = require('../build/assets') 26 | ; 27 | 28 | 29 | module.exports = function () { 30 | 31 | // use a different config 32 | config = configSetup.addDerivedValues(config); 33 | 34 | console.clear(); 35 | console.log('Watching source files for changes'); 36 | 37 | /*-------------- 38 | Copy Source 39 | ---------------*/ 40 | 41 | gulp 42 | .watch(['src/**/*.*']) 43 | .on('all', function (event, path) { 44 | // We don't handle deleted files yet 45 | if (event === 'unlink' || event === 'unlinkDir') { 46 | return; 47 | } 48 | return gulp.src(path, { 49 | base: 'src/' 50 | }) 51 | .pipe(gulp.dest(config.paths.output.less)) 52 | .pipe(print(log.created)) 53 | ; 54 | }) 55 | ; 56 | 57 | /*-------------- 58 | Copy Examples 59 | ---------------*/ 60 | 61 | gulp 62 | .watch(['examples/**/*.*']) 63 | .on('all', function (event, path) { 64 | // We don't handle deleted files yet 65 | if (event === 'unlink' || event === 'unlinkDir') { 66 | return; 67 | } 68 | return gulp.src(path, { 69 | base: 'examples/' 70 | }) 71 | .pipe(gulp.dest(config.paths.output.examples)) 72 | .pipe(print(log.created)) 73 | ; 74 | }) 75 | ; 76 | 77 | /*-------------- 78 | Watch CSS 79 | ---------------*/ 80 | 81 | css.watch('docs', config); 82 | 83 | /*-------------- 84 | Watch JS 85 | ---------------*/ 86 | 87 | js.watch('docs', config); 88 | 89 | /*-------------- 90 | Watch Assets 91 | ---------------*/ 92 | 93 | assets.watch('docs', config); 94 | 95 | }; 96 | -------------------------------------------------------------------------------- /src/theme.config: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ 4 | ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ 5 | ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ 6 | ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ 7 | ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ 8 | ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ 9 | 10 | */ 11 | 12 | /******************************* 13 | Theme Selection 14 | *******************************/ 15 | 16 | /* To override a theme for an individual element 17 | specify theme name below 18 | */ 19 | 20 | /* Global */ 21 | @site : 'default'; 22 | @reset : 'default'; 23 | 24 | /* Elements */ 25 | @button : 'default'; 26 | @container : 'default'; 27 | @divider : 'default'; 28 | @flag : 'default'; 29 | @header : 'default'; 30 | @icon : 'default'; 31 | @image : 'default'; 32 | @input : 'default'; 33 | @label : 'default'; 34 | @list : 'default'; 35 | @loader : 'default'; 36 | @placeholder : 'default'; 37 | @rail : 'default'; 38 | @reveal : 'default'; 39 | @segment : 'default'; 40 | @step : 'default'; 41 | 42 | /* Collections */ 43 | @breadcrumb : 'default'; 44 | @form : 'default'; 45 | @grid : 'default'; 46 | @menu : 'default'; 47 | @message : 'default'; 48 | @table : 'default'; 49 | 50 | /* Modules */ 51 | @accordion : 'default'; 52 | @checkbox : 'default'; 53 | @dimmer : 'default'; 54 | @dropdown : 'default'; 55 | @embed : 'default'; 56 | @modal : 'default'; 57 | @nag : 'default'; 58 | @popup : 'default'; 59 | @progress : 'default'; 60 | @rating : 'default'; 61 | @search : 'default'; 62 | @shape : 'default'; 63 | @sidebar : 'default'; 64 | @sticky : 'default'; 65 | @tab : 'default'; 66 | @transition : 'default'; 67 | 68 | /* Views */ 69 | @ad : 'default'; 70 | @card : 'default'; 71 | @comment : 'default'; 72 | @feed : 'default'; 73 | @item : 'default'; 74 | @statistic : 'default'; 75 | 76 | /******************************* 77 | Folders 78 | *******************************/ 79 | 80 | /* Path to theme packages */ 81 | @themesFolder : 'themes'; 82 | 83 | /* Path to site override folder */ 84 | @siteFolder : 'site'; 85 | 86 | 87 | /******************************* 88 | Import Theme 89 | *******************************/ 90 | 91 | @import (multiple) "theme.less"; 92 | 93 | /* End Config */ 94 | -------------------------------------------------------------------------------- /tasks/collections/admin.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | * Admin Task Collection 3 | *******************************/ 4 | 5 | /* 6 | This are tasks to be run by project maintainers 7 | - Creating Component Repos 8 | - Syncing with GitHub via APIs 9 | - Modifying package files 10 | */ 11 | 12 | /******************************* 13 | * Tasks 14 | *******************************/ 15 | 16 | 17 | module.exports = function (gulp) { 18 | var 19 | // less/css distributions 20 | initComponents = require('../admin/components/init'), 21 | createComponents = require('../admin/components/create'), 22 | updateComponents = require('../admin/components/update'), 23 | 24 | // single component releases 25 | initDistributions = require('../admin/distributions/init'), 26 | createDistributions = require('../admin/distributions/create'), 27 | updateDistributions = require('../admin/distributions/update'), 28 | 29 | release = require('../admin/release'), 30 | publish = require('../admin/publish'), 31 | register = require('../admin/register') 32 | ; 33 | 34 | /* Release */ 35 | gulp.task('init distributions', initDistributions); 36 | gulp.task('init distributions').description = 'Grabs each component from GitHub'; 37 | 38 | gulp.task('create distributions', createDistributions); 39 | gulp.task('create distributions').description = 'Updates files in each repo'; 40 | 41 | gulp.task('init components', initComponents); 42 | gulp.task('init components').description = 'Grabs each component from GitHub'; 43 | 44 | gulp.task('create components', createComponents); 45 | gulp.task('create components').description = 'Updates files in each repo'; 46 | 47 | /* Publish */ 48 | gulp.task('update distributions', updateDistributions); 49 | gulp.task('update distributions').description = 'Commits component updates from create to GitHub'; 50 | 51 | gulp.task('update components', updateComponents); 52 | gulp.task('update components').description = 'Commits component updates from create to GitHub'; 53 | 54 | /* Tasks */ 55 | gulp.task('release', release); 56 | gulp.task('release').description = 'Stages changes in GitHub repos for all distributions'; 57 | 58 | gulp.task('publish', publish); 59 | gulp.task('publish').description = 'Publishes all releases (components, package)'; 60 | 61 | gulp.task('register', register); 62 | gulp.task('register').description = 'Registers all packages with NPM'; 63 | 64 | }; -------------------------------------------------------------------------------- /src/themes/default/views/comment.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Comments 3 | *******************************/ 4 | 5 | 6 | /*------------------- 7 | View 8 | --------------------*/ 9 | 10 | @maxWidth: 650px; 11 | @margin: 1.5em 0em; 12 | 13 | /*------------------- 14 | Elements 15 | --------------------*/ 16 | 17 | /* Comment */ 18 | @commentBackground: none; 19 | @commentMargin: 0.5em 0em 0em; 20 | @commentPadding: 0.5em 0em 0em; 21 | @commentDivider: none; 22 | @commentBorder: none; 23 | @commentLineHeight: 1.2; 24 | @firstCommentMargin: 0em; 25 | @firstCommentPadding: 0em; 26 | 27 | /* Nested Comment */ 28 | @nestedCommentsMargin: 0em 0em 0.5em 0.5em; 29 | @nestedCommentsPadding: 1em 0em 1em 1em; 30 | 31 | @nestedCommentDivider: none; 32 | @nestedCommentBorder: none; 33 | @nestedCommentBackground: none; 34 | 35 | /* Avatar */ 36 | @avatarDisplay: block; 37 | @avatarFloat: left; 38 | @avatarWidth: 2.5em; 39 | @avatarHeight: auto; 40 | @avatarSpacing: 1em; 41 | @avatarMargin: (@commentLineHeight - 1em) 0em 0em; 42 | @avatarBorderRadius: 0.25rem; 43 | 44 | /* Content */ 45 | @contentMargin: @avatarWidth + @avatarSpacing; 46 | 47 | /* Author */ 48 | @authorFontSize: 1em; 49 | @authorColor: @textColor; 50 | @authorHoverColor: @linkHoverColor; 51 | @authorFontWeight: @bold; 52 | 53 | /* Metadata */ 54 | @metadataDisplay: inline-block; 55 | @metadataFontSize: 0.875em; 56 | @metadataSpacing: 0.5em; 57 | @metadataContentSpacing: 0.5em; 58 | @metadataColor: @lightTextColor; 59 | 60 | /* Text */ 61 | @textFontSize: 1em; 62 | @textMargin: 0.25em 0em 0.5em; 63 | @textWordWrap: break-word; 64 | @textLineHeight: 1.3; 65 | 66 | /* Actions */ 67 | @actionFontSize: 0.875em; 68 | @actionContentDistance: 0.75em; 69 | @actionLinkColor: @unselectedTextColor; 70 | @actionLinkHoverColor: @hoveredTextColor; 71 | 72 | /* Reply */ 73 | @replyDistance: 1em; 74 | @replyHeight: 12em; 75 | @replyFontSize: 1em; 76 | 77 | @commentReplyDistance: @replyDistance; 78 | 79 | /*------------------- 80 | Variations 81 | --------------------*/ 82 | 83 | /* Threaded */ 84 | @threadedCommentMargin: -1.5em 0 -1em (@avatarWidth / 2); 85 | @threadedCommentPadding: 3em 0em 2em 2.25em; 86 | @threadedCommentBoxShadow: -1px 0px 0px @borderColor; 87 | 88 | 89 | /* Minimal */ 90 | @minimalActionPosition: absolute; 91 | @minimalActionTop: 0px; 92 | @minimalActionRight: 0px; 93 | @minimalActionLeft: auto; 94 | 95 | @minimalTransitionDelay: 0.1s; 96 | @minimalEasing: @defaultEasing; 97 | @minimalDuration: 0.2s; 98 | @minimalTransition: opacity @minimalDuration @minimalEasing; 99 | -------------------------------------------------------------------------------- /src/themes/default/views/statistic.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Statistic 3 | *******************************/ 4 | 5 | /*------------------- 6 | View 7 | --------------------*/ 8 | 9 | @verticalMargin: 1em; 10 | @margin: @verticalMargin 0em; 11 | @textAlign: center; 12 | @maxWidth: auto; 13 | 14 | /* Group */ 15 | @horizontalSpacing: 1.5em; 16 | @rowSpacing: 1em; 17 | @groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing; 18 | 19 | /* Group Element */ 20 | @elementMargin: 0em @horizontalSpacing @rowSpacing; 21 | @elementMaxWidth: @maxWidth; 22 | 23 | /*------------------- 24 | Content 25 | --------------------*/ 26 | 27 | /* Value */ 28 | @valueFont: @pageFont; 29 | @valueFontWeight: @normal; 30 | @valueLineHeight: 1em; 31 | @valueColor: @black; 32 | @valueTextTransform: uppercase; 33 | 34 | /* Label */ 35 | @labelSize: @relativeMedium; 36 | @topLabelDistance: 0rem; 37 | @bottomLabelDistance: 0rem; 38 | @labelFont: @headerFont; 39 | @labelFontWeight: @bold; 40 | @labelColor: @textColor; 41 | @labelLineHeight: @relativeLarge; 42 | @labelTextTransform: uppercase; 43 | 44 | /* Text */ 45 | @textValueLineHeight: 1em; 46 | @textValueMinHeight: 2em; 47 | @textValueFontWeight: @bold; 48 | 49 | /* Label Image */ 50 | @imageHeight: 3rem; 51 | @imageVerticalAlign: baseline; 52 | 53 | /*------------------- 54 | Types 55 | --------------------*/ 56 | 57 | @horizontalGroupElementMargin: 1em 0em; 58 | @horizontalLabelDistance: 0.75em; 59 | 60 | /*------------------- 61 | Variations 62 | --------------------*/ 63 | 64 | /* Floated */ 65 | @leftFloatedMargin: 0em 2em 1em 0em; 66 | @rightFloatedMargin: 0em 0em 1em 2em; 67 | 68 | /* Inverted */ 69 | @invertedValueColor: @white; 70 | @invertedLabelColor: @invertedTextColor; 71 | 72 | /* Item Width */ 73 | @itemGroupMargin: 0em 0em -@rowSpacing; 74 | @itemMargin: 0em 0em @rowSpacing; 75 | 76 | /* Size */ 77 | @miniTextValueSize: 1rem; 78 | @miniValueSize: 1.5rem; 79 | @miniHorizontalValueSize: 1.5rem; 80 | 81 | @tinyTextValueSize: 1rem; 82 | @tinyValueSize: 2rem; 83 | @tinyHorizontalValueSize: 2rem; 84 | 85 | @smallTextValueSize: 1rem; 86 | @smallValueSize: 3rem; 87 | @smallHorizontalValueSize: 2rem; 88 | 89 | @textValueSize: 2rem; 90 | @valueSize: 4rem; 91 | @horizontalValueSize: 3rem; 92 | 93 | @largeTextValueSize: 2.5rem; 94 | @largeValueSize: 5rem; 95 | @largeHorizontalValueSize: 4rem; 96 | 97 | @hugeTextValueSize: 2.5rem; 98 | @hugeValueSize: 6rem; 99 | @hugeHorizontalValueSize: 5rem; 100 | -------------------------------------------------------------------------------- /src/themes/default/modules/checkbox.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | @font-face { 6 | font-family: 'Checkbox'; 7 | src: 8 | url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype') 9 | ; 10 | } 11 | 12 | /* Checkmark */ 13 | .ui.checkbox label:after, 14 | .ui.checkbox .box:after { 15 | font-family: 'Checkbox'; 16 | } 17 | 18 | /* Checked */ 19 | .ui.checkbox input:checked ~ .box:after, 20 | .ui.checkbox input:checked ~ label:after { 21 | content: '\e800'; 22 | } 23 | 24 | /* Indeterminate */ 25 | .ui.checkbox input:indeterminate ~ .box:after, 26 | .ui.checkbox input:indeterminate ~ label:after { 27 | font-size: 12px; 28 | content: '\e801'; 29 | } 30 | 31 | 32 | /* UTF Reference 33 | .check:before { content: '\e800'; } 34 | .dash:before { content: '\e801'; } 35 | .plus:before { content: '\e802'; } 36 | */ 37 | -------------------------------------------------------------------------------- /tasks/config/defaults.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Default Paths 3 | *******************************/ 4 | 5 | module.exports = { 6 | 7 | // base path added to all other paths 8 | base : '', 9 | 10 | // base path when installed with npm 11 | pmRoot: 'semantic/', 12 | 13 | // octal permission for output files, i.e. 0o644 or '644' (false does not adjust) 14 | permission : '744', 15 | 16 | // whether to generate rtl files 17 | rtl : false, 18 | 19 | // file paths 20 | files: { 21 | config : 'semantic.json', 22 | site : 'src/site', 23 | theme : 'src/theme.config' 24 | }, 25 | 26 | // folder paths 27 | paths: { 28 | source: { 29 | config : 'src/theme.config', 30 | definitions : 'src/definitions/', 31 | site : 'src/site/', 32 | themes : 'src/themes/' 33 | }, 34 | output: { 35 | packaged : 'dist/', 36 | uncompressed : 'dist/components/', 37 | compressed : 'dist/components/', 38 | themes : 'dist/themes/' 39 | }, 40 | clean : 'dist/' 41 | }, 42 | 43 | // components to include in package 44 | components: [ 45 | 46 | // global 47 | 'reset', 48 | 'site', 49 | 50 | // elements 51 | 'button', 52 | 'container', 53 | 'divider', 54 | 'emoji', 55 | 'flag', 56 | 'header', 57 | 'icon', 58 | 'image', 59 | 'input', 60 | 'label', 61 | 'list', 62 | 'loader', 63 | 'placeholder', 64 | 'rail', 65 | 'reveal', 66 | 'segment', 67 | 'step', 68 | 'text', 69 | 70 | // collections 71 | 'breadcrumb', 72 | 'form', 73 | 'grid', 74 | 'menu', 75 | 'message', 76 | 'table', 77 | 78 | // views 79 | 'ad', 80 | 'card', 81 | 'comment', 82 | 'feed', 83 | 'item', 84 | 'statistic', 85 | 86 | // modules 87 | 'accordion', 88 | 'calendar', 89 | 'checkbox', 90 | 'dimmer', 91 | 'dropdown', 92 | 'embed', 93 | 'modal', 94 | 'nag', 95 | 'popup', 96 | 'progress', 97 | 'slider', 98 | 'rating', 99 | 'search', 100 | 'shape', 101 | 'sidebar', 102 | 'sticky', 103 | 'tab', 104 | 'toast', 105 | 'transition', 106 | 107 | // behaviors 108 | 'api', 109 | 'form', 110 | 'state', 111 | 'visibility' 112 | ], 113 | 114 | // whether to load admin tasks 115 | admin: false, 116 | 117 | // globs used for matching file patterns 118 | globs : { 119 | ignored : '!(*.min|*.map|*.rtl)', 120 | ignoredRTL : '!(*.min|*.map)' 121 | } 122 | 123 | }; 124 | -------------------------------------------------------------------------------- /src/themes/default/collections/grid.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Grid 3 | *******************************/ 4 | 5 | /* Inherited From Site */ 6 | 7 | // @mobileBreakpoint 8 | // @tabletBreakpoint 9 | // @computerBreakpoint 10 | // @largeMonitorBreakpoint 11 | // @widescreenMonitorBreakpoint 12 | 13 | /******************************* 14 | Grid 15 | *******************************/ 16 | 17 | @minWidth: 320px; 18 | 19 | @gutterWidth: 2rem; 20 | @rowSpacing: 2rem; 21 | 22 | @tableWidth: ~"calc(100% + "@gutterWidth~")"; 23 | @columnMaxImageWidth: 100%; 24 | 25 | @consecutiveGridDistance: (@rowSpacing / 2); 26 | 27 | /******************************* 28 | Variations 29 | *******************************/ 30 | 31 | /*-------------- 32 | Relaxed 33 | ---------------*/ 34 | 35 | @relaxedGutterWidth: 3rem; 36 | @veryRelaxedGutterWidth: 5rem; 37 | 38 | /*-------------- 39 | Divided 40 | ---------------*/ 41 | 42 | @dividedBorder: -1px 0px 0px 0px @borderColor; 43 | @verticallyDividedBorder: 0px -1px 0px 0px @borderColor; 44 | 45 | @dividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor; 46 | @verticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor; 47 | 48 | /*-------------- 49 | Celled 50 | ---------------*/ 51 | 52 | @celledMargin: 1em 0em; 53 | @celledWidth: 1px; 54 | @celledBorderColor: @solidBorderColor; 55 | 56 | @celledPadding: 1em; 57 | @celledRelaxedPadding: 1.5em; 58 | @celledVeryRelaxedPadding: 2em; 59 | 60 | @celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor; 61 | @celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor; 62 | @celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor; 63 | 64 | 65 | /*-------------- 66 | Stackable 67 | ---------------*/ 68 | 69 | @stackableRowSpacing: @rowSpacing; 70 | @stackableGutter: @gutterWidth; 71 | @stackableMobileBorder: 1px solid @borderColor; 72 | @stackableInvertedMobileBorder: 1px solid @whiteBorderColor; 73 | 74 | 75 | /******************************* 76 | Legacy 77 | *******************************/ 78 | 79 | /*-------------- 80 | Page 81 | ---------------*/ 82 | 83 | /* Legacy (DO NOT USE) 84 | */ 85 | @mobileWidth: auto; 86 | @mobileMargin: 0em; 87 | @mobileGutter: 0em; 88 | 89 | @tabletWidth: auto; 90 | @tabletMargin: 0em; 91 | @tabletGutter: 2em; 92 | 93 | @computerWidth: auto; 94 | @computerMargin: 0em; 95 | @computerGutter: 3%; 96 | 97 | @largeMonitorWidth: auto; 98 | @largeMonitorMargin: 0em; 99 | @largeMonitorGutter: 15%; 100 | 101 | @widescreenMonitorWidth: auto; 102 | @widescreenMargin: 0em; 103 | @widescreenMonitorGutter: 23%; -------------------------------------------------------------------------------- /src/definitions/collections/breadcrumb.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Breadcrumb 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | /******************************* 12 | Theme 13 | *******************************/ 14 | 15 | @type : 'collection'; 16 | @element : 'breadcrumb'; 17 | 18 | @import (multiple) '../../theme.config'; 19 | 20 | 21 | /******************************* 22 | Breadcrumb 23 | *******************************/ 24 | 25 | .ui.breadcrumb { 26 | line-height: 1; 27 | display: @display; 28 | margin: @verticalMargin 0em; 29 | vertical-align: @verticalAlign; 30 | } 31 | .ui.breadcrumb:first-child { 32 | margin-top: 0em; 33 | } 34 | .ui.breadcrumb:last-child { 35 | margin-bottom: 0em; 36 | } 37 | 38 | /******************************* 39 | Content 40 | *******************************/ 41 | 42 | /* Divider */ 43 | .ui.breadcrumb .divider { 44 | display: inline-block; 45 | opacity: @dividerOpacity; 46 | margin: 0em @dividerSpacing 0em; 47 | 48 | font-size: @dividerSize; 49 | color: @dividerColor; 50 | vertical-align: @dividerVerticalAlign; 51 | } 52 | 53 | /* Link */ 54 | .ui.breadcrumb a { 55 | color: @linkColor; 56 | } 57 | .ui.breadcrumb a:hover { 58 | color: @linkHoverColor; 59 | } 60 | 61 | 62 | /* Icon Divider */ 63 | .ui.breadcrumb .icon.divider { 64 | font-size: @iconDividerSize; 65 | vertical-align: @iconDividerVerticalAlign; 66 | } 67 | 68 | /* Section */ 69 | .ui.breadcrumb a.section { 70 | cursor: pointer; 71 | } 72 | .ui.breadcrumb .section { 73 | display: inline-block; 74 | margin: @sectionMargin; 75 | padding: @sectionPadding; 76 | } 77 | 78 | /* Loose Coupling */ 79 | .ui.breadcrumb.segment { 80 | display: inline-block; 81 | padding: @segmentPadding; 82 | } 83 | 84 | /******************************* 85 | States 86 | *******************************/ 87 | 88 | .ui.breadcrumb .active.section { 89 | font-weight: @activeFontWeight; 90 | } 91 | 92 | 93 | /******************************* 94 | Variations 95 | *******************************/ 96 | 97 | .ui.mini.breadcrumb { 98 | font-size: @mini; 99 | } 100 | .ui.tiny.breadcrumb { 101 | font-size: @tiny; 102 | } 103 | .ui.small.breadcrumb { 104 | font-size: @small; 105 | } 106 | .ui.breadcrumb { 107 | font-size: @medium; 108 | } 109 | .ui.large.breadcrumb { 110 | font-size: @large; 111 | } 112 | .ui.big.breadcrumb { 113 | font-size: @big; 114 | } 115 | .ui.huge.breadcrumb { 116 | font-size: @huge; 117 | } 118 | .ui.massive.breadcrumb { 119 | font-size: @massive; 120 | } 121 | 122 | .loadUIOverrides(); 123 | -------------------------------------------------------------------------------- /src/themes/default/modules/accordion.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Accordion 3 | *******************************/ 4 | 5 | @boxShadow: none; 6 | 7 | /* Title */ 8 | @titleFont: @headerFont; 9 | @titlePadding: 0.5em 0em; 10 | @titleFontSize: 1em; 11 | @titleColor: @textColor; 12 | 13 | /* Icon */ 14 | @iconOpacity: 1; 15 | @iconFontSize: 1em; 16 | @iconFloat: none; 17 | @iconWidth: 1.25em; 18 | @iconHeight: 1em; 19 | @iconDisplay: inline-block; 20 | @iconMargin: 0em 0.25rem 0em 0rem; 21 | @iconPadding: 0em; 22 | @iconTransition: 23 | transform @defaultDuration @defaultEasing, 24 | opacity @defaultDuration @defaultEasing 25 | ; 26 | @iconVerticalAlign: baseline; 27 | @iconTransform: none; 28 | 29 | /* Child Accordion */ 30 | @childAccordionMargin: 1em 0em 0em; 31 | @childAccordionPadding: 0em; 32 | 33 | /* Content */ 34 | @contentMargin: ''; 35 | @contentPadding: 0.5em 0em 1em; 36 | 37 | /*------------------- 38 | Coupling 39 | --------------------*/ 40 | 41 | @menuTitlePadding: 0em; 42 | @menuIconFloat: right; 43 | @menuIconMargin: @lineHeightOffset 0em 0em 1em; 44 | @menuIconTransform: rotate(180deg); 45 | 46 | 47 | /*------------------- 48 | States 49 | --------------------*/ 50 | 51 | @activeIconTransform: rotate(90deg); 52 | 53 | /*------------------- 54 | Variations 55 | --------------------*/ 56 | 57 | /* Styled */ 58 | @styledWidth: 600px; 59 | @styledBackground: @white; 60 | @styledBorderRadius: @defaultBorderRadius; 61 | @styledBoxShadow: 62 | @subtleShadow, 63 | 0px 0px 0px 1px @borderColor 64 | ; 65 | 66 | /* Content */ 67 | @styledContentMargin: 0em; 68 | @styledContentPadding: 0.5em 1em 1.5em; 69 | 70 | /* Child Content */ 71 | @styledChildContentMargin: 0em; 72 | @styledChildContentPadding: @styledContentPadding; 73 | 74 | /* Styled Title */ 75 | @styledTitleMargin: 0em; 76 | @styledTitlePadding: 0.75em 1em; 77 | @styledTitleFontWeight: @bold; 78 | @styledTitleColor: @unselectedTextColor; 79 | @styledTitleTransition: background-color @defaultDuration @defaultEasing; 80 | @styledTitleBorder: 1px solid @borderColor; 81 | @styledTitleTransition: 82 | background @defaultDuration @defaultEasing, 83 | color @defaultDuration @defaultEasing 84 | ; 85 | 86 | /* Styled Title States */ 87 | @styledTitleHoverBackground: transparent; 88 | @styledTitleHoverColor: @textColor; 89 | @styledActiveTitleBackground: transparent; 90 | @styledActiveTitleColor: @selectedTextColor; 91 | 92 | /* Styled Child Title States */ 93 | @styledHoverChildTitleBackground: @styledTitleHoverBackground; 94 | @styledHoverChildTitleColor: @styledTitleHoverColor; 95 | @styledActiveChildTitleBackground: @styledActiveTitleBackground; 96 | @styledActiveChildTitleColor: @styledActiveTitleColor; 97 | 98 | /* Inverted */ 99 | @invertedTitleColor: @invertedTextColor; 100 | 101 | -------------------------------------------------------------------------------- /src/semantic.less: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ 4 | ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ 5 | ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ 6 | ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ 7 | ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ 8 | ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ 9 | 10 | Import this file into your LESS project to use Semantic UI without build tools 11 | */ 12 | 13 | /* Global */ 14 | & { @import "definitions/globals/site"; } 15 | 16 | /* Elements */ 17 | & { @import "definitions/elements/button"; } 18 | & { @import "definitions/elements/container"; } 19 | & { @import "definitions/elements/divider"; } 20 | & { @import "definitions/elements/flag"; } 21 | & { @import "definitions/elements/header"; } 22 | & { @import "definitions/elements/icon"; } 23 | & { @import "definitions/elements/image"; } 24 | & { @import "definitions/elements/input"; } 25 | & { @import "definitions/elements/label"; } 26 | & { @import "definitions/elements/list"; } 27 | & { @import "definitions/elements/loader"; } 28 | & { @import "definitions/elements/placeholder"; } 29 | & { @import "definitions/elements/rail"; } 30 | & { @import "definitions/elements/reveal"; } 31 | & { @import "definitions/elements/segment"; } 32 | & { @import "definitions/elements/step"; } 33 | 34 | /* Collections */ 35 | & { @import "definitions/collections/breadcrumb"; } 36 | & { @import "definitions/collections/form"; } 37 | & { @import "definitions/collections/grid"; } 38 | & { @import "definitions/collections/menu"; } 39 | & { @import "definitions/collections/message"; } 40 | & { @import "definitions/collections/table"; } 41 | 42 | /* Views */ 43 | & { @import "definitions/views/ad"; } 44 | & { @import "definitions/views/card"; } 45 | & { @import "definitions/views/comment"; } 46 | & { @import "definitions/views/feed"; } 47 | & { @import "definitions/views/item"; } 48 | & { @import "definitions/views/statistic"; } 49 | 50 | /* Modules */ 51 | & { @import "definitions/modules/accordion"; } 52 | & { @import "definitions/modules/checkbox"; } 53 | & { @import "definitions/modules/dimmer"; } 54 | & { @import "definitions/modules/dropdown"; } 55 | & { @import "definitions/modules/embed"; } 56 | & { @import "definitions/modules/modal"; } 57 | & { @import "definitions/modules/nag"; } 58 | & { @import "definitions/modules/popup"; } 59 | & { @import "definitions/modules/progress"; } 60 | & { @import "definitions/modules/rating"; } 61 | & { @import "definitions/modules/search"; } 62 | & { @import "definitions/modules/shape"; } 63 | & { @import "definitions/modules/sidebar"; } 64 | & { @import "definitions/modules/sticky"; } 65 | & { @import "definitions/modules/tab"; } 66 | & { @import "definitions/modules/transition"; } 67 | -------------------------------------------------------------------------------- /tasks/config/admin/release.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Release Settings 3 | *******************************/ 4 | 5 | // release settings 6 | module.exports = { 7 | 8 | // path to components for repos 9 | source : './dist/components/', 10 | 11 | // modified asset paths for component repos 12 | paths: { 13 | source : '../themes/default/assets/', 14 | output : 'assets/' 15 | }, 16 | 17 | templates: { 18 | bower : './tasks/config/admin/templates/bower.json', 19 | composer : './tasks/config/admin/templates/composer.json', 20 | package : './tasks/config/admin/templates/package.json', 21 | meteor : { 22 | css : './tasks/config/admin/templates/css-package.js', 23 | component : './tasks/config/admin/templates/component-package.js', 24 | less : './tasks/config/admin/templates/less-package.js', 25 | }, 26 | readme : './tasks/config/admin/templates/README.md', 27 | notes : './RELEASE-NOTES.md' 28 | }, 29 | 30 | org : 'Semantic-Org', 31 | repo : 'Semantic-UI', 32 | 33 | // files created for package managers 34 | files: { 35 | composer : 'composer.json', 36 | config : 'semantic.json', 37 | npm : 'package.json', 38 | meteor : 'package.js' 39 | }, 40 | 41 | // root name for distribution repos 42 | distRepoRoot : 'Semantic-UI-', 43 | 44 | // root name for single component repos 45 | componentRepoRoot : 'UI-', 46 | 47 | // root name for package managers 48 | packageRoot : 'semantic-ui-', 49 | 50 | // root path to repos 51 | outputRoot : '../repos/', 52 | 53 | homepage : 'http://www.semantic-ui.com', 54 | 55 | // distributions that get separate repos 56 | distributions: [ 57 | 'LESS', 58 | 'CSS' 59 | ], 60 | 61 | // components that get separate repositories for bower/npm 62 | components : [ 63 | 'accordion', 64 | 'ad', 65 | 'api', 66 | 'breadcrumb', 67 | 'button', 68 | 'card', 69 | 'calendar', 70 | 'checkbox', 71 | 'comment', 72 | 'container', 73 | 'dimmer', 74 | 'divider', 75 | 'dropdown', 76 | 'embed', 77 | 'emoji', 78 | 'feed', 79 | 'flag', 80 | 'form', 81 | 'grid', 82 | 'header', 83 | 'icon', 84 | 'image', 85 | 'input', 86 | 'item', 87 | 'label', 88 | 'list', 89 | 'loader', 90 | 'menu', 91 | 'message', 92 | 'modal', 93 | 'nag', 94 | 'placeholder', 95 | 'popup', 96 | 'progress', 97 | 'rail', 98 | 'slider', 99 | 'rating', 100 | 'reset', 101 | 'reveal', 102 | 'search', 103 | 'segment', 104 | 'shape', 105 | 'sidebar', 106 | 'site', 107 | 'statistic', 108 | 'step', 109 | 'sticky', 110 | 'tab', 111 | 'table', 112 | 'text', 113 | 'toast', 114 | 'transition', 115 | 'visibility' 116 | ] 117 | }; 118 | -------------------------------------------------------------------------------- /src/themes/default/elements/input.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Input 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @inputFont: @pageFont; 10 | @verticalPadding: @inputVerticalPadding; 11 | @horizontalPadding: @inputHorizontalPadding; 12 | 13 | @lineHeight: @inputLineHeight; 14 | @lineHeightOffset: ((@lineHeight - 1em) / 2); 15 | 16 | @padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding; 17 | 18 | @textAlign: left; 19 | @background: @inputBackground; 20 | @borderWidth: 1px; 21 | @border: @borderWidth solid @borderColor; 22 | @boxShadow: none; 23 | 24 | @borderRadius: @defaultBorderRadius; 25 | @transition: 26 | box-shadow @defaultDuration @defaultEasing, 27 | border-color @defaultDuration @defaultEasing, 28 | outline-offset @defaultDuration @defaultEasing, 29 | outline-color @defaultDuration @defaultEasing 30 | ; 31 | 32 | /*------------------- 33 | Types 34 | --------------------*/ 35 | 36 | /* Icon Input */ 37 | @iconWidth: (@verticalPadding * 2) + @glyphWidth; 38 | @iconOpacity: 0.5; 39 | @iconFocusOpacity: 1; 40 | @iconOffset: -0.5em; 41 | 42 | @iconDistance: 0em; 43 | @iconMargin: @iconWidth + @iconDistance; 44 | @iconTransition: opacity 0.3s @defaultEasing; 45 | 46 | @transparentIconWidth: @glyphWidth; 47 | @transparentIconMargin: 2em; 48 | 49 | /* Circular Icon Input */ 50 | @circularIconVerticalOffset: 0.35em; 51 | @circularIconHorizontalOffset: 0.5em; 52 | 53 | /* Labeled Input */ 54 | @labelCornerTop: @borderWidth; 55 | @labelCornerRight: @borderWidth; 56 | @labelCornerSize: @relative9px; 57 | @labelSize: 1em; 58 | @labelVerticalPadding: (@verticalPadding - @lineHeightOffset); 59 | 60 | @labeledMargin: 2.5em; 61 | @labeledIconInputMargin: 3.25em; 62 | @labeledIconMargin: 1.25em; 63 | 64 | /*------------------- 65 | States 66 | --------------------*/ 67 | 68 | /* Placeholder */ 69 | @placeholderColor: @inputPlaceholderColor; 70 | @placeholderFocusColor: @inputPlaceholderFocusColor; 71 | 72 | /* Down */ 73 | @downBorderColor: rgba(0, 0, 0, 0.3); 74 | @downBackground: #FAFAFA; 75 | @downColor: @textColor; 76 | @downBoxShadow: none; 77 | 78 | /* Focus */ 79 | @focusBorderColor: @focusedFormBorderColor; 80 | @focusBackground: @background; 81 | @focusColor: @hoveredTextColor; 82 | @focusBoxShadow: none; 83 | 84 | /* Error */ 85 | @errorBackground: @negativeBackgroundColor; 86 | @errorColor: @negativeTextColor; 87 | @errorBorder: @negativeBorderColor; 88 | @errorBoxShadow: none; 89 | 90 | @placeholderErrorColor: lighten(@errorColor, 40); 91 | @placeholderErrorFocusColor: lighten(@errorColor, 30); 92 | 93 | /* Loader */ 94 | @invertedLoaderFillColor: rgba(0, 0, 0, 0.15); 95 | 96 | /*------------------- 97 | Variations 98 | --------------------*/ 99 | 100 | /* Inverted */ 101 | @transparentInvertedPlaceholderColor: @invertedUnselectedTextColor; 102 | @transparentInvertedColor: @white; 103 | 104 | -------------------------------------------------------------------------------- /src/themes/default/elements/icon.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Icon 3 | *******************************/ 4 | 5 | /*-------------- 6 | Font Files 7 | ---------------*/ 8 | 9 | @fontName: 'icons'; 10 | @src: 11 | url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), 12 | url("@{fontPath}/@{fontName}.woff2") format('woff2'), 13 | url("@{fontPath}/@{fontName}.woff") format('woff'), 14 | url("@{fontPath}/@{fontName}.ttf") format('truetype'), 15 | url("@{fontPath}/@{fontName}.svg#icons") format('svg') 16 | ; 17 | @fallbackSRC: url("@{fontPath}/@{fontName}.eot"); 18 | 19 | /*-------------- 20 | Optional Files 21 | ---------------*/ 22 | 23 | /* Outline Icons */ 24 | @importOutlineIcons: true; 25 | @outlineFontName: 'outline-icons'; 26 | @outlineSrc: 27 | url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'), 28 | url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'), 29 | url("@{fontPath}/@{outlineFontName}.woff") format('woff'), 30 | url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'), 31 | url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg') 32 | ; 33 | @outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot"); 34 | 35 | /* Brand Icons */ 36 | @importBrandIcons: true; 37 | @brandFontName: 'brand-icons'; 38 | @brandSrc: 39 | url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'), 40 | url("@{fontPath}/@{brandFontName}.woff2") format('woff2'), 41 | url("@{fontPath}/@{brandFontName}.woff") format('woff'), 42 | url("@{fontPath}/@{brandFontName}.ttf") format('truetype'), 43 | url("@{fontPath}/@{brandFontName}.svg#icons") format('svg') 44 | ; 45 | @brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot"); 46 | 47 | /*-------------- 48 | Definition 49 | ---------------*/ 50 | 51 | /* Icon Variables */ 52 | @opacity: 1; 53 | @width: @iconWidth; 54 | @height: 1em; 55 | @distanceFromText: 0.25rem; 56 | @lineHeight: 1; 57 | 58 | 59 | /* Variations */ 60 | @linkOpacity: 0.8; 61 | @linkDuration: 0.3s; 62 | @loadingDuration: 2s; 63 | 64 | @circularSize: 2em; 65 | @circularPadding: 0.5em 0em; 66 | @circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; 67 | 68 | @borderedSize: 2em; 69 | @borderedVerticalPadding: ((@borderedSize - @height) / 2); 70 | @borderedHorizontalPadding: 0em; 71 | @borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; 72 | 73 | @cornerIconSize: 0.45em; 74 | @cornerIconStroke: 1px; 75 | @cornerIconShadow: 76 | -@cornerIconStroke -@cornerIconStroke 0 @white, 77 | @cornerIconStroke -@cornerIconStroke 0 @white, 78 | -@cornerIconStroke @cornerIconStroke 0 @white, 79 | @cornerIconStroke @cornerIconStroke 0 @white 80 | ; 81 | @cornerIconInvertedShadow: 82 | -@cornerIconStroke -@cornerIconStroke 0 @black, 83 | @cornerIconStroke -@cornerIconStroke 0 @black, 84 | -@cornerIconStroke @cornerIconStroke 0 @black, 85 | @cornerIconStroke @cornerIconStroke 0 @black 86 | ; 87 | 88 | @mini: 0.4em; 89 | @tiny: 0.5em; 90 | @small: 0.75em; 91 | @medium: 1em; 92 | @large: 1.5em; 93 | @big: 2em; 94 | @huge: 4em; 95 | @massive: 8em; 96 | -------------------------------------------------------------------------------- /src/themes/default/elements/divider.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | 6 | .ui.horizontal.divider:before, 7 | .ui.horizontal.divider:after { 8 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); 9 | } 10 | 11 | @media only screen and (max-width : (@tabletBreakpoint - 1px)) { 12 | .ui.stackable.grid .ui.vertical.divider:before, 13 | .ui.grid .stackable.row .ui.vertical.divider:before, 14 | .ui.stackable.grid .ui.vertical.divider:after, 15 | .ui.grid .stackable.row .ui.vertical.divider:after { 16 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); 17 | } 18 | } -------------------------------------------------------------------------------- /src/definitions/modules/shape.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Shape 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | 13 | /******************************* 14 | Theme 15 | *******************************/ 16 | 17 | @type : 'module'; 18 | @element : 'shape'; 19 | 20 | @import (multiple) '../../theme.config'; 21 | 22 | /******************************* 23 | Shape 24 | *******************************/ 25 | 26 | .ui.shape { 27 | position: relative; 28 | vertical-align: top; 29 | display: @display; 30 | perspective: @perspective; 31 | transition: @transition; 32 | } 33 | 34 | .ui.shape .sides { 35 | transform-style: preserve-3d; 36 | } 37 | 38 | .ui.shape .side { 39 | opacity: 1; 40 | width: 100%; 41 | 42 | margin: @sideMargin !important; 43 | backface-visibility: @backfaceVisibility; 44 | } 45 | 46 | .ui.shape .side { 47 | display: none; 48 | } 49 | 50 | .ui.shape .side * { 51 | backface-visibility: visible !important; 52 | } 53 | 54 | /******************************* 55 | Types 56 | *******************************/ 57 | 58 | .ui.cube.shape .side { 59 | min-width: @cubeSize; 60 | height: @cubeSize; 61 | 62 | padding: @cubePadding; 63 | 64 | background-color: @cubeBackground; 65 | color: @cubeTextColor; 66 | box-shadow: @cubeBoxShadow; 67 | } 68 | .ui.cube.shape .side > .content { 69 | width: 100%; 70 | height: 100%; 71 | display: table; 72 | 73 | text-align: @cubeTextAlign; 74 | user-select: text; 75 | } 76 | .ui.cube.shape .side > .content > div { 77 | display: table-cell; 78 | vertical-align: middle; 79 | font-size: @cubeFontSize; 80 | } 81 | 82 | /******************************* 83 | Variations 84 | *******************************/ 85 | 86 | .ui.text.shape.animating .sides { 87 | position: static; 88 | } 89 | .ui.text.shape .side { 90 | white-space: nowrap; 91 | } 92 | .ui.text.shape .side > * { 93 | white-space: normal; 94 | } 95 | 96 | 97 | /******************************* 98 | States 99 | *******************************/ 100 | 101 | /*-------------- 102 | Loading 103 | ---------------*/ 104 | 105 | .ui.loading.shape { 106 | position: absolute; 107 | top: -9999px; 108 | left: -9999px; 109 | } 110 | 111 | 112 | /*-------------- 113 | Animating 114 | ---------------*/ 115 | 116 | .ui.shape .animating.side { 117 | position: absolute; 118 | top: 0px; 119 | left: 0px; 120 | display: block; 121 | z-index: @animatingZIndex; 122 | } 123 | .ui.shape .hidden.side { 124 | opacity: @hiddenSideOpacity; 125 | } 126 | 127 | 128 | /*-------------- 129 | CSS 130 | ---------------*/ 131 | 132 | .ui.shape.animating .sides { 133 | position: absolute; 134 | } 135 | .ui.shape.animating .sides { 136 | transition: @transition; 137 | } 138 | .ui.shape.animating .side { 139 | transition: @sideTransition; 140 | } 141 | 142 | /*-------------- 143 | Active 144 | ---------------*/ 145 | 146 | .ui.shape .active.side { 147 | display: block; 148 | } 149 | 150 | .loadUIOverrides(); 151 | -------------------------------------------------------------------------------- /src/themes/default/modules/rating.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Rating 3 | *******************************/ 4 | 5 | @margin: 0em @relativeMini; 6 | @whiteSpace: nowrap; 7 | @verticalAlign: baseline; 8 | 9 | @iconCursor: pointer; 10 | @iconWidth: 1.25em; 11 | @iconHeight: auto; 12 | @iconTransition: 13 | opacity @defaultDuration @defaultEasing, 14 | background @defaultDuration @defaultEasing, 15 | text-shadow @defaultDuration @defaultEasing, 16 | color @defaultDuration @defaultEasing 17 | ; 18 | 19 | 20 | /*------------------- 21 | Types 22 | --------------------*/ 23 | 24 | /* Standard */ 25 | @inactiveBackground: transparent; 26 | @inactiveColor: rgba(0, 0, 0, 0.15); 27 | 28 | @selectedBackground: @inactiveBackground; 29 | @selectedColor: @textColor; 30 | 31 | @activeBackground: @inactiveBackground; 32 | @activeColor: @darkTextColor; 33 | 34 | /* Star */ 35 | @starIconWidth: @iconWidth; 36 | @starIconHeight: @iconHeight; 37 | @starShadowWidth: 1px; 38 | 39 | @starInactiveBackground: @inactiveBackground; 40 | @starInactiveColor: @inactiveColor; 41 | @starInactiveTextShadow: none; 42 | 43 | @starActiveBackground: @activeBackground; 44 | @starActiveColor: #FFE623; 45 | @starActiveShadowColor: #DDC507; 46 | @starActiveTextShadow: 47 | 0px -@starShadowWidth 0px @starActiveShadowColor, 48 | -@starShadowWidth 0px 0px @starActiveShadowColor, 49 | 0px @starShadowWidth 0px @starActiveShadowColor, 50 | @starShadowWidth 0px 0px @starActiveShadowColor 51 | ; 52 | 53 | @starSelectedBackground: @selectedBackground; 54 | @starSelectedColor: #FFCC00; 55 | @starSelectedShadowColor: #E6A200; 56 | @starSelectedTextShadow: 57 | 0px -@starShadowWidth 0px @starSelectedShadowColor, 58 | -@starShadowWidth 0px 0px @starSelectedShadowColor, 59 | 0px @starShadowWidth 0px @starSelectedShadowColor, 60 | @starShadowWidth 0px 0px @starSelectedShadowColor 61 | ; 62 | 63 | /* Heart */ 64 | @heartIconWidth: 1.4em; 65 | @heartIconHeight: @iconHeight; 66 | @heartShadowWidth: 1px; 67 | 68 | @heartInactiveBackground: @inactiveBackground; 69 | @heartInactiveColor: @inactiveColor; 70 | @heartInactiveTextShadow: none; 71 | 72 | @heartActiveBackground: @activeBackground; 73 | @heartActiveColor: #FF6D75; 74 | @heartActiveShadowColor: #CD0707; 75 | @heartActiveTextShadow: 76 | 0px -@heartShadowWidth 0px @heartActiveShadowColor, 77 | -@heartShadowWidth 0px 0px @heartActiveShadowColor, 78 | 0px @heartShadowWidth 0px @heartActiveShadowColor, 79 | @heartShadowWidth 0px 0px @heartActiveShadowColor 80 | ; 81 | 82 | @heartSelectedBackground: @selectedBackground; 83 | @heartSelectedColor: #FF3000; 84 | @heartSelectedShadowColor: #AA0101; 85 | @heartSelectedTextShadow: 86 | 0px -@heartShadowWidth 0px @heartSelectedShadowColor, 87 | -@heartShadowWidth 0px 0px @heartSelectedShadowColor, 88 | 0px @heartShadowWidth 0px @heartSelectedShadowColor, 89 | @heartShadowWidth 0px 0px @heartSelectedShadowColor 90 | ; 91 | 92 | /*------------------- 93 | States 94 | --------------------*/ 95 | 96 | @interactiveActiveIconOpacity: 1; 97 | @interactiveSelectedIconOpacity: 1; 98 | 99 | /*------------------- 100 | Variations 101 | --------------------*/ 102 | 103 | @massive: 2rem; -------------------------------------------------------------------------------- /src/themes/default/modules/progress.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @verticalSpacing: 1em; 10 | @margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing); 11 | @firstMargin: 0em 0em (@labelHeight + @verticalSpacing); 12 | @lastMargin: 0em 0em (@labelHeight); 13 | 14 | @background: @strongTransparentBlack; 15 | @border: none; 16 | @boxShadow: none; 17 | @padding: 0em; 18 | @borderRadius: @defaultBorderRadius; 19 | 20 | /* Bar */ 21 | @barPosition: relative; 22 | @barHeight: 1.75em; 23 | @barBackground: #888888; 24 | @barBorderRadius: @borderRadius; 25 | @barTransitionEasing: @defaultEasing; 26 | @barTransitionDuration: @defaultDuration; 27 | @barTransition: 28 | width @barTransitionDuration @barTransitionEasing, 29 | background-color @barTransitionDuration @barTransitionEasing 30 | ; 31 | @barInitialWidth: 0%; 32 | @barMinWidth: 2em; 33 | 34 | /* Progress Bar Label */ 35 | @progressWidth: auto; 36 | @progressSize: @relativeSmall; 37 | @progressPosition: absolute; 38 | @progressTop: 50%; 39 | @progressRight: 0.5em; 40 | @progressLeft: auto; 41 | @progressBottom: auto; 42 | @progressOffset: -0.5em; 43 | @progressColor: @invertedLightTextColor; 44 | @progressTextShadow: none; 45 | @progressFontWeight: @bold; 46 | @progressTextAlign: left; 47 | 48 | /* Label */ 49 | @labelWidth: 100%; 50 | @labelHeight: 1.5em; 51 | @labelSize: 1em; 52 | @labelPosition: absolute; 53 | @labelTop: 100%; 54 | @labelLeft: 0%; 55 | @labelRight: auto; 56 | @labelBottom: auto; 57 | @labelOffset: (@labelHeight - 1.3em); 58 | @labelColor: @textColor; 59 | @labelTextShadow: none; 60 | @labelFontWeight: @bold; 61 | @labelTextAlign: center; 62 | @labelTransition: color 0.4s @defaultEasing; 63 | 64 | /*------------------- 65 | Types 66 | --------------------*/ 67 | 68 | @indicatingFirstColor: #D95C5C; 69 | @indicatingSecondColor: #EFBC72; 70 | @indicatingThirdColor: #E6BB48; 71 | @indicatingFourthColor: #DDC928; 72 | @indicatingFifthColor: #B4D95C; 73 | @indicatingSixthColor: #66DA81; 74 | 75 | @indicatingFirstLabelColor: @textColor; 76 | @indicatingSecondLabelColor: @textColor; 77 | @indicatingThirdLabelColor: @textColor; 78 | @indicatingFourthLabelColor: @textColor; 79 | @indicatingFifthLabelColor: @textColor; 80 | @indicatingSixthLabelColor: @textColor; 81 | 82 | /*------------------- 83 | States 84 | --------------------*/ 85 | 86 | /* Active */ 87 | @activePulseColor: @white; 88 | @activePulseMaxOpacity: 0.3; 89 | @activePulseDuration: 2s; 90 | @activeMinWidth: @barMinWidth; 91 | 92 | 93 | /*------------------- 94 | Variations 95 | --------------------*/ 96 | 97 | /* Attached */ 98 | @attachedBackground: transparent; 99 | @attachedHeight: 0.2rem; 100 | @attachedBorderRadius: @borderRadius; 101 | 102 | /* Inverted */ 103 | @invertedBackground: @transparentWhite; 104 | @invertedBorder: none; 105 | @invertedBarBackground: @barBackground; 106 | @invertedProgressColor: @offWhite; 107 | @invertedLabelColor: @white; 108 | 109 | /* Sizing */ 110 | @tinyBarHeight: 0.5em; 111 | @smallBarHeight: 1em; 112 | @largeBarHeight: 2.5em; 113 | @bigBarHeight: 3.5em; 114 | -------------------------------------------------------------------------------- /tasks/docs/build.js: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Build Docs 3 | *******************************/ 4 | 5 | var 6 | gulp = require('gulp'), 7 | 8 | // node dependencies 9 | console = require('better-console'), 10 | fs = require('fs'), 11 | map = require('map-stream'), 12 | 13 | // gulp dependencies 14 | print = require('gulp-print').default, 15 | 16 | // user config 17 | config = require('../config/docs'), 18 | 19 | // install config 20 | tasks = require('../config/tasks'), 21 | configSetup = require('../config/project/config'), 22 | install = require('../config/project/install'), 23 | 24 | // metadata parsing 25 | metadata = require('./metadata'), 26 | 27 | // build methods 28 | buildJS = require('../build/javascript').buildJS, 29 | buildCSS = require('../build/css').buildCSS, 30 | buildAssets = require('../build/assets').buildAssets, 31 | 32 | // shorthand 33 | log = tasks.log 34 | ; 35 | 36 | 37 | module.exports = function (callback) { 38 | 39 | // use a different config 40 | config = configSetup.addDerivedValues(config); 41 | 42 | // shorthand 43 | const globs = config.globs; 44 | const output = config.paths.output; 45 | 46 | /*-------------- 47 | Parse metadata 48 | ---------------*/ 49 | 50 | function buildMetaData() { 51 | // parse all *.html.eco in docs repo, data will end up in 52 | // metadata.result object. Note this assumes that the docs 53 | // repository is present and in proper directory location as 54 | // specified by docs.json. 55 | console.info('Building Metadata'); 56 | return gulp.src(config.paths.template.eco + globs.eco) 57 | .pipe(map(metadata.parser)) 58 | .on('end', function () { 59 | fs.mkdirSync(output.metadata, {recursive: true}); 60 | fs.writeFileSync(output.metadata + '/metadata.json', JSON.stringify(metadata.result, null, 2)); 61 | }); 62 | } 63 | 64 | /*-------------- 65 | Copy Examples 66 | ---------------*/ 67 | 68 | function copyExample() { 69 | // copy src/ to server 70 | console.info('Copying examples'); 71 | return gulp.src('examples/**/*.*') 72 | .pipe(gulp.dest(output.examples)) 73 | .pipe(print(log.created)); 74 | } 75 | 76 | 77 | /*-------------- 78 | Copy Source 79 | ---------------*/ 80 | 81 | function copyLess() { 82 | // copy src/ to server 83 | console.info('Copying LESS source'); 84 | return gulp.src('src/**/*.*') 85 | .pipe(gulp.dest(output.less)) 86 | .pipe(print(log.created)); 87 | } 88 | 89 | 90 | /*-------------- 91 | Build 92 | ---------------*/ 93 | 94 | console.info('Building Semantic for docs'); 95 | 96 | if (!install.isSetup()) { 97 | console.error('Cannot build files. Run "gulp install" to set-up Semantic'); 98 | callback(); 99 | return; 100 | } 101 | 102 | gulp.series( 103 | buildMetaData, 104 | copyExample, 105 | copyLess, 106 | (callback) => buildJS('docs', config, callback), 107 | (callback) => buildCSS('docs', config, {}, callback), 108 | (callback) => buildAssets(config, callback) 109 | )(callback); 110 | 111 | }; 112 | -------------------------------------------------------------------------------- /src/definitions/modules/nag.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Nag 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Theme 14 | *******************************/ 15 | 16 | @type : 'module'; 17 | @element : 'nag'; 18 | 19 | @import (multiple) '../../theme.config'; 20 | 21 | /******************************* 22 | Nag 23 | *******************************/ 24 | 25 | .ui.nag { 26 | display: none; 27 | opacity: @opacity; 28 | position: @position; 29 | 30 | top: @top; 31 | left: 0px; 32 | z-index: @zIndex; 33 | 34 | min-height: @minHeight; 35 | width: @width; 36 | 37 | margin: @margin; 38 | padding: @padding; 39 | 40 | background: @background; 41 | box-shadow: @boxShadow; 42 | 43 | font-size: @fontSize; 44 | text-align: @textAlign; 45 | color: @color; 46 | 47 | border-radius: @topBorderRadius; 48 | transition: @transition; 49 | } 50 | 51 | a.ui.nag { 52 | cursor: pointer; 53 | } 54 | 55 | .ui.nag > .title { 56 | display: inline-block; 57 | margin: @titleMargin; 58 | color: @titleColor; 59 | } 60 | 61 | 62 | .ui.nag > .close.icon { 63 | cursor: pointer; 64 | opacity: @closeOpacity; 65 | 66 | position: absolute; 67 | top: @closeTop; 68 | right: @closeRight; 69 | 70 | font-size: @closeSize; 71 | 72 | margin: @closeMargin; 73 | color: @closeColor; 74 | transition: @closeTransition; 75 | } 76 | 77 | 78 | 79 | /******************************* 80 | States 81 | *******************************/ 82 | 83 | /* Hover */ 84 | .ui.nag:hover { 85 | background: @nagHoverBackground; 86 | opacity: @nagHoverOpacity; 87 | } 88 | 89 | .ui.nag .close:hover { 90 | opacity: @closeHoverOpacity; 91 | } 92 | 93 | 94 | /******************************* 95 | Variations 96 | *******************************/ 97 | 98 | 99 | /*-------------- 100 | Static 101 | ---------------*/ 102 | 103 | .ui.overlay.nag { 104 | position: absolute; 105 | display: block; 106 | } 107 | 108 | /*-------------- 109 | Fixed 110 | ---------------*/ 111 | 112 | .ui.fixed.nag { 113 | position: fixed; 114 | } 115 | 116 | /*-------------- 117 | Bottom 118 | ---------------*/ 119 | 120 | .ui.bottom.nags, 121 | .ui.bottom.nag { 122 | border-radius: @bottomBorderRadius; 123 | top: auto; 124 | bottom: @bottom; 125 | } 126 | 127 | /*-------------- 128 | White 129 | ---------------*/ 130 | 131 | .ui.inverted.nags .nag, 132 | .ui.inverted.nag { 133 | background-color: @invertedBackground; 134 | color: @darkTextColor; 135 | } 136 | .ui.inverted.nags .nag .close, 137 | .ui.inverted.nags .nag .title, 138 | .ui.inverted.nag .close, 139 | .ui.inverted.nag .title { 140 | color: @lightTextColor; 141 | } 142 | 143 | 144 | /******************************* 145 | Groups 146 | *******************************/ 147 | 148 | .ui.nags .nag { 149 | border-radius: @groupedBorderRadius !important; 150 | } 151 | .ui.nags .nag:last-child { 152 | border-radius: @topBorderRadius; 153 | } 154 | .ui.bottom.nags .nag:last-child { 155 | border-radius: @bottomBorderRadius; 156 | } 157 | 158 | .loadUIOverrides(); 159 | -------------------------------------------------------------------------------- /src/themes/default/elements/step.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Step 3 | *******************************/ 4 | 5 | /*------------------- 6 | Group 7 | --------------------*/ 8 | 9 | @stepMargin: 1em 0em; 10 | @stepsBorderRadius: @defaultBorderRadius; 11 | @stepsBackground: ''; 12 | @stepsBoxShadow: none; 13 | @stepsBorder: 1px solid @borderColor; 14 | 15 | /*------------------- 16 | Element 17 | --------------------*/ 18 | 19 | @verticalMargin: 0em; 20 | @horizontalMargin: 0em; 21 | 22 | @arrowSize: @relativeLarge; 23 | @verticalPadding: @relativeLarge; 24 | @horizontalPadding: 2em; 25 | 26 | @transition: 27 | background-color @defaultDuration @defaultEasing, 28 | opacity @defaultDuration @defaultEasing, 29 | color @defaultDuration @defaultEasing, 30 | box-shadow @defaultDuration @defaultEasing 31 | ; 32 | @lineHeight: @relativeLarge; 33 | @alignItems: center; 34 | @justifyContent: center; 35 | @backgroundColor: @white; 36 | @background: @backgroundColor; 37 | @borderRadius: 0em; 38 | @borderWidth: 1px; 39 | @boxShadow: none; 40 | @border: none; 41 | @divider: @borderWidth solid @borderColor; 42 | 43 | /* Icon */ 44 | @iconDistance: 1rem; 45 | @iconSize: 2.5em; 46 | @iconAlign: middle; 47 | 48 | /* Title */ 49 | @titleFontFamily: @headerFont; 50 | @titleFontWeight: @bold; 51 | @titleFontSize: @relativeLarge; 52 | @titleColor: @darkTextColor; 53 | 54 | /* Description */ 55 | @descriptionDistance: 0.25em; 56 | @descriptionFontSize: @relativeSmall; 57 | @descriptionFontWeight: @normal; 58 | @descriptionColor: @textColor; 59 | 60 | 61 | /* Arrow */ 62 | @arrowBackgroundColor: @backgroundColor; 63 | @arrowTopOffset: 50%; 64 | @arrowRightOffset: 0%; 65 | @arrowBorderWidth: 0px @borderWidth @borderWidth 0px; 66 | 67 | @arrowDisplay: block; 68 | @lastArrowDisplay: none; 69 | 70 | @activeArrowDisplay: block; 71 | @activeLastArrowDisplay: none; 72 | 73 | /* Mobile */ 74 | @mobileIconDistance: @iconDistance; 75 | 76 | /*------------------- 77 | Types 78 | --------------------*/ 79 | 80 | /* Vertical */ 81 | @verticalDivider: @divider; 82 | @verticalArrowTopOffset: 50%; 83 | @verticalArrowRightOffset: 0%; 84 | @verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px; 85 | 86 | @verticalArrowDisplay: none; 87 | @verticalLastArrowDisplay: @verticalArrowDisplay; 88 | 89 | @verticalActiveArrowDisplay: block; 90 | @verticalActiveLastArrowDisplay: block; 91 | 92 | /*------------------- 93 | Variations 94 | --------------------*/ 95 | 96 | @attachedHorizontalOffset: -@borderWidth; 97 | @attachedVerticalOffset: 0; 98 | @attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2)); 99 | 100 | @orderedFontFamily: inherit; 101 | @orderedFontWeight: @bold; 102 | 103 | /*------------------- 104 | States 105 | --------------------*/ 106 | 107 | /* Completed */ 108 | @completedColor: @positiveColor; 109 | 110 | /* Hover */ 111 | @hoverBackground: @offWhite; 112 | @hoverColor: @hoveredTextColor; 113 | 114 | /* Down */ 115 | @downBackground: @darkWhite; 116 | @downColor: @pressedTextColor; 117 | 118 | /* Active */ 119 | @activeBackground: @darkWhite; 120 | @activeColor: @linkColor; 121 | @activeIconColor: @darkTextColor; 122 | 123 | /* Active + Hover */ 124 | @activeHoverBackground: @lightGrey; 125 | @activeHoverColor: @textColor; 126 | 127 | 128 | /* Disabled */ 129 | @disabledBackground: @background; 130 | @disabledColor: @disabledTextColor; 131 | -------------------------------------------------------------------------------- /src/themes/default/modules/dropdown.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | /* Dropdown Carets */ 6 | @font-face { 7 | font-family: 'Dropdown'; 8 | src: 9 | url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff') 10 | ; 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | .ui.dropdown > .dropdown.icon { 16 | font-family: 'Dropdown'; 17 | line-height: 1; 18 | height: 1em; 19 | width: 1.23em; 20 | backface-visibility: hidden; 21 | font-weight: normal; 22 | font-style: normal; 23 | text-align: center; 24 | } 25 | 26 | .ui.dropdown > .dropdown.icon { 27 | width: auto; 28 | } 29 | .ui.dropdown > .dropdown.icon:before { 30 | content: '\f0d7'; 31 | } 32 | 33 | 34 | /* Inline dropdown menu */ 35 | .ui.inline.dropdown .menu { 36 | background: @inlineMenuBackground; 37 | } 38 | 39 | /* Sub Menu */ 40 | .ui.dropdown .menu .item .dropdown.icon:before { 41 | content: '\f0da'/*rtl:'\f0d9'*/; 42 | } 43 | 44 | .ui.dropdown .item .left.dropdown.icon:before, 45 | .ui.dropdown .left.menu .item .dropdown.icon:before { 46 | content: "\f0d9"/*rtl:"\f0da"*/; 47 | } 48 | 49 | /* Vertical Menu Dropdown */ 50 | .ui.vertical.menu .dropdown.item > .dropdown.icon:before { 51 | content: "\f0da"/*rtl:"\f0d9"*/; 52 | } 53 | 54 | .ui.dropdown > .clear.icon:before { 55 | content: "\f00d"; 56 | } 57 | 58 | /* Icons for Reference (Subsetted in 2.4.0) 59 | .dropdown.down:before { content: "\f0d7"; } 60 | .dropdown.up:before { content: "\f0d8"; } 61 | .dropdown.left:before { content: "\f0d9"; } 62 | .dropdown.right:before { content: "\f0da"; } 63 | .dropdown.close:before { content: "\f00d"; } 64 | */ 65 | 66 | -------------------------------------------------------------------------------- /src/definitions/elements/rail.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Rail 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | /******************************* 12 | Theme 13 | *******************************/ 14 | 15 | @type : 'element'; 16 | @element : 'rail'; 17 | 18 | @import (multiple) '../../theme.config'; 19 | 20 | /******************************* 21 | Rails 22 | *******************************/ 23 | 24 | .ui.rail { 25 | position: absolute; 26 | top: 0%; 27 | width: @width; 28 | height: @height; 29 | } 30 | 31 | .ui.left.rail { 32 | left: auto; 33 | right: 100%; 34 | padding: 0em @splitDistance 0em 0em; 35 | margin: 0em @splitDistance 0em 0em; 36 | } 37 | 38 | .ui.right.rail { 39 | left: 100%; 40 | right: auto; 41 | padding: 0em 0em 0em @splitDistance; 42 | margin: 0em 0em 0em @splitDistance; 43 | } 44 | 45 | /******************************* 46 | Variations 47 | *******************************/ 48 | 49 | /*-------------- 50 | Internal 51 | ---------------*/ 52 | 53 | .ui.left.internal.rail { 54 | left: 0%; 55 | right: auto; 56 | padding: 0em 0em 0em @splitDistance; 57 | margin: 0em 0em 0em @splitDistance; 58 | } 59 | 60 | .ui.right.internal.rail { 61 | left: auto; 62 | right: 0%; 63 | padding: 0em @splitDistance 0em 0em; 64 | margin: 0em @splitDistance 0em 0em; 65 | } 66 | 67 | 68 | /*-------------- 69 | Dividing 70 | ---------------*/ 71 | 72 | .ui.dividing.rail { 73 | width: @dividingWidth; 74 | } 75 | .ui.left.dividing.rail { 76 | padding: 0em @splitDividingDistance 0em 0em; 77 | margin: 0em @splitDividingDistance 0em 0em; 78 | border-right: @dividingBorder; 79 | } 80 | .ui.right.dividing.rail { 81 | border-left: @dividingBorder; 82 | padding: 0em 0em 0em @splitDividingDistance; 83 | margin: 0em 0em 0em @splitDividingDistance; 84 | } 85 | 86 | /*-------------- 87 | Distance 88 | ---------------*/ 89 | 90 | .ui.close.rail { 91 | width: @closeWidth; 92 | } 93 | .ui.close.left.rail { 94 | padding: 0em @splitCloseDistance 0em 0em; 95 | margin: 0em @splitCloseDistance 0em 0em; 96 | } 97 | .ui.close.right.rail { 98 | padding: 0em 0em 0em @splitCloseDistance; 99 | margin: 0em 0em 0em @splitCloseDistance; 100 | } 101 | 102 | .ui.very.close.rail { 103 | width: @veryCloseWidth; 104 | } 105 | .ui.very.close.left.rail { 106 | padding: 0em @splitVeryCloseDistance 0em 0em; 107 | margin: 0em @splitVeryCloseDistance 0em 0em; 108 | } 109 | .ui.very.close.right.rail { 110 | padding: 0em 0em 0em @splitVeryCloseDistance; 111 | margin: 0em 0em 0em @splitVeryCloseDistance; 112 | } 113 | 114 | /*-------------- 115 | Attached 116 | ---------------*/ 117 | 118 | .ui.attached.left.rail, 119 | .ui.attached.right.rail { 120 | padding: 0em; 121 | margin: 0em; 122 | } 123 | 124 | /*-------------- 125 | Sizing 126 | ---------------*/ 127 | 128 | .ui.mini.rail { 129 | font-size: @mini; 130 | } 131 | .ui.tiny.rail { 132 | font-size: @tiny; 133 | } 134 | .ui.small.rail { 135 | font-size: @small; 136 | } 137 | .ui.rail { 138 | font-size: @medium; 139 | } 140 | .ui.large.rail { 141 | font-size: @large; 142 | } 143 | .ui.big.rail { 144 | font-size: @big; 145 | } 146 | .ui.huge.rail { 147 | font-size: @huge; 148 | } 149 | .ui.massive.rail { 150 | font-size: @massive; 151 | } 152 | 153 | 154 | .loadUIOverrides(); 155 | -------------------------------------------------------------------------------- /tasks/docs/metadata.js: -------------------------------------------------------------------------------- 1 | 2 | /******************************* 3 | Summarize Docs 4 | *******************************/ 5 | 6 | var 7 | // node dependencies 8 | console = require('better-console'), 9 | fs = require('fs'), 10 | YAML = require('yamljs') 11 | ; 12 | 13 | var data = {}; 14 | 15 | /** 16 | * Test for prefix in string. 17 | * @param {string} str 18 | * @param {string} prefix 19 | * @return {boolean} 20 | */ 21 | function startsWith(str, prefix) { 22 | return str.indexOf(prefix) === 0; 23 | }; 24 | 25 | function inArray(needle, haystack) { 26 | var length = haystack.length; 27 | for(var i = 0; i < length; i++) { 28 | if(haystack[i] == needle) return true; 29 | } 30 | return false; 31 | } 32 | 33 | /** 34 | * Parses a file for metadata and stores result in data object. 35 | * @param {File} file - object provided by map-stream. 36 | * @param {function(?,File)} - callback provided by map-stream to 37 | * reply when done. 38 | */ 39 | function parser(file, callback) { 40 | // file exit conditions 41 | if(file.isNull()) { 42 | return callback(null, file); // pass along 43 | } 44 | 45 | if(file.isStream()) { 46 | return callback(new Error('Streaming not supported')); 47 | } 48 | 49 | try { 50 | 51 | var 52 | /** @type {string} */ 53 | text = String(file.contents.toString('utf8')), 54 | lines = text.split('\n'), 55 | filename = file.path.substring(0, file.path.length - 4), 56 | key = 'server/documents', 57 | position = filename.indexOf(key) 58 | ; 59 | 60 | // exit conditions 61 | if(!lines) { 62 | return; 63 | } 64 | if(position < 0) { 65 | return callback(null, file); 66 | } 67 | 68 | filename = filename.substring(position + key.length + 1, filename.length); 69 | 70 | var 71 | lineCount = lines.length, 72 | active = false, 73 | yaml = [], 74 | categories = [ 75 | 'UI Element', 76 | 'UI Global', 77 | 'UI Collection', 78 | 'UI View', 79 | 'UI Module', 80 | 'UI Behavior' 81 | ], 82 | index, 83 | meta, 84 | line 85 | ; 86 | 87 | for(index = 0; index < lineCount; index++) { 88 | 89 | line = lines[index]; 90 | 91 | // Wait for metadata block to begin 92 | if(!active) { 93 | if(startsWith(line, '---')) { 94 | active = true; 95 | } 96 | continue; 97 | } 98 | // End of metadata block, stop parsing. 99 | if(startsWith(line, '---')) { 100 | break; 101 | } 102 | yaml.push(line); 103 | } 104 | 105 | 106 | // Parse yaml. 107 | meta = YAML.parse(yaml.join('\n')); 108 | if(meta && meta.type && meta.title && inArray(meta.type, categories) ) { 109 | meta.category = meta.type; 110 | meta.filename = filename; 111 | meta.url = '/' + filename; 112 | meta.title = meta.title; 113 | // Primary key will by filepath 114 | data[meta.element] = meta; 115 | } 116 | else { 117 | // skip 118 | // console.log(meta); 119 | } 120 | 121 | 122 | } 123 | 124 | catch(error) { 125 | console.log(error, filename); 126 | } 127 | 128 | callback(null, file); 129 | 130 | } 131 | 132 | /** 133 | * Export function expected by map-stream. 134 | */ 135 | module.exports = { 136 | result : data, 137 | parser : parser 138 | }; 139 | -------------------------------------------------------------------------------- /src/definitions/modules/embed.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Video 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | 12 | /******************************* 13 | Theme 14 | *******************************/ 15 | 16 | @type : 'module'; 17 | @element : 'embed'; 18 | 19 | @import (multiple) '../../theme.config'; 20 | 21 | /******************************* 22 | Types 23 | *******************************/ 24 | 25 | .ui.embed { 26 | position: relative; 27 | position: relative; 28 | max-width: 100%; 29 | height: 0px; 30 | overflow: hidden; 31 | background: @background; 32 | padding-bottom: @widescreenRatio; 33 | } 34 | 35 | /*----------------- 36 | Embedded Content 37 | ------------------*/ 38 | 39 | .ui.embed iframe, 40 | .ui.embed embed, 41 | .ui.embed object { 42 | position: absolute; 43 | border: none; 44 | width: 100%; 45 | height: 100%; 46 | top: 0px; 47 | left: 0px; 48 | margin: 0em; 49 | padding: 0em; 50 | } 51 | 52 | /*----------------- 53 | Embed 54 | ------------------*/ 55 | 56 | .ui.embed > .embed { 57 | display: none; 58 | } 59 | 60 | /*-------------- 61 | Placeholder 62 | ---------------*/ 63 | 64 | .ui.embed > .placeholder { 65 | position: absolute; 66 | cursor: pointer; 67 | top: 0px; 68 | left: 0px; 69 | display: block; 70 | width: 100%; 71 | height: 100%; 72 | background-color: @placeholderBackground; 73 | } 74 | 75 | /*-------------- 76 | Icon 77 | ---------------*/ 78 | 79 | .ui.embed > .icon { 80 | cursor: pointer; 81 | position: absolute; 82 | top: 0px; 83 | left: 0px; 84 | width: 100%; 85 | height: 100%; 86 | z-index: 2; 87 | } 88 | .ui.embed > .icon:after { 89 | position: absolute; 90 | top: 0%; 91 | left: 0%; 92 | width: 100%; 93 | height: 100%; 94 | z-index: 3; 95 | content: ''; 96 | background: @placeholderBackground; 97 | opacity: @placeholderBackgroundOpacity; 98 | transition: @placeholderBackgroundTransition; 99 | } 100 | .ui.embed > .icon:before { 101 | position: absolute; 102 | top: 50%; 103 | left: 50%; 104 | z-index: 4; 105 | transform: translateX(-50%) translateY(-50%); 106 | 107 | color: @iconColor; 108 | font-size: @iconSize; 109 | text-shadow: @iconShadow; 110 | transition: @iconTransition; 111 | z-index: @iconZIndex; 112 | } 113 | 114 | /******************************* 115 | States 116 | *******************************/ 117 | 118 | /*-------------- 119 | Hover 120 | ---------------*/ 121 | 122 | .ui.embed .icon:hover:after { 123 | background: @hoverPlaceholderBackground; 124 | opacity: @hoverPlaceholderBackgroundOpacity; 125 | } 126 | .ui.embed .icon:hover:before { 127 | color: @hoverIconColor; 128 | } 129 | 130 | /*-------------- 131 | Active 132 | ---------------*/ 133 | 134 | .ui.active.embed > .icon, 135 | .ui.active.embed > .placeholder { 136 | display: none; 137 | } 138 | .ui.active.embed > .embed { 139 | display: block; 140 | } 141 | 142 | .loadUIOverrides(); 143 | 144 | 145 | /******************************* 146 | Variations 147 | *******************************/ 148 | 149 | .ui.square.embed { 150 | padding-bottom: @squareRatio; 151 | } 152 | .ui[class*="4:3"].embed { 153 | padding-bottom: @standardRatio; 154 | } 155 | .ui[class*="16:9"].embed { 156 | padding-bottom: @widescreenRatio; 157 | } 158 | .ui[class*="21:9"].embed { 159 | padding-bottom: @ultraWidescreenRatio; 160 | } 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /src/themes/default/modules/accordion.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | @font-face { 5 | font-family: 'Accordion'; 6 | src: 7 | url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), 8 | url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') 9 | ; 10 | font-weight: normal; 11 | font-style: normal; 12 | } 13 | 14 | /* Dropdown Icon */ 15 | .ui.accordion .title .dropdown.icon, 16 | .ui.accordion .accordion .title .dropdown.icon { 17 | font-family: Accordion; 18 | line-height: 1; 19 | backface-visibility: hidden; 20 | font-weight: normal; 21 | font-style: normal; 22 | text-align: center; 23 | } 24 | 25 | .ui.accordion .title .dropdown.icon:before, 26 | .ui.accordion .accordion .title .dropdown.icon:before { 27 | content: '\f0da'/*rtl:'\f0d9'*/; 28 | } 29 | -------------------------------------------------------------------------------- /src/definitions/elements/container.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * # Semantic UI - Container 3 | * http://github.com/semantic-org/semantic-ui/ 4 | * 5 | * 6 | * Released under the MIT license 7 | * http://opensource.org/licenses/MIT 8 | * 9 | */ 10 | 11 | /******************************* 12 | Theme 13 | *******************************/ 14 | 15 | @type : 'element'; 16 | @element : 'container'; 17 | 18 | @import (multiple) '../../theme.config'; 19 | 20 | /******************************* 21 | Container 22 | *******************************/ 23 | 24 | /* All Sizes */ 25 | .ui.container { 26 | display: block; 27 | max-width: @maxWidth !important; 28 | } 29 | 30 | /* Mobile */ 31 | @media only screen and (max-width: @largestMobileScreen) { 32 | .ui.container { 33 | width: @mobileWidth !important; 34 | margin-left: @mobileGutter !important; 35 | margin-right: @mobileGutter !important; 36 | } 37 | .ui.grid.container { 38 | width: @mobileGridWidth !important; 39 | } 40 | .ui.relaxed.grid.container { 41 | width: @mobileRelaxedGridWidth !important; 42 | } 43 | .ui.very.relaxed.grid.container { 44 | width: @mobileVeryRelaxedGridWidth !important; 45 | } 46 | } 47 | 48 | /* Tablet */ 49 | @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { 50 | .ui.container { 51 | width: @tabletWidth; 52 | margin-left: @tabletGutter !important; 53 | margin-right: @tabletGutter !important; 54 | } 55 | .ui.grid.container { 56 | width: @tabletGridWidth !important; 57 | } 58 | .ui.relaxed.grid.container { 59 | width: @tabletRelaxedGridWidth !important; 60 | } 61 | .ui.very.relaxed.grid.container { 62 | width: @tabletVeryRelaxedGridWidth !important; 63 | } 64 | } 65 | 66 | /* Small Monitor */ 67 | @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { 68 | .ui.container { 69 | width: @computerWidth; 70 | margin-left: @computerGutter !important; 71 | margin-right: @computerGutter !important; 72 | } 73 | .ui.grid.container { 74 | width: @computerGridWidth !important; 75 | } 76 | .ui.relaxed.grid.container { 77 | width: @computerRelaxedGridWidth !important; 78 | } 79 | .ui.very.relaxed.grid.container { 80 | width: @computerVeryRelaxedGridWidth !important; 81 | } 82 | } 83 | 84 | /* Large Monitor */ 85 | @media only screen and (min-width: @largeMonitorBreakpoint) { 86 | .ui.container { 87 | width: @largeMonitorWidth; 88 | margin-left: @largeMonitorGutter !important; 89 | margin-right: @largeMonitorGutter !important; 90 | } 91 | .ui.grid.container { 92 | width: @largeMonitorGridWidth !important; 93 | } 94 | .ui.relaxed.grid.container { 95 | width: @largeMonitorRelaxedGridWidth !important; 96 | } 97 | .ui.very.relaxed.grid.container { 98 | width: @largeMonitorVeryRelaxedGridWidth !important; 99 | } 100 | } 101 | 102 | /******************************* 103 | Types 104 | *******************************/ 105 | 106 | 107 | /* Text Container */ 108 | .ui.text.container { 109 | font-family: @textFontFamily; 110 | max-width: @textWidth !important; 111 | line-height: @textLineHeight; 112 | } 113 | 114 | .ui.text.container { 115 | font-size: @textSize; 116 | } 117 | 118 | /* Fluid */ 119 | .ui.fluid.container { 120 | width: 100%; 121 | } 122 | 123 | 124 | /******************************* 125 | Variations 126 | *******************************/ 127 | 128 | .ui[class*="left aligned"].container { 129 | text-align: left; 130 | } 131 | .ui[class*="center aligned"].container { 132 | text-align: center; 133 | } 134 | .ui[class*="right aligned"].container { 135 | text-align: right; 136 | } 137 | .ui.justified.container { 138 | text-align: justify; 139 | hyphens: auto; 140 | } 141 | 142 | 143 | .loadUIOverrides(); 144 | -------------------------------------------------------------------------------- /src/themes/default/views/feed.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Feed 3 | *******************************/ 4 | 5 | /*------------------- 6 | Feed 7 | --------------------*/ 8 | 9 | @margin: 1em 0em; 10 | 11 | /*------------------- 12 | Elements 13 | --------------------*/ 14 | 15 | /* Event */ 16 | @eventWidth: 100%; 17 | @eventPadding: @3px 0em; 18 | @eventMargin: 0em; 19 | @eventBackground: none; 20 | @eventDivider: none; 21 | 22 | /* Event Label */ 23 | @labelWidth: 2.5em; 24 | @labelHeight: auto; 25 | @labelAlignSelf: stretch; 26 | @labelTextAlign: left; 27 | 28 | /* Icon Label */ 29 | @iconLabelOpacity: 1; 30 | @iconLabelWidth: 100%; 31 | @iconLabelSize: 1.5em; 32 | @iconLabelPadding: 0.25em; 33 | @iconLabelBackground: none; 34 | @iconLabelBorderRadius: none; 35 | @iconLabelBorder: none; 36 | @iconLabelColor: rgba(0, 0, 0, 0.6); 37 | 38 | /* Image Label */ 39 | @imageLabelWidth: 100%; 40 | @imageLabelHeight: auto; 41 | @imageLabelBorderRadius: @circularRadius; 42 | 43 | /* Content w/ Label */ 44 | @labeledContentMargin: 0.5em 0em @relative5px @relativeLarge; 45 | @lastLabeledContentPadding: 0em; 46 | 47 | /* Content */ 48 | @contentAlignSelf: stretch; 49 | @contentTextAlign: left; 50 | @contentWordWrap: break-word; 51 | 52 | /* Date */ 53 | @dateMargin: -0.5rem 0em 0em; 54 | @datePadding: 0em; 55 | @dateColor: @lightTextColor; 56 | @dateFontSize: @relativeMedium; 57 | @dateFontWeight: @normal; 58 | @dateFontStyle: @normal; 59 | 60 | /* Summary */ 61 | @summaryMargin: 0em; 62 | @summaryFontSize: @relativeMedium; 63 | @summaryFontWeight: @bold; 64 | @summaryColor: @textColor; 65 | 66 | /* Summary Image */ 67 | @summaryImageWidth: auto; 68 | @summaryImageHeight: 10em; 69 | @summaryImageMargin: -0.25em 0.25em 0em 0em; 70 | @summaryImageVerticalAlign: middle; 71 | @summaryImageBorderRadius: 0.25em; 72 | 73 | /* Summary Date */ 74 | @summaryDateDisplay: inline-block; 75 | @summaryDateFloat: none; 76 | @summaryDateMargin: 0em 0em 0em 0.5em; 77 | @summaryDatePadding: 0em; 78 | @summaryDateFontSize: @relativeTiny; 79 | @summaryDateFontWeight: @dateFontWeight; 80 | @summaryDateFontStyle: @dateFontStyle; 81 | @summaryDateColor: @dateColor; 82 | 83 | /* User */ 84 | @userFontWeight: @bold; 85 | @userDistance: 0em; 86 | @userImageWidth: @summaryImageWidth; 87 | @userImageHeight: @summaryImageHeight; 88 | @userImageMargin: @summaryImageMargin; 89 | @userImageVerticalAlign: @summaryImageVerticalAlign; 90 | 91 | /* Extra Summary Data */ 92 | @extraMargin: 0.5em 0em 0em; 93 | @extraBackground: none; 94 | @extraPadding: 0em; 95 | @extraColor: @textColor; 96 | 97 | /* Extra Images */ 98 | @extraImageMargin: 0em 0.25em 0em 0em; 99 | @extraImageWidth: 6em; 100 | 101 | /* Extra Text */ 102 | @extraTextPadding: 0em; 103 | @extraTextPointer: none; 104 | @extraTextFontSize: @relativeMedium; 105 | @extraTextLineHeight: @lineHeight; 106 | @extraTextMaxWidth: 500px; 107 | 108 | /* Metadata Group */ 109 | @metadataDisplay: inline-block; 110 | @metadataFontSize: @relativeTiny; 111 | @metadataMargin: 0.5em 0em 0em; 112 | @metadataBackground: none; 113 | @metadataBorder: none; 114 | @metadataBorderRadius: 0; 115 | @metadataBoxShadow: none; 116 | @metadataPadding: 0em; 117 | @metadataColor: rgba(0, 0, 0, 0.6); 118 | 119 | @metadataElementSpacing: 0.75em; 120 | 121 | /* Like */ 122 | @likeColor: ''; 123 | @likeHoverColor: #FF2733; 124 | @likeActiveColor: #EF404A; 125 | @likeTransition: 0.2s color ease; 126 | 127 | /* Metadata Divider */ 128 | @metadataDivider: ''; 129 | @metadataDividerColor: rgba(0, 0, 0, 0.2); 130 | @metadataDividerOffset: -1em; 131 | 132 | @metadataActionCursor: pointer; 133 | @metadataActionOpacity: 1; 134 | @metadataActionColor: rgba(0, 0, 0, 0.5); 135 | @metadataActionTransition: color @defaultDuration @defaultEasing; 136 | 137 | @metadataActionHoverColor: @selectedTextColor; 138 | 139 | /*------------------- 140 | Variations 141 | --------------------*/ 142 | -------------------------------------------------------------------------------- /src/themes/default/views/item.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Item 3 | *******************************/ 4 | 5 | /*------------------- 6 | View 7 | --------------------*/ 8 | 9 | /* Group */ 10 | @groupMargin: 1.5em 0em; 11 | 12 | /* Item */ 13 | @display: flex; 14 | @background: transparent; 15 | @borderRadius: 0rem; 16 | @minHeight: 0px; 17 | @padding: 0em; 18 | @width: 100%; 19 | @boxShadow: none; 20 | @border: none; 21 | @zIndex: ''; 22 | @transition: box-shadow @defaultDuration @defaultEasing; 23 | 24 | /* Responsive */ 25 | @itemSpacing: 1em; 26 | @imageWidth: 175px; 27 | @contentImageDistance: 1.5em; 28 | 29 | @tabletItemSpacing: 1em; 30 | @tabletImageWidth: 150px; 31 | @tabletContentImageDistance: 1em; 32 | 33 | @mobileItemSpacing: 2em; 34 | @mobileImageWidth: auto; 35 | @mobileImageMaxHeight: 250px; 36 | @mobileContentImageDistance: 1.5em; 37 | 38 | 39 | /*------------------- 40 | Content 41 | --------------------*/ 42 | 43 | /* Image */ 44 | @imageDisplay: block; 45 | @imageFloat: none; 46 | @imageMaxHeight: ''; 47 | @imageVerticalAlign: top; 48 | @imageMargin: 0em; 49 | @imagePadding: 0em; 50 | @imageBorder: none; 51 | @imageBorderRadius: 0.125rem; 52 | @imageBoxShadow: none; 53 | @imageBorder: none; 54 | 55 | /* Content */ 56 | @contentDisplay: block; 57 | @contentVerticalAlign: top; 58 | 59 | @contentWidth: auto; 60 | @contentOffset: 0em; 61 | @contentBackground: none; 62 | @contentMargin: 0em; 63 | @contentPadding: 0em; 64 | @contentFontSize: 1em; 65 | @contentBorder: none; 66 | @contentBorderRadius: 0em; 67 | @contentBoxShadow: none; 68 | 69 | /* Header */ 70 | @headerMargin: -@lineHeightOffset 0em 0em; 71 | @headerFontWeight: @bold; 72 | @headerFontSize: @relativeBig; 73 | @headerColor: @darkTextColor; 74 | 75 | /* Metadata */ 76 | @metaMargin: 0.5em 0em 0.5em; 77 | @metaFontSize: 1em; 78 | @metaLineHeight: 1em; 79 | @metaSpacing: 0.3em; 80 | @metaColor: rgba(0, 0, 0, 0.6); 81 | 82 | /* Icons */ 83 | @actionOpacity: 0.75; 84 | @actionHoverOpacity: 1; 85 | @actionTransition: color @defaultDuration @defaultEasing; 86 | 87 | /* Actions */ 88 | @favoriteColor: #FFB70A; 89 | @favoriteActiveColor: #FFE623; 90 | @likeColor: #FF2733; 91 | @likeActiveColor: #FF2733; 92 | 93 | /* Links */ 94 | @headerLinkColor: @headerColor; 95 | @headerLinkHoverColor: @linkHoverColor; 96 | @metaLinkColor: @lightTextColor; 97 | @metaLinkHoverColor: @textColor; 98 | @contentLinkColor: ''; 99 | @contentLinkHoverColor: ''; 100 | @contentLinkTransition: color @defaultDuration @defaultEasing; 101 | 102 | 103 | /* Description */ 104 | @descriptionDistance: 0.6em; 105 | @descriptionMaxWidth: auto; 106 | @descriptionFontSize: 1em; 107 | @descriptionLineHeight: @lineHeight; 108 | @descriptionColor: @textColor; 109 | 110 | /* Content Image */ 111 | @contentImageWidth: ''; 112 | @contentImageVerticalAlign: middle; 113 | 114 | /* Avatar Image */ 115 | @avatarSize: @contentImageWidth; 116 | @avatarBorderRadius: @circularRadius; 117 | 118 | /* Paragraph */ 119 | @paragraphDistance: 0.5em; 120 | 121 | /* Additional Content */ 122 | @extraDivider: none; 123 | @extraHorizontalSpacing: 0.5rem; 124 | @extraRowSpacing: 0.5rem; 125 | 126 | @extraBackground: none; 127 | @extraDisplay: block; 128 | @extraPosition: relative; 129 | @extraMargin: (1rem - @extraRowSpacing) 0em 0em; 130 | @extraTop: 0em; 131 | @extraLeft: 0em; 132 | @extraWidth: 100%; 133 | @extraPadding: 0em 0em 0em; 134 | @extraBoxShadow: none; 135 | @extraColor: @lightTextColor; 136 | @extraTransition: color @defaultDuration @defaultEasing; 137 | 138 | /*------------------- 139 | Variations 140 | --------------------*/ 141 | 142 | /* Relaxed */ 143 | @relaxedItemSpacing: 1.5em; 144 | @veryRelaxedItemSpacing: 2em; 145 | 146 | /* Divided */ 147 | @dividedBorder: 1px solid @borderColor; 148 | @dividedMargin: 0em; 149 | @dividedPadding: 1em 0em; 150 | 151 | @dividedFirstLastMargin: 0em; 152 | @dividedFirstLastPadding: 0em; 153 | 154 | 155 | /* Unstackable */ 156 | @unstackableMobileImageWidth: 125px; 157 | 158 | -------------------------------------------------------------------------------- /src/site/globals/site.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Global Variables 3 | *******************************/ 4 | @fontPath : 'inkdrop://vibrant-dark-ui/styles/themes/default/assets/fonts'; 5 | @headerFont : -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 6 | @pageFont : -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 7 | @importGoogleFonts : false; 8 | @useCustomScrollbars: false; 9 | 10 | /*------------------- 11 | Side Bar 12 | --------------------*/ 13 | @sidebarBackground : @pageBackground; 14 | @sidebarMenuItemActiveBackground: #6987AF60; 15 | @sidebarMenuItemInactiveBackground: #6987AF30; 16 | @sidebarMenuSectionColor: @lightTextColor; 17 | @sidebarMenuSectionSeparatorColor: rgba(255,255,255,0.1); 18 | @sidebarMenuItemColor : @textColor; 19 | @sidebarMenuActionColor : @lightTextColor; 20 | @sidebarMenuActionHoverColor : @primaryColorFocus; 21 | @sidebarSyncStatusViewBorderTop: 1px solid rgba(255, 255, 255, 0.1); 22 | @sidebarSyncStatusViewBackground: transparent; 23 | @sidebarSyncStatusViewTextColor: @textColor; 24 | @sidebarSyncStatusViewDetailColor: @lightTextColor; 25 | @sidebarScrollbarWidth: 6px; 26 | @sidebarScrollbarTrackBackground: rgba(0,0,0,0.02); 27 | @sidebarScrollbarThumbBackground: rgba(255,255,255,0.1); 28 | 29 | /*------------------- 30 | Scroll Bar 31 | --------------------*/ 32 | @scrollbarWidth: 6px; 33 | @scrollbarTrackBackground: rgba(0,0,0,0.02); 34 | @scrollbarThumbBackground: rgba(255,255,255,0.1); 35 | 36 | /*------------------- 37 | Note List Bar 38 | --------------------*/ 39 | @noteListBarBackground: rgba(0, 0, 0, 0.4); 40 | @noteListBarPinnedSectionHeaderBackground: rgba(255, 255, 255, 0.05); 41 | @noteListBarPinnedSectionHeaderBorderBottom: 1px solid rgba(255, 255, 255, 0.1); 42 | @noteListBarPinnedSectionFooterBorderBottom: 4px solid rgba(255, 255, 255, 0.2); 43 | @noteListViewItemColor: @mutedTextColor; 44 | @noteListViewItemSeparatorBorder: 1px solid rgba(255, 255, 255, 0.1); 45 | @noteListViewItemDateColor: @primaryColor; 46 | @noteListViewItemTagColor: @primaryColor; 47 | @noteListViewItemInactiveBackground: #6987AF30; 48 | @noteListViewItemActiveBackground: #6987AF60; 49 | @noteListViewItemActiveColor: @textColor; 50 | @noteListViewItemActiveDateColor: @textColor; 51 | @noteListViewItemActiveTagColor: @textColor; 52 | @noteListViewItemFocusInnerShadow: none; 53 | @noteSearchBarBackground: transparent; 54 | @noteSearchBarBorderBottom: 1px solid @white; 55 | @noteSearchBarInputBorder: 1px solid transparent; 56 | @noteSearchBarInputBackground: rgba(255,255,255,0.05); 57 | 58 | /*------------------- 59 | Editor 60 | --------------------*/ 61 | @editorBackground: @pageBackground; 62 | 63 | /*------------------- 64 | Header Note Menu 65 | --------------------*/ 66 | @headerNoteMenuBackground: transparent; 67 | @headerNoteMenuColor: @lightTextColor; 68 | @headerNoteMenuActionItemActiveBackground: rgba(49, 204, 236, 0.3); 69 | @headerNoteMenuActionItemActiveBorder: 1px solid rgba(49, 204, 236, 0.8); 70 | @headerNoteMenuActionItemSeparatorBorder: 1px solid @whiteDown; 71 | @headerNoteMenuEncryptButtonColor: @yellowTextColor; 72 | @headerNoteMenuEncryptButtonBackground: @yellowBackground; 73 | 74 | /*------------------- 75 | Preferences 76 | --------------------*/ 77 | @preferencesSidebarBackground: @white; 78 | @preferencesSidebarItemActiveBackground: rgba(192, 109, 54, 0.2); 79 | @preferencesViewBackground: @offWhite; 80 | 81 | /*------------------- 82 | Task Icons 83 | --------------------*/ 84 | @taskIconActive: hsl(var(--hsl-slate-400)); 85 | @taskIconOnHold: hsl(var(--hsl-amber-500)); 86 | @taskIconCompleted: hsl(var(--hsl-emerald-500)); 87 | @taskIconDropped: hsl(var(--hsl-rose-400)); 88 | 89 | /*------------------- 90 | Task Progress View 91 | --------------------*/ 92 | @taskProgressViewBorderColor: hsl(var(--hsl-gray-50) / 10%); 93 | @taskProgressViewBackgroundColor: hsl(var(--hsl-gray-950) / 30%); 94 | @taskProgressViewForegroundColor: hsl(var(--hsl-gray-50) / 60%); 95 | @taskProgressViewCompletedColor: hsl(var(--hsl-green-500)); 96 | -------------------------------------------------------------------------------- /src/themes/default/modules/popup.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Popup 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @zIndex: 1900; 10 | @background: @white; 11 | 12 | @maxWidth: 250px; 13 | @borderColor: @solidBorderColor; 14 | @borderWidth: 1px; 15 | @boxShadow: @floatingShadow; 16 | @color: @textColor; 17 | 18 | @verticalPadding: 0.833em; 19 | @horizontalPadding: 1em; 20 | @fontWeight: @normal; 21 | @fontStyle: @normal; 22 | @borderRadius: @defaultBorderRadius; 23 | 24 | /*------------------- 25 | Parts 26 | --------------------*/ 27 | 28 | /* Placement */ 29 | @arrowSize: @relative10px; 30 | @arrowWidth: 1em; 31 | @arrowDistanceFromEdge: 1em; 32 | @boxArrowOffset: 0em; 33 | @popupDistanceAway: @arrowSize; 34 | 35 | 36 | /* Header */ 37 | @headerFontFamily: @headerFont; 38 | @headerFontWeight: @bold; 39 | @headerFontSize: @relativeLarge; 40 | @headerDistance: @relative7px; 41 | @headerLineHeight: 1.2; 42 | 43 | /* Content Border */ 44 | @border: @borderWidth solid @borderColor; 45 | 46 | /* Arrow */ 47 | @arrowBackground: @background; 48 | @arrowZIndex: 2; 49 | @arrowJitter: 0.05em; 50 | @arrowOffset: -(@arrowSize / 2) + @arrowJitter; 51 | 52 | @arrowStroke: @borderWidth; 53 | @arrowColor: darken(@borderColor, 10); 54 | 55 | /* Arrow color by position */ 56 | @arrowTopBackground: @arrowBackground; 57 | @arrowCenterBackground: @arrowBackground; 58 | @arrowBottomBackground: @arrowBackground; 59 | 60 | @arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor; 61 | @leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor; 62 | @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor; 63 | @bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor; 64 | 65 | /*------------------- 66 | Types 67 | --------------------*/ 68 | 69 | /* Tooltip */ 70 | @tooltipBackground: @background; 71 | @tooltipBorderRadius: @borderRadius; 72 | @tooltipPadding: @verticalPadding @horizontalPadding; 73 | @tooltipFontWeight: @fontWeight; 74 | @tooltipFontStyle: @fontStyle; 75 | @tooltipColor: @color; 76 | @tooltipBorder: @border; 77 | @tooltipBoxShadow: @boxShadow; 78 | @tooltipMaxWidth: none; 79 | @tooltipFontSize: @medium; 80 | @tooltipLineHeight: @lineHeight; 81 | @tooltipDistanceAway: @relative7px; 82 | @tooltipZIndex: 1; 83 | @tooltipDuration: @defaultDuration; 84 | @tooltipEasing: @defaultEasing; 85 | 86 | /* Inverted */ 87 | @tooltipInvertedBackground: @invertedBackground; 88 | @tooltipInvertedColor: @invertedColor; 89 | @tooltipInvertedBorder: @invertedBorder; 90 | @tooltipInvertedBoxShadow: @invertedBoxShadow; 91 | @tooltipInvertedHeaderBackground: @invertedHeaderBackground; 92 | @tooltipInvertedHeaderColor: @invertedHeaderColor; 93 | 94 | /* Arrow */ 95 | @tooltipArrowVerticalOffset: -@2px; 96 | @tooltipArrowHorizontalOffset: -@1px; 97 | @tooltipArrowBoxShadow: @arrowBoxShadow; 98 | @tooltipArrowBackground: @arrowBackground; 99 | @tooltipArrowTopBackground: @arrowTopBackground; 100 | @tooltipArrowCenterBackground: @arrowCenterBackground; 101 | @tooltipArrowBottomBackground: @arrowBottomBackground; 102 | 103 | /*------------------- 104 | Coupling 105 | --------------------*/ 106 | 107 | /* Grid Inside Popup */ 108 | @nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */ 109 | @nestedGridWidth: ~"calc(100% + 1.75rem)"; 110 | 111 | /*------------------- 112 | States 113 | --------------------*/ 114 | 115 | @loadingZIndex: -1; 116 | 117 | /*------------------- 118 | Variations 119 | --------------------*/ 120 | 121 | /* Wide */ 122 | @wideWidth: 350px; 123 | @veryWideWidth: 550px; 124 | 125 | /* Inverted */ 126 | @invertedBackground: @black; 127 | @invertedColor: @white; 128 | @invertedBorder: none; 129 | @invertedBoxShadow: none; 130 | 131 | @invertedHeaderBackground: none; 132 | @invertedHeaderColor: @white; 133 | @invertedArrowColor: @invertedBackground; 134 | 135 | /* Arrow color by position */ 136 | @invertedArrowTopBackground: @invertedBackground; 137 | @invertedArrowCenterBackground: @invertedBackground; 138 | @invertedArrowBottomBackground: @invertedBackground; 139 | -------------------------------------------------------------------------------- /src/themes/default/collections/message.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Message 3 | *******************************/ 4 | 5 | // @textColor 6 | 7 | /*------------------- 8 | Elements 9 | --------------------*/ 10 | 11 | @verticalMargin: 1em; 12 | @verticalPadding: 1em; 13 | @horizontalPadding: 1.5em; 14 | @padding: @verticalPadding @horizontalPadding; 15 | @background: @darkWhite; 16 | @lineHeightOffset: ((@lineHeight - 1em) / 2); 17 | 18 | @borderRadius: @defaultBorderRadius; 19 | @borderWidth: 1px; 20 | @borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset; 21 | @shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); 22 | @boxShadow: 23 | @borderShadow, 24 | @shadowShadow 25 | ; 26 | 27 | @transition: 28 | opacity @defaultDuration @defaultEasing, 29 | color @defaultDuration @defaultEasing, 30 | background @defaultDuration @defaultEasing, 31 | box-shadow @defaultDuration @defaultEasing 32 | ; 33 | 34 | /* Header */ 35 | @headerFontSize: @relativeLarge; 36 | @headerFontWeight: @bold; 37 | @headerDisplay: block; 38 | @headerDistance: 0rem; 39 | @headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em; 40 | @headerParagraphDistance: 0.25em; 41 | 42 | /* Paragraph */ 43 | @messageTextOpacity: 0.85; 44 | @messageParagraphMargin: 0.75em; 45 | 46 | /* List */ 47 | @listOpacity: 0.85; 48 | @listStylePosition: inside; 49 | @listMargin: 0.5em; 50 | @listItemIndent: 1em; 51 | @listItemMargin: 0.3em; 52 | 53 | /* Icon */ 54 | @iconDistance: 0.6em; 55 | 56 | /* Close Icon */ 57 | @closeTopDistance: @verticalPadding - @lineHeightOffset; 58 | @closeRightDistance: 0.5em; 59 | @closeOpacity: 0.7; 60 | @closeTransition: opacity @defaultDuration @defaultEasing; 61 | 62 | 63 | /*------------------- 64 | Types 65 | --------------------*/ 66 | 67 | /* Icon Message */ 68 | @iconSize: 3em; 69 | @iconOpacity: 0.8; 70 | @iconContentDistance: 0rem; 71 | @iconVerticalAlign: middle; 72 | 73 | /* Attached */ 74 | @attachedXOffset: -1px; 75 | @attachedYOffset: -1px; 76 | @attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset; 77 | @attachedBottomBoxShadow: 78 | @attachedBoxShadow, 79 | @subtleShadow 80 | ; 81 | 82 | /* Floating */ 83 | @floatingBoxShadow: 84 | @borderShadow, 85 | @floatingShadow 86 | ; 87 | 88 | /* Colors */ 89 | @redBoxShadow: 90 | 0px 0px 0px @borderWidth @redBorderColor inset, 91 | @shadowShadow 92 | ; 93 | @orangeBoxShadow: 94 | 0px 0px 0px @borderWidth @orangeBorderColor inset, 95 | @shadowShadow 96 | ; 97 | @yellowBoxShadow: 98 | 0px 0px 0px @borderWidth @yellowBorderColor inset, 99 | @shadowShadow 100 | ; 101 | @oliveBoxShadow: 102 | 0px 0px 0px @borderWidth @oliveBorderColor inset, 103 | @shadowShadow 104 | ; 105 | @greenBoxShadow: 106 | 0px 0px 0px @borderWidth @greenBorderColor inset, 107 | @shadowShadow 108 | ; 109 | @tealBoxShadow: 110 | 0px 0px 0px @borderWidth @tealBorderColor inset, 111 | @shadowShadow 112 | ; 113 | @blueBoxShadow: 114 | 0px 0px 0px @borderWidth @blueBorderColor inset, 115 | @shadowShadow 116 | ; 117 | @violetBoxShadow: 118 | 0px 0px 0px @borderWidth @violetBorderColor inset, 119 | @shadowShadow 120 | ; 121 | @purpleBoxShadow: 122 | 0px 0px 0px @borderWidth @purpleBorderColor inset, 123 | @shadowShadow 124 | ; 125 | @pinkBoxShadow: 126 | 0px 0px 0px @borderWidth @pinkBorderColor inset, 127 | @shadowShadow 128 | ; 129 | @brownBoxShadow: 130 | 0px 0px 0px @borderWidth @brownBorderColor inset, 131 | @shadowShadow 132 | ; 133 | 134 | /* Warning / Positive / Negative / Info */ 135 | @positiveBoxShadow: 136 | 0px 0px 0px @borderWidth @positiveBorderColor inset, 137 | @shadowShadow 138 | ; 139 | @negativeBoxShadow: 140 | 0px 0px 0px @borderWidth @negativeBorderColor inset, 141 | @shadowShadow 142 | ; 143 | @infoBoxShadow: 144 | 0px 0px 0px @borderWidth @infoBorderColor inset, 145 | @shadowShadow 146 | ; 147 | @warningBoxShadow: 148 | 0px 0px 0px @borderWidth @warningBorderColor inset, 149 | @shadowShadow 150 | ; 151 | @errorBoxShadow: 152 | 0px 0px 0px @borderWidth @errorBorderColor inset, 153 | @shadowShadow 154 | ; 155 | @successBoxShadow: 156 | 0px 0px 0px @borderWidth @successBorderColor inset, 157 | @shadowShadow 158 | ; 159 | -------------------------------------------------------------------------------- /src/themes/default/elements/segment.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Segment 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @background: rgba(0, 0, 0, 0.2); 10 | @borderWidth: 1px; 11 | @border: @borderWidth solid @borderColor; 12 | 13 | @boxShadow: @subtleShadow; 14 | @verticalPadding: 1em; 15 | @horizontalPadding: 1em; 16 | @padding: @verticalPadding @horizontalPadding; 17 | 18 | @verticalMargin: 1rem; 19 | @horizontalMargin: 0em; 20 | @margin: @verticalMargin @horizontalMargin; 21 | @borderRadius: @defaultBorderRadius; 22 | 23 | /*------------------- 24 | Group 25 | --------------------*/ 26 | 27 | @groupedMargin: @margin; 28 | @groupedBorder: @border; 29 | @groupedBoxShadow: @boxShadow; 30 | @groupedBorderRadius: @borderRadius; 31 | 32 | @nestedGroupMargin: @verticalMargin @verticalMargin; 33 | 34 | @groupedSegmentBorder: none; 35 | @groupedSegmentDivider: @border; 36 | @groupedSegmentMargin: 0em; 37 | @groupedSegmentWidth: auto; 38 | @groupedSegmentBoxShadow: none; 39 | 40 | /*------------------- 41 | Coupling 42 | --------------------*/ 43 | 44 | /* Page Grid Segment */ 45 | @pageGridMargin: (2 * @verticalPadding); 46 | 47 | /******************************* 48 | Types 49 | *******************************/ 50 | 51 | /* Placeholder */ 52 | @placeholderBackground: @offWhite; 53 | @placeholderPadding: @padding; 54 | @placeholderBorderColor: @borderColor; 55 | @placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; 56 | @placeholderMinHeight: 18rem; 57 | @placeholderContentMaxWidth: 15rem; 58 | @placeholderContentInlineButtonMargin: 0px @5px 0px 0px; 59 | 60 | 61 | /* Piled */ 62 | @piledZIndex: auto; 63 | @piledMargin: 3em; 64 | @piledBoxShadow: ''; 65 | @piledDegrees: 1.2deg; 66 | @piledBorder: @border; 67 | 68 | /* Circular */ 69 | @circularPadding: 2em; 70 | 71 | /* Stacked */ 72 | @stackedHeight: 6px; 73 | @stackedPageBackground: rgba(0, 0, 0, 0.1); 74 | @stackedPadding: @verticalPadding + (0.4em); 75 | @tallStackedPadding: @verticalPadding + (0.8em); 76 | 77 | /******************************* 78 | States 79 | *******************************/ 80 | 81 | /* Loading Dimmer */ 82 | @loaderDimmerColor: rgba(255, 255, 255, 0.8); 83 | @loaderDimmerZIndex: 100; 84 | 85 | /* Loading Spinner */ 86 | @loaderSize: 3em; 87 | @loaderLineZIndex: 101; 88 | 89 | 90 | /******************************* 91 | Variations 92 | *******************************/ 93 | 94 | 95 | /* Raised */ 96 | @raisedBoxShadow: @floatingShadow; 97 | 98 | /* Padded */ 99 | @paddedSegmentPadding: 1.5em; 100 | @veryPaddedSegmentPadding: 3em; 101 | 102 | /* Attached */ 103 | @attachedTopOffset: 0px; 104 | @attachedBottomOffset: 0px; 105 | @attachedHorizontalOffset: -@borderWidth; 106 | @attachedWidth: calc(100% - (@attachedHorizontalOffset * 2)); 107 | @attachedBoxShadow: none; 108 | @attachedBorder: @borderWidth solid @solidBorderColor; 109 | @attachedBottomBoxShadow: 110 | @boxShadow, 111 | @attachedBoxShadow 112 | ; 113 | 114 | /* Inverted */ 115 | @invertedBackground: @black; 116 | 117 | /* Floated */ 118 | @floatedDistance: 1em; 119 | 120 | /* Basic */ 121 | @basicBackground: none transparent; 122 | @basicBorder: none; 123 | @basicBoxShadow: none; 124 | @basicBorderRadius: 0px; 125 | 126 | /* Colors */ 127 | @coloredBorderSize: 2px; 128 | 129 | /* Ordinality */ 130 | @secondaryBackground: @darkWhite; 131 | @secondaryColor: @mutedTextColor; 132 | 133 | @tertiaryBackground: @midWhite; 134 | @tertiaryColor: @mutedTextColor; 135 | 136 | @secondaryInvertedLightness: 0.2; 137 | @secondaryInvertedBackground: 138 | lighten(@black, (@secondaryInvertedLightness * 100)) 139 | linear-gradient( 140 | rgba(255, 255, 255, @secondaryInvertedLightness) 0%, 141 | rgba(255, 255, 255, @secondaryInvertedLightness) 100% 142 | ) 143 | ; 144 | @secondaryInvertedColor: @invertedMutedTextColor; 145 | 146 | @tertiaryInvertedLightness: 0.35; 147 | @tertiaryInvertedBackground: 148 | lighten(@black, (@tertiaryInvertedLightness * 100)) 149 | linear-gradient( 150 | rgba(255, 255, 255, @tertiaryInvertedLightness) 0%, 151 | rgba(255, 255, 255, @tertiaryInvertedLightness) 100% 152 | ) 153 | ; 154 | @tertiaryInvertedColor: @invertedMutedTextColor; 155 | -------------------------------------------------------------------------------- /src/themes/default/elements/header.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Header 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @textTransform: none; 10 | @fontFamily: @headerFont; 11 | @fontWeight: @headerFontWeight; 12 | @lineHeight: @headerLineHeight; 13 | @lineHeightOffset: @headerLineHeightOffset; 14 | 15 | @topMargin: @headerTopMargin; 16 | @bottomMargin: @headerBottomMargin; 17 | @margin: @topMargin 0em @bottomMargin; 18 | 19 | @firstMargin: -@lineHeightOffset; 20 | @lastMargin: 0em; 21 | @horizontalPadding: 0em; 22 | @verticalPadding: 0em; 23 | 24 | /* Sub Heading */ 25 | @subHeadingDistance: @2px; 26 | @subHeadingFontSize: @relativeTiny; 27 | @subHeadingFontWeight: @bold; 28 | @subHeadingTextTransform: uppercase; 29 | @subHeadingColor: ''; 30 | 31 | @smallSubHeadingSize: @relativeMini; 32 | @largeSubHeadingSize: @relativeSmall; 33 | @hugeSubHeadingSize: @relativeMedium; 34 | 35 | /* Sub Header */ 36 | @subHeaderMargin: 0em; 37 | @subHeaderLineHeight: 1.2em; 38 | @subHeaderColor: @mutedTextColor; 39 | 40 | /* Icon */ 41 | @iconOpacity: 1; 42 | @iconSize: 1.5em; 43 | @iconOffset: 0em; 44 | @iconMargin: 0.75rem; 45 | @iconAlignment: middle; 46 | 47 | /* Image */ 48 | @imageWidth: 2.5em; 49 | @imageHeight: auto; 50 | @imageOffset: @lineHeightOffset; 51 | @imageMargin: @iconMargin; 52 | @imageAlignment: middle; 53 | 54 | /* Label */ 55 | @labelSize: ''; 56 | @labelDistance: 0.5rem; 57 | @labelVerticalAlign: middle; 58 | 59 | /* Content */ 60 | @contentAlignment: top; 61 | @contentIconAlignment: middle; 62 | @contentImageAlignment: middle; 63 | 64 | /* Paragraph after Header */ 65 | @nextParagraphDistance: 0em; 66 | 67 | /*------------------- 68 | Variations 69 | --------------------*/ 70 | 71 | /* Sizing */ 72 | @hugeFontSize : unit(@h1, em); 73 | @largeFontSize : unit(@h2, em); 74 | @mediumFontSize : unit(@h3, em); 75 | @smallFontSize : unit(@h4, em); 76 | @tinyFontSize : unit(@h5, em); 77 | 78 | /* Sub Header */ 79 | @h1SubHeaderFontSize: @large; 80 | @h2SubHeaderFontSize: @large; 81 | @h3SubHeaderFontSize: @medium; 82 | @h4SubHeaderFontSize: @medium; 83 | @h5SubHeaderFontSize: @small; 84 | 85 | @hugeSubHeaderFontSize : @h1SubHeaderFontSize; 86 | @largeSubHeaderFontSize : @h2SubHeaderFontSize; 87 | @subHeaderFontSize : @h3SubHeaderFontSize; 88 | @smallSubHeaderFontSize : @h4SubHeaderFontSize; 89 | @tinySubHeaderFontSize : @h5SubHeaderFontSize; 90 | 91 | /* Icon Header */ 92 | @iconHeaderSize: 3em; 93 | @iconHeaderOpacity: 1; 94 | @iconHeaderMargin: 0.5rem; 95 | @circularHeaderIconSize: 2em; 96 | @squareHeaderIconSize: 2em; 97 | 98 | /* No Line Height Offset */ 99 | @iconHeaderTopMargin: 2rem; 100 | @iconHeaderBottomMargin: @bottomMargin; 101 | @iconHeaderFirstMargin: 0em; 102 | 103 | /* Divided */ 104 | @dividedBorderWidth: 1px; 105 | @dividedBorder: @dividedBorderWidth solid @borderColor; 106 | @dividedColoredBorderWidth: 2px; 107 | 108 | @dividedBorderPadding: @3px; 109 | @dividedSubHeaderPadding: @3px; 110 | @dividedIconPadding: 0em; 111 | 112 | /* Block */ 113 | @blockBackground: @darkWhite; 114 | @blockBoxShadow: none; 115 | @blockBorderWidth: 1px; 116 | @blockBorder: @blockBorderWidth solid @solidBorderColor; 117 | @blockHorizontalPadding: @medium; 118 | @blockVerticalPadding: @mini; 119 | @blockBorderRadius: @defaultBorderRadius; 120 | 121 | @tinyBlock: @tiny; 122 | @smallBlock: @small; 123 | @mediumBlock: @medium; 124 | @largeBlock: @large; 125 | @hugeBlock: @huge; 126 | 127 | /* Attached */ 128 | @attachedOffset: -1px; 129 | @attachedBoxShadow: none; 130 | @attachedBorder: 1px solid @solidBorderColor; 131 | @attachedVerticalPadding: @blockVerticalPadding; 132 | @attachedHorizontalPadding: @blockHorizontalPadding; 133 | @attachedBackground: @white; 134 | @attachedBorderRadius: @blockBorderRadius; 135 | 136 | @tinyAttachedSize: @relativeTiny; 137 | @smallAttachedSize: @relativeSmall; 138 | @mediumAttachedSize: @relativeMedium; 139 | @largeAttachedSize: @relativeLarge; 140 | @bigAttachedSize: @relativeBig; 141 | @hugeAttachedSize: @relativeHuge; 142 | 143 | /* Inverted */ 144 | @invertedColor: @white; 145 | @invertedSubHeaderColor: @invertedMutedTextColor; 146 | @invertedDividedBorderColor: @whiteBorderColor; 147 | @invertedBlockBackground: @lightBlack @subtleGradient; 148 | @invertedAttachedBackground: @invertedBlockBackground; 149 | 150 | /* Floated */ 151 | @floatedMargin: 0.5em; 152 | --------------------------------------------------------------------------------