├── .babelrc ├── .eslintrc ├── .gitignore ├── README.md ├── config.js ├── font-awesome ├── HELP-US-OUT.txt ├── css │ ├── font-awesome.css │ └── font-awesome.min.css ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── less │ ├── animated.less │ ├── bordered-pulled.less │ ├── core.less │ ├── fixed-width.less │ ├── font-awesome.less │ ├── icons.less │ ├── larger.less │ ├── list.less │ ├── mixins.less │ ├── path.less │ ├── rotated-flipped.less │ ├── screen-reader.less │ ├── stacked.less │ └── variables.less └── scss │ ├── _animated.scss │ ├── _bordered-pulled.scss │ ├── _core.scss │ ├── _fixed-width.scss │ ├── _icons.scss │ ├── _larger.scss │ ├── _list.scss │ ├── _mixins.scss │ ├── _path.scss │ ├── _rotated-flipped.scss │ ├── _screen-reader.scss │ ├── _stacked.scss │ ├── _variables.scss │ └── font-awesome.scss ├── images ├── default-picture.png ├── hanyelemary.jpg └── tw-logo.png ├── package.json ├── semantic.json ├── semantic └── src │ ├── semantic.less │ ├── theme.config │ ├── theme.less │ └── themes │ ├── amazon │ ├── elements │ │ ├── button.overrides │ │ └── button.variables │ └── globals │ │ └── site.variables │ ├── basic │ ├── assets │ │ └── fonts │ │ │ ├── icons.eot │ │ │ ├── icons.svg │ │ │ ├── icons.ttf │ │ │ └── icons.woff │ ├── collections │ │ ├── table.overrides │ │ └── table.variables │ ├── elements │ │ ├── button.overrides │ │ ├── button.variables │ │ ├── icon.overrides │ │ ├── icon.variables │ │ ├── step.overrides │ │ └── step.variables │ ├── globals │ │ ├── reset.overrides │ │ └── reset.variables │ ├── modules │ │ ├── progress.overrides │ │ └── progress.variables │ └── views │ │ ├── card.overrides │ │ └── card.variables │ ├── bookish │ └── elements │ │ ├── header.overrides │ │ └── header.variables │ ├── bootstrap3 │ └── elements │ │ ├── button.overrides │ │ └── button.variables │ ├── chubby │ ├── collections │ │ ├── form.overrides │ │ ├── form.variables │ │ ├── menu.overrides │ │ └── menu.variables │ ├── elements │ │ ├── button.overrides │ │ ├── button.variables │ │ ├── header.overrides │ │ └── header.variables │ ├── modules │ │ ├── accordion.overrides │ │ └── accordion.variables │ └── views │ │ ├── comment.overrides │ │ └── comment.variables │ ├── classic │ ├── collections │ │ ├── table.overrides │ │ └── table.variables │ ├── elements │ │ ├── button.overrides │ │ ├── button.variables │ │ ├── header.overrides │ │ └── header.variables │ ├── modules │ │ ├── progress.overrides │ │ └── progress.variables │ └── views │ │ ├── card.overrides │ │ └── card.variables │ ├── colored │ └── modules │ │ ├── checkbox.overrides │ │ └── checkbox.variables │ ├── default │ ├── assets │ │ ├── fonts │ │ │ ├── icons.eot │ │ │ ├── icons.svg │ │ │ ├── icons.ttf │ │ │ ├── icons.woff │ │ │ └── icons.woff2 │ │ └── images │ │ │ └── flags.png │ ├── collections │ │ ├── breadcrumb.overrides │ │ ├── breadcrumb.variables │ │ ├── form.overrides │ │ ├── form.variables │ │ ├── grid.overrides │ │ ├── grid.variables │ │ ├── menu.overrides │ │ ├── menu.variables │ │ ├── message.overrides │ │ ├── message.variables │ │ ├── table.overrides │ │ └── table.variables │ ├── elements │ │ ├── button.overrides │ │ ├── button.variables │ │ ├── container.overrides │ │ ├── container.variables │ │ ├── divider.overrides │ │ ├── divider.variables │ │ ├── flag.overrides │ │ ├── flag.variables │ │ ├── header.overrides │ │ ├── header.variables │ │ ├── icon.overrides │ │ ├── icon.variables │ │ ├── image.overrides │ │ ├── image.variables │ │ ├── input.overrides │ │ ├── input.variables │ │ ├── label.overrides │ │ ├── label.variables │ │ ├── list.overrides │ │ ├── list.variables │ │ ├── loader.overrides │ │ ├── loader.variables │ │ ├── rail.overrides │ │ ├── rail.variables │ │ ├── reveal.overrides │ │ ├── reveal.variables │ │ ├── segment.overrides │ │ ├── segment.variables │ │ ├── step.overrides │ │ └── step.variables │ ├── globals │ │ ├── reset.overrides │ │ ├── reset.variables │ │ ├── site.overrides │ │ └── site.variables │ ├── modules │ │ ├── accordion.overrides │ │ ├── accordion.variables │ │ ├── chatroom.overrides │ │ ├── chatroom.variables │ │ ├── checkbox.overrides │ │ ├── checkbox.variables │ │ ├── dimmer.overrides │ │ ├── dimmer.variables │ │ ├── dropdown.overrides │ │ ├── dropdown.variables │ │ ├── embed.overrides │ │ ├── embed.variables │ │ ├── modal.overrides │ │ ├── modal.variables │ │ ├── nag.overrides │ │ ├── nag.variables │ │ ├── popup.overrides │ │ ├── popup.variables │ │ ├── progress.overrides │ │ ├── progress.variables │ │ ├── rating.overrides │ │ ├── rating.variables │ │ ├── search.overrides │ │ ├── search.variables │ │ ├── shape.overrides │ │ ├── shape.variables │ │ ├── sidebar.overrides │ │ ├── sidebar.variables │ │ ├── sticky.overrides │ │ ├── sticky.variables │ │ ├── tab.overrides │ │ ├── tab.variables │ │ ├── transition.overrides │ │ └── transition.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 │ ├── duo │ └── elements │ │ ├── loader.overrides │ │ └── loader.variables │ ├── fixed-width │ ├── collections │ │ ├── grid.overrides │ │ └── grid.variables │ └── modules │ │ ├── modal.overrides │ │ └── modal.variables │ ├── flat │ ├── collections │ │ ├── form.overrides │ │ └── form.variables │ └── globals │ │ ├── site.overrides │ │ └── site.variables │ ├── github │ ├── assets │ │ └── fonts │ │ │ ├── octicons-local.ttf │ │ │ ├── octicons.svg │ │ │ ├── octicons.ttf │ │ │ └── octicons.woff │ ├── collections │ │ ├── breadcrumb.variables │ │ ├── form.overrides │ │ ├── form.variables │ │ ├── grid.variables │ │ ├── menu.overrides │ │ ├── menu.variables │ │ ├── message.overrides │ │ ├── message.variables │ │ └── table.variables │ ├── elements │ │ ├── button.overrides │ │ ├── button.variables │ │ ├── header.variables │ │ ├── icon.overrides │ │ ├── icon.variables │ │ ├── image.variables │ │ ├── input.overrides │ │ ├── input.variables │ │ ├── label.overrides │ │ ├── label.variables │ │ ├── segment.overrides │ │ ├── segment.variables │ │ ├── step.overrides │ │ └── step.variables │ ├── globals │ │ └── site.variables │ └── modules │ │ ├── dropdown.overrides │ │ ├── dropdown.variables │ │ └── popup.variables │ ├── gmail │ └── collections │ │ ├── message.overrides │ │ └── message.variables │ ├── instagram │ └── views │ │ ├── card.overrides │ │ └── card.variables │ ├── material │ ├── collections │ │ ├── menu.overrides │ │ └── menu.variables │ ├── elements │ │ ├── button.overrides │ │ ├── button.variables │ │ ├── header.overrides │ │ └── header.variables │ ├── globals │ │ ├── site.overrides │ │ └── site.variables │ └── modules │ │ ├── dropdown.overrides │ │ ├── dropdown.variables │ │ ├── modal.overrides │ │ └── modal.variables │ ├── pulsar │ └── elements │ │ ├── loader.overrides │ │ └── loader.variables │ ├── raised │ └── elements │ │ ├── button.overrides │ │ └── button.variables │ ├── resetcss │ └── globals │ │ ├── reset.overrides │ │ └── reset.variables │ ├── round │ └── elements │ │ ├── button.overrides │ │ └── button.variables │ ├── rtl │ └── globals │ │ ├── site.overrides │ │ └── site.variables │ ├── striped │ └── modules │ │ ├── progress.overrides │ │ └── progress.variables │ ├── timeline │ └── views │ │ ├── feed.overrides │ │ └── feed.variables │ └── twitter │ └── elements │ ├── button.overrides │ └── button.variables ├── src ├── App.jsx ├── App.less ├── api │ ├── search-route.js │ ├── search-service.js │ └── search.js ├── client.js ├── config.js ├── header │ ├── actions │ │ └── search-actions.js │ ├── components │ │ ├── AutocompleteResult.jsx │ │ ├── AutocompleteResultsFooter.jsx │ │ ├── AutocompleteResultsList.jsx │ │ ├── Banner.jsx │ │ ├── Button.jsx │ │ ├── Navigation.jsx │ │ ├── PageHeader.jsx │ │ ├── SearchBar.jsx │ │ └── SearchBarContainer.jsx │ ├── css │ │ ├── PageHeader.less │ │ └── Search.less │ ├── reducers │ │ ├── autocomplete-reducer.js │ │ └── page-header-reducer.js │ ├── sagas │ │ └── autocomplete-saga.js │ └── tests │ │ ├── Button_spec.js │ │ └── SearchBar_spec.js ├── main.less ├── mocks │ ├── autosuggest │ │ ├── autosuggest.ejs │ │ ├── data.js │ │ └── response.js │ ├── imposters.ejs │ └── profiles │ │ ├── hanyelemary.ejs │ │ └── response.js ├── pages │ └── search-results-page │ │ ├── components │ │ ├── NoSearchResults.jsx │ │ ├── SearchResult.jsx │ │ ├── SearchResults.jsx │ │ ├── SearchResultsPage.jsx │ │ ├── SearchResultsPageContainer.jsx │ │ └── Spinner.jsx │ │ ├── css │ │ └── SearchResults.less │ │ ├── reducers │ │ └── search-results-reducer.js │ │ ├── sagas │ │ └── search-results-saga.js │ │ └── tests │ │ └── SearchResultsPage_spec.js ├── reducers.js ├── routes.js ├── sagas.js ├── server.js └── store.js ├── test ├── mocha.opts └── utils │ └── dom.js └── webpack ├── dev ├── webpack.config.js └── webpack.server.config.js └── prod ├── webpack.config.js └── webpack.server.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | /*these are dependencies that allow us to write React and es6*/ 2 | { 3 | "presets" : ["es2015", "react", "stage-0"], 4 | "plugins": [ 5 | "transform-object-rest-spread", 6 | "transform-flow-strip-types", 7 | "transform-async-to-generator" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | # specifies global predefined variables 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "es6": true, 8 | "mocha": true, 9 | "jquery": true 10 | }, 11 | # extends the .eslintrc file from airbnb 12 | "extends": "eslint-config-airbnb", 13 | # in the rules section you overide the settings from the parent configuration 14 | # for more info on rule configuration: http://eslint.org/docs/user-guide/configuring#configuring-rules 15 | # list of eslint rules http://eslint.org/docs/rules/ 16 | "rules": { 17 | "comma-dangle": ["error", "never"], 18 | "max-len": ["error", 120], 19 | "react/prefer-stateless-function": "off", 20 | "react/jsx-filename-extension": "off", 21 | "no-underscore-dangle": "off", 22 | "no-console": ["error", { "allow": ["warn", "error"] }], 23 | "new-cap": ["error", { "capIsNewExceptions": ["Map", "Set", "List", "Seq", "Router"] }], 24 | "complexity": ["error", { "max": 4 }], 25 | "max-statements": ["error", {"max": 8}], 26 | "max-params": ["error", 3], 27 | "arrow-body-style": 0, 28 | "no-magic-numbers": "off", 29 | "no-unused-vars": "error" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | npm-debug.log 5 | semantic/dist 6 | semantic/src/definitions 7 | semantic/src/site 8 | semantic/tasks 9 | semantic/gulpfile.js 10 | server.bundle.js 11 | mochawesome-reports 12 | coverage 13 | .env 14 | .npmrc 15 | .vscode/ 16 | *.log* 17 | *.pid -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [tdd-react-redux-isomorphic](http://www.informit.com/store/test-driven-development-for-react-redux-in-an-isomorphic-9780134698403?platform=hootsuite) 2 | Sample Redux Isomorphic App. 3 | 4 | A step-by-step video tutorial on building this application is available on [Informit](http://www.informit.com/store/test-driven-development-for-react-redux-in-an-isomorphic-9780134698403?platform=hootsuite). 5 | 6 | ## Tech stack 7 | * NodeJS 8 | * Gulp 9 | * [SemanticUI](https://semantic-ui.com/introduction/getting-started.html) is used as the UI library 10 | * Express 11 | * React / Redux 12 | * Redux Sagas - for asyncronous operations 13 | * Mountebank - for our fake service (over the wire) 14 | 15 | ## Project setup 16 | Since SemanticUI uses gulp to build themed versions of the library, you must install gulp globally as a pre-requisite: 17 | ``` 18 | npm install -g gulp 19 | ``` 20 | 21 | Now you need to fetch all the required dependencies in the package.json file by running this command within the project directory: 22 | ```npm install``` 23 | 24 | In a different shell, run this command to start up the service: ```npm run mountebank``` 25 | 26 | ## Building SemanticUI 27 | Run this command to build semantic's assets (JavaScript and CSS): 28 | ```npm run build:semantic``` 29 | 30 | ## Running the project 31 | Run this command to start up the app while watching for changes: 32 | ```npm run dev``` 33 | 34 | Now you can go to [http://localhost:8080/](http://localhost:8080/) 35 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | const DEFAULT_PORT = 8080; 2 | 3 | module.exports = { 4 | port: process.env.PORT || DEFAULT_PORT, 5 | searchServiceUrl: process.env.searchUrl || 'http://localhost:8081/' 6 | }; 7 | -------------------------------------------------------------------------------- /font-awesome/HELP-US-OUT.txt: -------------------------------------------------------------------------------- 1 | I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project, 2 | Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome, 3 | comprehensive icon sets or copy and paste your own. 4 | 5 | Please. Check it out. 6 | 7 | -Dave Gandy 8 | -------------------------------------------------------------------------------- /font-awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/font-awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /font-awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/font-awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /font-awesome/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/font-awesome/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /font-awesome/less/animated.less: -------------------------------------------------------------------------------- 1 | // Animated Icons 2 | // -------------------------- 3 | 4 | .@{fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .@{fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /font-awesome/less/bordered-pulled.less: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em @fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .@{fa-css-prefix}-pull-left { float: left; } 11 | .@{fa-css-prefix}-pull-right { float: right; } 12 | 13 | .@{fa-css-prefix} { 14 | &.@{fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.@{fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .@{fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /font-awesome/less/core.less: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /font-awesome/less/fixed-width.less: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .@{fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /font-awesome/less/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables.less"; 7 | @import "mixins.less"; 8 | @import "path.less"; 9 | @import "core.less"; 10 | @import "larger.less"; 11 | @import "fixed-width.less"; 12 | @import "list.less"; 13 | @import "bordered-pulled.less"; 14 | @import "animated.less"; 15 | @import "rotated-flipped.less"; 16 | @import "stacked.less"; 17 | @import "icons.less"; 18 | @import "screen-reader.less"; 19 | -------------------------------------------------------------------------------- /font-awesome/less/larger.less: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .@{fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .@{fa-css-prefix}-2x { font-size: 2em; } 11 | .@{fa-css-prefix}-3x { font-size: 3em; } 12 | .@{fa-css-prefix}-4x { font-size: 4em; } 13 | .@{fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /font-awesome/less/list.less: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: @fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .@{fa-css-prefix}-li { 11 | position: absolute; 12 | left: -@fa-li-width; 13 | width: @fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.@{fa-css-prefix}-lg { 17 | left: (-@fa-li-width + (4em / 14)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /font-awesome/less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | 14 | .fa-icon-rotate(@degrees, @rotation) { 15 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; 16 | -webkit-transform: rotate(@degrees); 17 | -ms-transform: rotate(@degrees); 18 | transform: rotate(@degrees); 19 | } 20 | 21 | .fa-icon-flip(@horiz, @vert, @rotation) { 22 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)"; 23 | -webkit-transform: scale(@horiz, @vert); 24 | -ms-transform: scale(@horiz, @vert); 25 | transform: scale(@horiz, @vert); 26 | } 27 | 28 | 29 | // Only display content to screen readers. A la Bootstrap 4. 30 | // 31 | // See: http://a11yproject.com/posts/how-to-hide-content/ 32 | 33 | .sr-only() { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0,0,0,0); 41 | border: 0; 42 | } 43 | 44 | // Use in conjunction with .sr-only to only display content when it's focused. 45 | // 46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 47 | // 48 | // Credit: HTML5 Boilerplate 49 | 50 | .sr-only-focusable() { 51 | &:active, 52 | &:focus { 53 | position: static; 54 | width: auto; 55 | height: auto; 56 | margin: 0; 57 | overflow: visible; 58 | clip: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /font-awesome/less/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 8 | url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), 9 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 10 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 11 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /font-awesome/less/rotated-flipped.less: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } 7 | 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } 9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .@{fa-css-prefix}-rotate-90, 15 | :root .@{fa-css-prefix}-rotate-180, 16 | :root .@{fa-css-prefix}-rotate-270, 17 | :root .@{fa-css-prefix}-flip-horizontal, 18 | :root .@{fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /font-awesome/less/screen-reader.less: -------------------------------------------------------------------------------- 1 | // Screen Readers 2 | // ------------------------- 3 | 4 | .sr-only { .sr-only(); } 5 | .sr-only-focusable { .sr-only-focusable(); } 6 | -------------------------------------------------------------------------------- /font-awesome/less/stacked.less: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; } 21 | -------------------------------------------------------------------------------- /font-awesome/scss/_animated.scss: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .#{$fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .#{$fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /font-awesome/scss/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .#{$fa-css-prefix}-pull-left { float: left; } 11 | .#{$fa-css-prefix}-pull-right { float: right; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .#{$fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /font-awesome/scss/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /font-awesome/scss/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /font-awesome/scss/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /font-awesome/scss/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /font-awesome/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | @mixin fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | 14 | @mixin fa-icon-rotate($degrees, $rotation) { 15 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; 16 | -webkit-transform: rotate($degrees); 17 | -ms-transform: rotate($degrees); 18 | transform: rotate($degrees); 19 | } 20 | 21 | @mixin fa-icon-flip($horiz, $vert, $rotation) { 22 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; 23 | -webkit-transform: scale($horiz, $vert); 24 | -ms-transform: scale($horiz, $vert); 25 | transform: scale($horiz, $vert); 26 | } 27 | 28 | 29 | // Only display content to screen readers. A la Bootstrap 4. 30 | // 31 | // See: http://a11yproject.com/posts/how-to-hide-content/ 32 | 33 | @mixin sr-only { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0,0,0,0); 41 | border: 0; 42 | } 43 | 44 | // Use in conjunction with .sr-only to only display content when it's focused. 45 | // 46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 47 | // 48 | // Credit: HTML5 Boilerplate 49 | 50 | @mixin sr-only-focusable { 51 | &:active, 52 | &:focus { 53 | position: static; 54 | width: auto; 55 | height: auto; 56 | margin: 0; 57 | overflow: visible; 58 | clip: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /font-awesome/scss/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), 9 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 10 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 11 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /font-awesome/scss/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /font-awesome/scss/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Screen Readers 2 | // ------------------------- 3 | 4 | .sr-only { @include sr-only(); } 5 | .sr-only-focusable { @include sr-only-focusable(); } 6 | -------------------------------------------------------------------------------- /font-awesome/scss/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /font-awesome/scss/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "animated"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | @import "screen-reader"; 19 | -------------------------------------------------------------------------------- /images/default-picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/images/default-picture.png -------------------------------------------------------------------------------- /images/hanyelemary.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/images/hanyelemary.jpg -------------------------------------------------------------------------------- /images/tw-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/images/tw-logo.png -------------------------------------------------------------------------------- /semantic.json: -------------------------------------------------------------------------------- 1 | { 2 | "base": "semantic/", 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": "dist/", 12 | "uncompressed": "dist/components/", 13 | "compressed": "dist/components/", 14 | "themes": "dist/themes/" 15 | }, 16 | "clean": "dist/" 17 | }, 18 | "permission": false, 19 | "rtl": false, 20 | "version": "2.1.8" 21 | } -------------------------------------------------------------------------------- /semantic/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/reset"; } 15 | & { @import "definitions/globals/site"; } 16 | 17 | /* Elements */ 18 | & { @import "definitions/elements/button"; } 19 | & { @import "definitions/elements/container"; } 20 | & { @import "definitions/elements/divider"; } 21 | & { @import "definitions/elements/flag"; } 22 | & { @import "definitions/elements/header"; } 23 | & { @import "definitions/elements/icon"; } 24 | & { @import "definitions/elements/image"; } 25 | & { @import "definitions/elements/input"; } 26 | & { @import "definitions/elements/label"; } 27 | & { @import "definitions/elements/list"; } 28 | & { @import "definitions/elements/loader"; } 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 | -------------------------------------------------------------------------------- /semantic/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 | @rail : 'default'; 37 | @reveal : 'default'; 38 | @segment : 'default'; 39 | @step : 'default'; 40 | 41 | /* Collections */ 42 | @breadcrumb : 'default'; 43 | @form : 'default'; 44 | @grid : 'default'; 45 | @menu : 'default'; 46 | @message : 'default'; 47 | @table : 'default'; 48 | 49 | /* Modules */ 50 | @accordion : 'default'; 51 | @checkbox : 'default'; 52 | @dimmer : 'default'; 53 | @dropdown : 'default'; 54 | @embed : 'default'; 55 | @modal : 'default'; 56 | @nag : 'default'; 57 | @popup : 'default'; 58 | @progress : 'default'; 59 | @rating : 'default'; 60 | @search : 'default'; 61 | @shape : 'default'; 62 | @sidebar : 'default'; 63 | @sticky : 'default'; 64 | @tab : 'default'; 65 | @transition : 'default'; 66 | 67 | /* Views */ 68 | @ad : 'default'; 69 | @card : 'default'; 70 | @comment : 'default'; 71 | @feed : 'default'; 72 | @item : 'default'; 73 | @statistic : 'default'; 74 | 75 | /******************************* 76 | Folders 77 | *******************************/ 78 | 79 | /* Path to theme packages */ 80 | @themesFolder : 'themes'; 81 | 82 | /* Path to site override folder */ 83 | @siteFolder : 'site/'; 84 | 85 | 86 | /******************************* 87 | Import Theme 88 | *******************************/ 89 | 90 | @import "theme.less"; 91 | 92 | /* End Config */ -------------------------------------------------------------------------------- /semantic/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 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 | -------------------------------------------------------------------------------- /semantic/src/themes/amazon/elements/button.overrides: -------------------------------------------------------------------------------- 1 | .ui.button { 2 | background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0); 3 | } 4 | 5 | .ui.primary.button { 6 | color: #111111; 7 | border: 1px solid; 8 | border-color: #C59F43 #AA8326 #957321; 9 | } 10 | .ui.primary.button:hover { 11 | border-color: #C59F43 #AA8326 #957321; 12 | color: #111111; 13 | } 14 | 15 | .ui.secondary.button { 16 | border: 1px solid; 17 | border-color: #3D444C #2F353B #2C3137; 18 | } 19 | .ui.secondary.button:hover { 20 | border-color: #32373E #24282D #212429; 21 | } 22 | 23 | 24 | .ui.labeled.icon.buttons .button > .icon, 25 | .ui.labeled.icon.button > .icon { 26 | padding-bottom: 0.48em; 27 | padding-top: 0.48em; 28 | position: absolute; 29 | text-align: center; 30 | width: 2em; 31 | height: 2em; 32 | top: 0.35em; 33 | left: 0.4em; 34 | border-radius: 3px; 35 | } 36 | .ui.right.labeled.icon.buttons .button > .icon, 37 | .ui.right.labeled.icon.button > .icon { 38 | left: auto; 39 | right: 0.4em; 40 | border-radius: 3px; 41 | } 42 | 43 | .ui.basic.labeled.icon.buttons .button > .icon, 44 | .ui.basic.labeled.icon.button > .icon { 45 | padding-top: 0.4em !important; 46 | } -------------------------------------------------------------------------------- /semantic/src/themes/amazon/elements/button.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Button Variables 3 | --------------------*/ 4 | 5 | /* Button Variables */ 6 | @pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; 7 | @textTransform: none; 8 | @textColor: #111111; 9 | @fontWeight: normal; 10 | @transition: 11 | opacity @defaultDuration @defaultEasing, 12 | background-color @defaultDuration @defaultEasing, 13 | color @defaultDuration @defaultEasing, 14 | background @defaultDuration @defaultEasing 15 | ; 16 | 17 | @hoverBackgroundColor: #E0E0E0; 18 | 19 | @borderRadius: 3px; 20 | @verticalPadding: 0.8em; 21 | @horizontalPadding: 1.75em; 22 | 23 | @backgroundColor: #F7F8FA; 24 | @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); 25 | @boxShadow: 26 | 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 27 | 0 0 0 1px #ADB2BB inset 28 | ; 29 | 30 | @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); 31 | @coloredBoxShadow: 32 | 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset 33 | ; 34 | 35 | @downBoxShadow: 36 | 0 0 0 1px #ADB2BB inset, 37 | 0 1px 3px rgba(0, 0, 0, 0.2) inset 38 | ; 39 | 40 | @labeledIconBackgroundColor: #313A43; 41 | @labeledIconColor: #FFFFFF; 42 | @labeledIconBorder: transparent; 43 | 44 | @black: #444C55; 45 | @orange: #F4CC67; 46 | 47 | @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); 48 | @primaryColor: @orange; 49 | @secondaryColor: @black; 50 | 51 | @mini: 10px; 52 | @tiny: 11px; 53 | @small: 12px; 54 | @medium: 13px; 55 | @large: 14px; 56 | @big: 16px; 57 | @huge: 18px; 58 | @massive: 22px; 59 | -------------------------------------------------------------------------------- /semantic/src/themes/amazon/globals/site.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Global Variables 3 | *******************************/ 4 | 5 | @pageMinWidth : 1049px; 6 | @pageOverflowX : visible; 7 | 8 | @emSize: 13px; 9 | @fontSize : 13px; 10 | @fontName : 'Arial'; 11 | @importGoogleFonts : false; 12 | 13 | @h1: 2.25em; 14 | 15 | @defaultBorderRadius: 0.30769em; /* 4px @ 13em */ 16 | 17 | @disabledOpacity: 0.3; 18 | 19 | @black: #444C55; 20 | @orange: #FDE07B; 21 | 22 | @linkColor: #0066C0; 23 | @linkHoverColor: #C45500; 24 | @linkHoverUnderline: underline; 25 | 26 | @borderColor: rgba(0, 0, 0, 0.13); 27 | @solidBorderColor: #DDDDDD; 28 | @internalBorderColor: rgba(0, 0, 0, 0.06); 29 | @selectedBorderColor: #51A7E8; 30 | 31 | /* Breakpoints */ 32 | @largeMonitorBreakpoint: 1049px; 33 | @computerBreakpoint: @largeMonitorBreakpoint; 34 | @tabletBreakpoint: @largeMonitorBreakpoint; 35 | 36 | /* Colors */ 37 | @blue: #80A6CD; 38 | @green: #60B044; 39 | @orange: #D26911; 40 | 41 | 42 | @infoBackgroundColor: #E6F1F6; 43 | @infoTextColor: #4E575B; -------------------------------------------------------------------------------- /semantic/src/themes/basic/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/basic/assets/fonts/icons.eot -------------------------------------------------------------------------------- /semantic/src/themes/basic/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/basic/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /semantic/src/themes/basic/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/basic/assets/fonts/icons.woff -------------------------------------------------------------------------------- /semantic/src/themes/basic/collections/table.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/src/themes/basic/collections/table.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Table Variables 3 | --------------------*/ 4 | 5 | @headerBackground: @white; 6 | @footerBackground: @white; 7 | 8 | @cellVerticalPadding: 1em; 9 | @cellHorizontalPadding: 1em; 10 | 11 | @stateMarkerWidth: 1px; -------------------------------------------------------------------------------- /semantic/src/themes/basic/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/src/themes/basic/elements/button.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Button Variables 3 | --------------------*/ 4 | 5 | /* Button Variables */ 6 | @textTransform: none; 7 | @fontWeight: normal; 8 | @textColor: #333333; 9 | 10 | @primaryColor: #333333; 11 | 12 | @borderRadius: 0.25em; 13 | 14 | @backgroundColor: #EEEEEE; 15 | @backgroundImage: none; 16 | @boxShadow: none; 17 | 18 | @hoverBackgroundColor: #DDDDDD; 19 | @hoverBackgroundImage: none; 20 | @hoverBoxShadow: none; 21 | 22 | @downBackgroundColor: #D0D0D0; 23 | @downBackgroundImage: none; 24 | @downBoxShadow: none; 25 | 26 | @activeBackgroundColor: #CCCCCC; 27 | @activeBackgroundImage: none; 28 | @activeBoxShadow: none; 29 | 30 | @verticalBoxShadow: none; 31 | 32 | @loadingBackgroundColor: #F0F0F0; 33 | 34 | @labeledIconLeftShadow: none; 35 | @labeledIconRightShadow: none; 36 | 37 | @mini: 0.6rem; 38 | @tiny: 0.7rem; 39 | @small: 0.85rem; 40 | @medium: 0.92rem; 41 | @large: 1rem; 42 | @big: 1.125rem; 43 | @huge: 1.25rem; 44 | @massive: 1.3rem; 45 | -------------------------------------------------------------------------------- /semantic/src/themes/basic/elements/icon.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Icon Variables 3 | --------------------*/ 4 | 5 | @fontPath : "../../themes/basic/assets/fonts"; 6 | 7 | @src: 8 | url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), 9 | url("@{fontPath}/@{fontName}.woff") format('woff'), 10 | url("@{fontPath}/@{fontName}.ttf") format('truetype'), 11 | url("@{fontPath}/@{fontName}.svg#icons") format('svg') 12 | ; -------------------------------------------------------------------------------- /semantic/src/themes/basic/elements/step.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.steps .step:after { 6 | display: none !important; 7 | } 8 | .ui.steps .step { 9 | border-radius: 500px !important; 10 | } -------------------------------------------------------------------------------- /semantic/src/themes/basic/elements/step.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Step Variables 3 | --------------------*/ 4 | 5 | /* Stepss */ 6 | @stepsBorder: none; 7 | @stepsBorderRadius: @circularRadius; 8 | 9 | /* Step */ 10 | @border: none; 11 | @divider: none; 12 | @background: transparent; 13 | @borderRadius: @circularRadius; 14 | @iconDistance: 0.8em; 15 | @arrowDisplay: none; 16 | 17 | @activeBackground: @midWhite; 18 | @activeArrowDisplay: none; 19 | -------------------------------------------------------------------------------- /semantic/src/themes/basic/globals/reset.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | /* No Additonal Resets */ -------------------------------------------------------------------------------- /semantic/src/themes/basic/globals/reset.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Reset 3 | *******************************/ -------------------------------------------------------------------------------- /semantic/src/themes/basic/modules/progress.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/basic/modules/progress.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | 5 | @background: transparent; 6 | @border: none; 7 | @padding: 0em; 8 | 9 | @progressLeft: 0em; 10 | @progressWidth: 100%; 11 | @progressTextAlign: center; 12 | 13 | @labelFontWeight: normal; 14 | @labelTextAlign: left; 15 | @labelHeight: 1.5em; -------------------------------------------------------------------------------- /semantic/src/themes/basic/views/card.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/src/themes/basic/views/card.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Card 3 | *******************************/ 4 | 5 | /*------------------- 6 | View 7 | --------------------*/ 8 | 9 | @width: 250px; 10 | @background: transparent; 11 | @border: none; 12 | @boxShadow: none; 13 | 14 | @contentPadding: 1em 0em; 15 | 16 | @rowSpacing: 1.5em; 17 | @groupCardMargin: 0em @horizontalSpacing @rowSpacing; 18 | 19 | @extraBackground: transparent; 20 | @extraDivider: none; 21 | @extraBoxShadow: none; 22 | @extraPadding: 0.5em 0em; 23 | 24 | @extraLinkColor: @textColor; 25 | @extraLinkHoverColor: @linkHoverColor; 26 | 27 | @headerFontSize: @relativeLarge; 28 | @headerLinkColor: @textColor; 29 | @headerLinkHoverColor: @linkHoverColor; 30 | 31 | @imageBorderRadius: @borderRadius; 32 | @imageBorder: 1px solid @borderColor; 33 | 34 | @linkHoverBackground: transparent; 35 | @linkHoverBoxShadow: none; -------------------------------------------------------------------------------- /semantic/src/themes/bookish/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | @import url(http://fonts.googleapis.com/css?family=Karma); 6 | 7 | h1.ui.header, 8 | .ui.huge.header { 9 | font-weight: bold; 10 | } 11 | 12 | h2.ui.header, 13 | .ui.large.header { 14 | font-weight: bold; 15 | } -------------------------------------------------------------------------------- /semantic/src/themes/bookish/elements/header.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Header 3 | --------------------*/ 4 | 5 | @headerFont : 'Karma', 'Times New Roman', serif; 6 | @fontWeight: normal; 7 | 8 | @iconSize: 1.5em; 9 | @iconOffset: 0.2em; 10 | @iconAlignment: top; 11 | 12 | @subHeaderFontSize: 0.85rem; 13 | 14 | @dividedBorder: 1px dotted rgba(0, 0, 0, 0.2); 15 | 16 | /* Block Header */ 17 | @blockVerticalPadding: 1.3em; 18 | @blockHorizontalPadding: 1em; 19 | 20 | /* Attached */ 21 | @attachedBackground: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03)) repeat scroll 0 0 #F8F8F8; 22 | @attachedVerticalPadding: 1.3; 23 | @attachedHorizontalPadding: 1em; 24 | 25 | /* HTML Headings */ 26 | @h1: 1.75rem; 27 | @h2: 1.33rem; 28 | @h3: 1.33rem; 29 | @h4: 1rem; 30 | @h5: 0.9rem; 31 | 32 | /* Sizing */ 33 | @hugeFontSize: 1.75em; 34 | @largeFontSize: 1.33em; 35 | @mediumFontSize: 1.33em; 36 | @smallFontSize: 1em; 37 | @tinyFontSize: 0.9em; -------------------------------------------------------------------------------- /semantic/src/themes/bootstrap3/elements/button.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/bootstrap3/elements/button.overrides -------------------------------------------------------------------------------- /semantic/src/themes/bootstrap3/elements/button.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Button Variables 3 | --------------------*/ 4 | 5 | /* Button Variables */ 6 | @pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; 7 | @textTransform: none; 8 | @fontWeight: normal; 9 | @textColor: rgba(51, 51, 51, 1); 10 | 11 | @borderRadius: @4px; 12 | 13 | @lineHeight: 1.42857; 14 | @verticalPadding: 0.8571em; 15 | @horizontalPadding: 0.8571em; 16 | 17 | @backgroundColor: @white; 18 | @backgroundImage: none; 19 | 20 | 21 | @borderBoxShadowColor: rgba(0, 0, 0, 0.14); 22 | 23 | @green: #5CB85C; 24 | @red: #D9534F; 25 | @blue: #337AB7; 26 | @green: #60B044; 27 | @orange: #F0AD4E; 28 | 29 | @primaryColor: @blue; 30 | @secondaryColor: @green; 31 | 32 | @labeledIconBackgroundColor: transparent; 33 | 34 | @basicBorderSize: 0px; 35 | @basicColoredBorderSize: 0px; 36 | @invertedBorderSize: 0px; 37 | 38 | @basicActiveBackground: transparent; 39 | @basicHoverBackground: transparent; 40 | @basicDownBoxShadow: 41 | 0px 0px 0px 1px #ADADAD inset, 42 | 0 3px 5px rgba(0, 0, 0, 0.125) inset 43 | ; 44 | 45 | @groupButtonOffset: 0px 0px 0px -1px; 46 | @verticalGroupOffset: 0px 0px -1px 0px; 47 | 48 | /* States */ 49 | 50 | @hoverBackgroundColor: #E6E6E6; 51 | @hoverBoxShadow: 52 | 0px 0px 0px 1px #ADADAD inset 53 | ; 54 | 55 | @downBackgroundColor: #E6E6E6; 56 | @downBoxShadow: 57 | 0px 0px 0px 1px #ADADAD inset, 58 | 0 3px 5px rgba(0, 0, 0, 0.125) inset 59 | ; 60 | 61 | @activeBackgroundColor: #E6E6E6; 62 | 63 | @disabledOpacity: 0.65; -------------------------------------------------------------------------------- /semantic/src/themes/chubby/collections/form.overrides: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Form Variables 3 | --------------------*/ 4 | 5 | .ui.form .selection.dropdown { 6 | padding: 1.1em 1.2em; 7 | border-width: 2px; 8 | } 9 | .ui.form .selection.dropdown .menu { 10 | min-width: calc(100% + 4px); 11 | margin: 0 -2px; 12 | border-width: 2px; 13 | } 14 | .ui.form .selection.dropdown input { 15 | padding: inherit; 16 | } -------------------------------------------------------------------------------- /semantic/src/themes/chubby/collections/form.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Form Variables 3 | --------------------*/ 4 | 5 | @labelTextTransform: uppercase; 6 | @labelFontSize: 0.8em; 7 | 8 | @inputPadding: 1em 1.2em; 9 | @inputBorder: 2px solid @borderColor; -------------------------------------------------------------------------------- /semantic/src/themes/chubby/collections/menu.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/chubby/collections/menu.overrides -------------------------------------------------------------------------------- /semantic/src/themes/chubby/collections/menu.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Menu 3 | *******************************/ 4 | 5 | @background: @darkWhite; 6 | @boxShadow: none; 7 | @dividerSize: 0px; 8 | 9 | @verticalBoxShadow: 0px 0px 0px 2px @borderColor inset; 10 | @verticalActiveBoxShadow: none; 11 | 12 | @itemVerticalPadding: 1.25em; 13 | @itemHorizontalPadding: 2em; 14 | @itemFontWeight: bold; 15 | 16 | @activeItemBackground: @primaryColor; 17 | @activeItemTextColor: @white; 18 | @activeHoverItemBackground: @primaryColorHover; 19 | @activeHoverItemColor: @white; 20 | 21 | @secondaryItemPadding: @relativeSmall @relativeMedium; 22 | 23 | @secondaryActiveItemBackground: @primaryColor; 24 | @secondaryActiveItemColor: @white; 25 | @secondaryActiveHoverItemBackground: @primaryColorHover; 26 | @secondaryActiveHoverItemColor: @white; 27 | 28 | @secondaryPointingBorderWidth: 4px; 29 | @secondaryPointingActiveBorderColor: @primaryColor; 30 | @secondaryPointingActiveTextColor: @primaryColor; 31 | 32 | @arrowSize: 1em; 33 | @arrowActiveColor: @primaryColor; 34 | @arrowActiveHoverColor: @primaryColorHover; 35 | @arrowBorder: transparent; 36 | 37 | @paginationActiveBackground: @lightGrey; 38 | 39 | @borderColor: @darkWhite; 40 | @tabularBorderWidth: 2px; -------------------------------------------------------------------------------- /semantic/src/themes/chubby/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro); 6 | 7 | .ui.labeled.icon.buttons > .button > .icon, 8 | .ui.labeled.icon.button > .icon { 9 | box-shadow: 10 | -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 11 | -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset 12 | ; 13 | } 14 | 15 | .ui.right.labeled.icon.buttons .button .icon, 16 | .ui.right.labeled.icon.button .icon { 17 | box-shadow: 18 | 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 19 | 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset 20 | ; 21 | } -------------------------------------------------------------------------------- /semantic/src/themes/chubby/elements/button.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Button Variables 3 | --------------------*/ 4 | 5 | /* Button Variables */ 6 | @pageFont: 'Source Sans Pro', Arial, sans-serif; 7 | 8 | @textTransform: none; 9 | @fontWeight: normal; 10 | @textColor: #333333; 11 | 12 | @verticalPadding: 1.1em; 13 | @horizontalPadding: 2.5em; 14 | @invertedBorderSize: 3px; 15 | 16 | @basicBorderRadius: 0.4em; 17 | @basicFontWeight: bold; 18 | @basicTextTransform: uppercase; 19 | 20 | @blue: #4A88CB; 21 | @primaryColor: @blue; 22 | 23 | @borderRadius: 0.25em; 24 | 25 | @backgroundColor: #E6EAED; 26 | @backgroundImage: none; 27 | @boxShadow: none; 28 | 29 | @hoverBackgroundColor: #DDDDDD; 30 | @hoverBackgroundImage: none; 31 | @hoverBoxShadow: none; 32 | 33 | @downBackgroundColor: #D0D0D0; 34 | @downBackgroundImage: none; 35 | @downBoxShadow: none; 36 | 37 | @activeBackgroundColor: #CCCCCC; 38 | @activeBackgroundImage: none; 39 | @activeBoxShadow: none; 40 | 41 | @verticalBoxShadow: none; 42 | 43 | @loadingBackgroundColor: #F0F0F0; 44 | 45 | @compactVerticalPadding: (@verticalPadding * 0.5); 46 | @compactHorizontalPadding: (@horizontalPadding * 0.5); 47 | 48 | @labeledIconBackgroundColor: transparent; 49 | 50 | @mini: 0.7rem; 51 | @tiny: 0.75rem; 52 | @small: 0.8rem; 53 | @medium: 0.92rem; 54 | @large: 1rem; 55 | @big: 1.125rem; 56 | @huge: 1.2rem; 57 | @massive: 1.3rem; 58 | -------------------------------------------------------------------------------- /semantic/src/themes/chubby/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro); 6 | -------------------------------------------------------------------------------- /semantic/src/themes/chubby/elements/header.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Header 3 | --------------------*/ 4 | 5 | @headerFont : 'Source Sans Pro', Helvetica Neue, Helvetica, Arial, sans-serif; 6 | @fontWeight: bold; 7 | @textTransform: none; 8 | 9 | /* HTML Headings */ 10 | @h1: 1.33rem; 11 | @h2: 1.2rem; 12 | @h3: 1rem; 13 | @h4: 0.9rem; 14 | @h5: 0.8rem; 15 | 16 | /* Sizing */ 17 | @hugeFontSize: 1.33em; 18 | @largeFontSize: 1.2em; 19 | @mediumFontSize: 1em; 20 | @smallFontSize: 0.9em; 21 | @tinyFontSize: 0.8em; -------------------------------------------------------------------------------- /semantic/src/themes/chubby/modules/accordion.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.styled.accordion .accordion .active.title { 6 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 7 | } -------------------------------------------------------------------------------- /semantic/src/themes/chubby/modules/accordion.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Accordion Variables 3 | --------------------*/ 4 | 5 | @iconMargin: 0em 0.5em 0em 0em; 6 | 7 | @styledActiveTitleBackground: @subtleGradient; 8 | @styledActiveTitleColor: @primaryColor; 9 | 10 | @styledActiveChildTitleBackground: transparent; 11 | 12 | @styledTitlePadding: 1.25em; 13 | @styledTitleFontWeight: bold; 14 | @styledContentPadding: 1.5em 3.25em; 15 | @styledChildContentPadding: @styledContentPadding; -------------------------------------------------------------------------------- /semantic/src/themes/chubby/views/comment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.comments .comment { 6 | border-radius: 0.5em; 7 | box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); 8 | } 9 | .ui.comments .comment .comments .comment { 10 | border: 1px solid rgba(0, 0, 0, 0.1); 11 | box-shadow: none; 12 | } -------------------------------------------------------------------------------- /semantic/src/themes/chubby/views/comment.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Comments 3 | *******************************/ 4 | 5 | /*------------------- 6 | Elements 7 | --------------------*/ 8 | 9 | /* Comment */ 10 | @commentBackground: #FFFFFF; 11 | @commentMargin: 1em 0em 0em; 12 | @commentPadding: 1em 1.5em; 13 | @commentBorder: 1px solid rgba(0, 0, 0, 0.1); 14 | @commentDivider: 1px solid rgba(0, 0, 0, 0.1); 15 | @firstCommentMargin: 1em; 16 | @firstCommentPadding: 1em; 17 | 18 | /* Nested Comment */ 19 | @nestedCommentsMargin: 0em 0em 0.5em 0.5em; 20 | @nestedCommentsPadding: 1em 0em 0em 1em; 21 | @nestedCommentBackground: #F0F0F0; 22 | 23 | /* Avatar */ 24 | @avatarWidth: 3.5em; 25 | @avatarSpacing: 1.5em; 26 | @avatarBorderRadius: @circularRadius; 27 | 28 | /* Content */ 29 | @contentMargin: @avatarWidth + @avatarSpacing; 30 | 31 | /* Author */ 32 | @authorFontSize: 1em; 33 | @authorColor: @primaryColor; 34 | @authorHoverColor: @primaryColorHover; 35 | @authorFontWeight: bold; 36 | 37 | @metadataDisplay: block; 38 | @metadataSpacing: 0em; 39 | @metadataColor: @textColor; 40 | 41 | /*------------------- 42 | Variations 43 | --------------------*/ 44 | 45 | /* Threaded */ 46 | @threadedCommentMargin: -1.5em 0 -1em (@avatarWidth / 2); 47 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/collections/table.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/collections/table.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Table 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @boxShadow: @subtleGradient; 10 | 11 | @headerBackground: @subtleGradient; 12 | @headerBoxShadow: @subtleShadow; 13 | @footerBoxShadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05); 14 | @footerBackground: rgba(0, 0, 0, 0.05); 15 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/elements/button.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Button 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | /* Shadow */ 10 | @shadowDistance: 0em; 11 | @shadowOffset: (@shadowDistance / 2); 12 | @shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset; 13 | @backgroundColor: #FAFAFA; 14 | @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09)); 15 | @boxShadow: 16 | 0px 0px 0px 1px @borderColor inset, 17 | @shadowBoxShadow 18 | ; 19 | 20 | /* Padding */ 21 | @verticalPadding: 0.8em; 22 | @horizontalPadding: 1.5em; 23 | 24 | 25 | /*------------------- 26 | Group 27 | --------------------*/ 28 | 29 | @groupBoxShadow: none; 30 | @groupButtonBoxShadow: 31 | 0px 0px 0px 1px @borderColor inset, 32 | @shadowBoxShadow 33 | ; 34 | @verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; 35 | @groupButtonOffset: 0px 0px 0px -1px; 36 | @verticalGroupOffset: 0px 0px -1px 0px; 37 | 38 | /*------------------- 39 | States 40 | --------------------*/ 41 | 42 | /* Hovered */ 43 | @hoverBackgroundColor: ''; 44 | @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13)); 45 | @hoverBoxShadow: ''; 46 | @hoverColor: @hoveredTextColor; 47 | @iconHoverOpacity: 0.85; 48 | 49 | /* Focused */ 50 | @focusBackgroundColor: ''; 51 | @focusBackgroundImage: ''; 52 | @focusBoxShadow: 53 | 0px 0px 1px rgba(81, 167, 232, 0.8) inset, 54 | 0px 0px 3px 2px rgba(81, 167, 232, 0.8) 55 | ; 56 | @focusColor: @hoveredTextColor; 57 | @iconFocusOpacity: 0.85; 58 | 59 | /* Pressed Down */ 60 | @downBackgroundColor: #F1F1F1; 61 | @downBackgroundImage: ''; 62 | @downBoxShadow: 63 | 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 64 | 0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important 65 | ; 66 | @downColor: @pressedTextColor; 67 | 68 | /* Active */ 69 | @activeBackgroundColor: #DADADA; 70 | @activeBackgroundImage: none; 71 | @activeColor: @selectedTextColor; 72 | @activeBoxShadow: 73 | 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 74 | 0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important 75 | ; 76 | 77 | /* Active + Hovered */ 78 | @activeHoverBackgroundColor: #DADADA; 79 | @activeHoverBackgroundImage: none; 80 | @activeHoverBoxShadow: 81 | 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 82 | 0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important 83 | ; 84 | @activeHoverColor: @selectedTextColor; 85 | 86 | /* Loading */ 87 | @loadingBackgroundColor: #FFFFFF; 88 | 89 | /*------------------- 90 | Types 91 | --------------------*/ 92 | 93 | /* Labeled Icon */ 94 | @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); 95 | @labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset; 96 | @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset; 97 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/elements/header.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Button 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @headerFont: 'Open Sans', Arial, sans-serif; 10 | 11 | @blockBackground: @offWhite @subtleGradient; 12 | @blockBoxShadow: @subtleShadow; -------------------------------------------------------------------------------- /semantic/src/themes/classic/modules/progress.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/classic/modules/progress.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | 5 | @background: rgba(0, 0, 0, 0.05); 6 | @boxShadow: 0px 0px 4px rgba(0, 0, 0, 0.1) inset; 7 | @barBackground: @subtleGradient #888888; 8 | @border: 1px solid @borderColor; 9 | @padding: @relative3px; -------------------------------------------------------------------------------- /semantic/src/themes/classic/views/card.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Item 3 | *******************************/ 4 | /*------------------- 5 | View 6 | --------------------*/ 7 | 8 | /* Item */ 9 | @background: #FFFFFF; 10 | @borderRadius: 0.325rem; 11 | @display: block; 12 | @float: left; 13 | @margin: 0em @horizontalSpacing @rowSpacing; 14 | @minHeight: 0px; 15 | @padding: 0em; 16 | @width: 300px; 17 | @boxShadow: 18 | 0px 0px 0px 1px @borderColor, 19 | 0px 3px 0px 0px @borderColor 20 | ; 21 | @border: none; 22 | @zIndex: ''; 23 | 24 | /* Item Group */ 25 | @horizontalSpacing: 0.5em; 26 | @rowSpacing: 2.5em; 27 | @groupMargin: 1em -@horizontalSpacing; 28 | 29 | /*------------------- 30 | Content 31 | --------------------*/ 32 | 33 | /* Image */ 34 | @imageBackground: @transparentBlack; 35 | @imagePadding: 0em; 36 | @imageBorderRadius: @borderRadius @borderRadius 0em 0em; 37 | @imageBoxShadow: none; 38 | @imageBorder: none; 39 | 40 | /* Content */ 41 | @contentMargin: 0em; 42 | @contentPadding: 0.75em 1em; 43 | @contentFontSize: 1em; 44 | @contentBorder: none; 45 | @contentBorderRadius: 0em; 46 | @contentBoxShadow: none; 47 | 48 | /* Title */ 49 | @titleMargin: 0em; 50 | @titleFont: @headerFont; 51 | @titleFontWeight: bold; 52 | @titleFontSize: 1.25em; 53 | @titleColor: @darkTextColor; 54 | 55 | /* Metadata */ 56 | @metaColor: @lightTextColor; 57 | 58 | /* Description */ 59 | @descriptionDistance: 0.75em; 60 | @descriptionColor: @lightTextColor; 61 | 62 | /* Image */ 63 | @imageSpacing: 0.25em; 64 | @contentImageWidth: 2em; 65 | @contentImageVerticalAlign: middle; 66 | 67 | /* Paragraph */ 68 | @paragraphDistance: 0.1em; 69 | 70 | /* Additional Content */ 71 | @extraDisplay: absolute; 72 | @extraTop: 100%; 73 | @extraLeft: 0em; 74 | @extraWidth: 100%; 75 | 76 | @extraPadding: 0.5em 0.75em; 77 | @extraColor: @lightTextColor; 78 | @extraTransition: color @defaultDuration @defaultEasing; 79 | 80 | /*------------------- 81 | States 82 | --------------------*/ 83 | 84 | @hoverCursor: pointer; 85 | @hoverZIndex: 5; 86 | @hoverBorder: none; 87 | @hoverBoxShadow: 88 | 0px 0px 0px 1px @selectedBorderColor, 89 | 0px 3px 0px 0px @selectedBorderColor 90 | ; 91 | 92 | 93 | /*------------------- 94 | Variations 95 | --------------------*/ 96 | 97 | /* Sizes */ 98 | @medium: 1em; -------------------------------------------------------------------------------- /semantic/src/themes/classic/views/card.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Card 3 | *******************************/ 4 | 5 | /*------------------- 6 | View 7 | --------------------*/ 8 | 9 | /* Shadow */ 10 | @shadowDistance: 0em; 11 | @padding: 0em; 12 | 13 | /*------------------- 14 | Content 15 | --------------------*/ 16 | 17 | /* Additional Content */ 18 | @extraDivider: 1px solid rgba(0, 0, 0, 0.05); 19 | @extraBackground: #FAFAFA @subtleGradient; 20 | @extraPadding: 0.75em 1em; 21 | @extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15); 22 | @extraColor: @lightTextColor; 23 | -------------------------------------------------------------------------------- /semantic/src/themes/colored/modules/checkbox.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/colored/modules/checkbox.overrides -------------------------------------------------------------------------------- /semantic/src/themes/colored/modules/checkbox.variables: -------------------------------------------------------------------------------- 1 | /* Checkbox */ 2 | @checkboxActiveBackground: @primaryColor; 3 | @checkboxActiveBorderColor: @primaryColor; 4 | @checkboxActiveCheckColor: @white; 5 | 6 | @checkboxActiveFocusBackground: @primaryColorFocus; 7 | @checkboxActiveFocusBorderColor: @primaryColorFocus; 8 | @checkboxActiveFocusCheckColor: @white; 9 | 10 | @checkboxTransition: none; 11 | 12 | /* Radio */ 13 | @radioActiveBackground: @white; 14 | @radioActiveBorderColor: @primaryColor; 15 | @radioActiveBulletColor: @primaryColor; 16 | 17 | @radioActiveFocusBackground: @white; 18 | @radioActiveFocusBorderColor: @primaryColorFocus; 19 | @radioActiveFocusBulletColor: @primaryColorFocus; 20 | 21 | /* Slider */ 22 | @sliderOnLineColor: @primaryColor; 23 | @sliderOnFocusLineColor: @primaryColorFocus; 24 | 25 | /* Handle */ 26 | @handleBackground: @white @subtleGradient; 27 | @handleBoxShadow: 28 | 0px 0px 0px 1px @selectedBorderColor inset 29 | ; 30 | -------------------------------------------------------------------------------- /semantic/src/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /semantic/src/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /semantic/src/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /semantic/src/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /semantic/src/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /semantic/src/themes/default/collections/breadcrumb.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/src/themes/default/collections/form.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/collections/grid.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/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%; -------------------------------------------------------------------------------- /semantic/src/themes/default/collections/menu.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/collections/message.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | @background: #F8F8F9; 15 | @lineHeightOffset: ((@lineHeight - 1em) / 2); 16 | 17 | @borderRadius: @defaultBorderRadius; 18 | @borderWidth: 1px; 19 | @borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset; 20 | @shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); 21 | @boxShadow: 22 | @borderShadow, 23 | @shadowShadow 24 | ; 25 | 26 | @transition: 27 | opacity @defaultDuration @defaultEasing, 28 | color @defaultDuration @defaultEasing, 29 | background @defaultDuration @defaultEasing, 30 | box-shadow @defaultDuration @defaultEasing 31 | ; 32 | 33 | /* Header */ 34 | @headerFontSize: @relativeLarge; 35 | @headerFontWeight: bold; 36 | @headerDisplay: block; 37 | @headerDistance: 0rem; 38 | @headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em; 39 | @headerParagraphDistance: 0.25em; 40 | 41 | /* Paragraph */ 42 | @messageTextOpacity: 0.85; 43 | @messageParagraphMargin: 0.75em; 44 | 45 | /* List */ 46 | @listOpacity: 0.85; 47 | @listStylePosition: inside; 48 | @listMargin: 0.5em; 49 | @listItemIndent: 1em; 50 | @listItemMargin: 0.3em; 51 | 52 | /* Icon */ 53 | @iconDistance: 0.6em; 54 | 55 | /* Close Icon */ 56 | @closeTopDistance: @verticalPadding - @lineHeightOffset; 57 | @closeRightDistance: 0.5em; 58 | @closeOpacity: 0.7; 59 | @closeTransition: opacity @defaultDuration @defaultEasing; 60 | 61 | 62 | /*------------------- 63 | Types 64 | --------------------*/ 65 | 66 | /* Icon Message */ 67 | @iconSize: 3em; 68 | @iconOpacity: 0.8; 69 | @iconContentDistance: 0rem; 70 | @iconVerticalAlign: middle; 71 | 72 | /* Attached */ 73 | @attachedXOffset: -1px; 74 | @attachedYOffset: -1px; 75 | @attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset; 76 | @attachedBottomBoxShadow: 77 | @attachedBoxShadow, 78 | @subtleShadow 79 | ; 80 | 81 | /* Floating */ 82 | @floatingBoxShadow: 83 | @borderShadow, 84 | @floatingShadow 85 | ; 86 | 87 | /* Warning / Positive / Negative / Info */ 88 | @positiveBoxShadow: 89 | 0px 0px 0px @borderWidth @positiveBorderColor inset, 90 | @shadowShadow 91 | ; 92 | @negativeBoxShadow: 93 | 0px 0px 0px @borderWidth @negativeBorderColor inset, 94 | @shadowShadow 95 | ; 96 | @infoBoxShadow: 97 | 0px 0px 0px @borderWidth @infoBorderColor inset, 98 | @shadowShadow 99 | ; 100 | @warningBoxShadow: 101 | 0px 0px 0px @borderWidth @warningBorderColor inset, 102 | @shadowShadow 103 | ; 104 | @errorBoxShadow: 105 | 0px 0px 0px @borderWidth @errorBorderColor inset, 106 | @shadowShadow 107 | ; 108 | @successBoxShadow: 109 | 0px 0px 0px @borderWidth @successBorderColor inset, 110 | @shadowShadow 111 | ; -------------------------------------------------------------------------------- /semantic/src/themes/default/collections/table.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/default/collections/table.overrides -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | .ui.icon.button > img { 6 | width: 20px; 7 | } 8 | 9 | .ui.icon.button.blue { 10 | background-color: rgb(1, 151, 236); 11 | } 12 | 13 | .ui.icon.button.half-width { 14 | width: 50%; 15 | } 16 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/container.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/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 | } -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/icon.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Icon 3 | *******************************/ 4 | 5 | /*------------------- 6 | Icon Variables 7 | --------------------*/ 8 | 9 | @fontName: 'icons'; 10 | @fallbackSRC: url("@{fontPath}/@{fontName}.eot"); 11 | @src: 12 | url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), 13 | url("@{fontPath}/@{fontName}.woff2") format('woff2'), 14 | url("@{fontPath}/@{fontName}.woff") format('woff'), 15 | url("@{fontPath}/@{fontName}.ttf") format('truetype'), 16 | url("@{fontPath}/@{fontName}.svg#icons") format('svg') 17 | ; 18 | 19 | @opacity: 1; 20 | @width: @iconWidth; 21 | @height: 1em; 22 | @distanceFromText: 0.25rem; 23 | 24 | 25 | /* Variations */ 26 | 27 | @linkOpacity: 0.8; 28 | @linkDuration: 0.3s; 29 | @loadingDuration: 2s; 30 | 31 | @circularSize: 2em; 32 | @circularPadding: 0.5em 0.5em; 33 | @circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; 34 | 35 | @borderedSize: 2em; 36 | @borderedVerticalPadding: ((@borderedSize - @height) / 2); 37 | @borderedHorizontalPadding: ((@borderedSize - @width) / 2); 38 | @borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; 39 | 40 | @cornerIconSize: 0.45em; 41 | @cornerIconStroke: 1px; 42 | @cornerIconShadow: 43 | -@cornerIconStroke -@cornerIconStroke 0 @white, 44 | @cornerIconStroke -@cornerIconStroke 0 @white, 45 | -@cornerIconStroke @cornerIconStroke 0 @white, 46 | @cornerIconStroke @cornerIconStroke 0 @white 47 | ; 48 | @cornerIconInvertedShadow: 49 | -@cornerIconStroke -@cornerIconStroke 0 @black, 50 | @cornerIconStroke -@cornerIconStroke 0 @black, 51 | -@cornerIconStroke @cornerIconStroke 0 @black, 52 | @cornerIconStroke @cornerIconStroke 0 @black 53 | ; 54 | 55 | @small: @relativeSmall; 56 | @medium: 1em; 57 | @large: 1.5em; 58 | @big: 2em; 59 | @huge: 4em; 60 | @massive: 8em; 61 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/image.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/input.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | ; 29 | 30 | @inputColor: @textColor; 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: @unselectedTextColor; 70 | @placeholderFocusColor: @textColor; 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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/label.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/list.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/loader.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | States 34 | --------------------*/ 35 | 36 | @indeterminateDirection: reverse; 37 | @indeterminateSpeed: (2 * @loaderSpeed); 38 | 39 | /*------------------- 40 | Variations 41 | --------------------*/ 42 | 43 | @inlineVerticalAlign: middle; 44 | @inlineMargin: 0em; 45 | 46 | /* Exact Sizes (Avoids Rounding Errors) */ 47 | @mini: 1.2857em; /* 18px */ 48 | @small: 1.7142em; /* 24px */ 49 | @medium: 2.2585em; /* 32px */ 50 | @large: 4.5714em; /* 64px */ 51 | 52 | @miniOffset: 0em 0em 0em -(@mini / 2); 53 | @smallOffset: 0em 0em 0em -(@small / 2); 54 | @mediumOffset: 0em 0em 0em -(@medium / 2); 55 | @largeOffset: 0em 0em 0em -(@large / 2); 56 | 57 | @miniFontSize: @relativeMini; 58 | @smallFontSize: @relativeSmall; 59 | @mediumFontSize: @relativeMedium; 60 | @largeFontSize: @relativeLarge; -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/rail.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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: @width + @splitCloseDistance; 27 | @veryCloseWidth: @width + @splitVeryCloseDistance; 28 | 29 | /* Dividing */ 30 | @dividingBorder: 1px solid @borderColor; 31 | @dividingDistance: 5rem; 32 | @splitDividingDistance: (@dividingDistance / 2); 33 | @dividingWidth: @width + @splitDividingDistance; 34 | 35 | -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/reveal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | 14 | /* Types */ 15 | @rotateDegrees: 110deg; 16 | @moveTransition: transform @transitionDuration @transitionEasing @transitionDelay; 17 | @slideTransition: transform @transitionDuration @defaultEasing @transitionDelay; -------------------------------------------------------------------------------- /semantic/src/themes/default/elements/segment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/globals/reset.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Reset 3 | *******************************/ -------------------------------------------------------------------------------- /semantic/src/themes/default/globals/site.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Global Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/chatroom.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/chatroom.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Chatroom 3 | *******************************/ -------------------------------------------------------------------------------- /semantic/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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/dimmer.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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.85); 9 | @lineHeight: 1; 10 | @perspective: 2000px; 11 | 12 | @duration: 0.5s; 13 | @transition: 14 | background-color @duration linear 15 | ; 16 | @zIndex: 1000; 17 | @textAlign: center; 18 | @verticalAlign: middle; 19 | @textColor: @white; 20 | @overflow: hidden; 21 | 22 | @blurredStartFilter: ~"blur(0px) grayscale(0)"; 23 | @blurredEndFilter: ~"blur(5px) grayscale(0.7)"; 24 | @blurredTransition: 800ms filter @defaultEasing; 25 | 26 | @blurredBackgroundColor: rgba(0, 0, 0, 0.6); 27 | @blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6); 28 | 29 | /* Hidden (Default) */ 30 | @hiddenOpacity: 0; 31 | 32 | /* Content */ 33 | @contentDisplay: table; 34 | @contentChildDisplay: table-cell; 35 | 36 | /* Visible */ 37 | @visibleOpacity: 1; 38 | 39 | /*------------------- 40 | Types 41 | --------------------*/ 42 | 43 | /* Page Dimmer*/ 44 | @transformStyle: ''; 45 | @pageDimmerPosition: fixed; 46 | 47 | 48 | /*------------------- 49 | Variations 50 | --------------------*/ 51 | 52 | /* Inverted */ 53 | @invertedBackgroundColor: rgba(255, 255, 255, 0.85); 54 | @invertedTextColor: @textColor; 55 | 56 | /* Simple */ 57 | @simpleZIndex: 1; 58 | @simpleStartBackgroundColor: rgba(0, 0, 0, 0); 59 | @simpleEndBackgroundColor: @backgroundColor; 60 | @simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0); 61 | @simpleInvertedEndBackgroundColor: @invertedBackgroundColor; -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/embed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Video Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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%; -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/modal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/nag.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/popup.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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: 0.75em; 30 | @arrowWidth: 1em; 31 | @arrowDistanceFromEdge: 1em; 32 | @boxArrowOffset: 0em; 33 | @popupDistanceAway: @arrowSize; 34 | 35 | 36 | /* Header */ 37 | @headerFontFamily: @headerFont; 38 | @headerFontSize: 1.125em; 39 | @headerDistance: 0.5em; 40 | @headerLineHeight: 1.2; 41 | 42 | /* Content Border */ 43 | @border: @borderWidth solid @borderColor; 44 | 45 | /* Arrow */ 46 | @arrowBackground: @white; 47 | @arrowZIndex: 2; 48 | @arrowJitter: 0.05em; 49 | @arrowOffset: -(@arrowSize / 2) + @arrowJitter; 50 | 51 | @arrowStroke: @borderWidth; 52 | @arrowColor: darken(@borderColor, 10); 53 | 54 | /* Arrow color by position */ 55 | @arrowTopBackground: @arrowBackground; 56 | @arrowCenterBackground: @arrowBackground; 57 | @arrowBottomBackground: @arrowBackground; 58 | 59 | @arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor; 60 | @leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor; 61 | @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor; 62 | @bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor; 63 | 64 | /*------------------- 65 | Coupling 66 | --------------------*/ 67 | 68 | /* Grid Inside Popup */ 69 | @nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */ 70 | @nestedGridWidth: ~"calc(100% + 1.75rem)"; 71 | 72 | /*------------------- 73 | States 74 | --------------------*/ 75 | 76 | @loadingZIndex: -1; 77 | 78 | /*------------------- 79 | Variations 80 | --------------------*/ 81 | 82 | /* Wide */ 83 | @wideWidth: 350px; 84 | @veryWideWidth: 550px; 85 | 86 | /* Inverted */ 87 | @invertedBackground: @black; 88 | @invertedColor: @white; 89 | @invertedBorder: none; 90 | @invertedBoxShadow: none; 91 | 92 | @invertedHeaderBackground: none; 93 | @invertedHeaderColor: @white; 94 | @invertedArrowColor: @invertedBackground; 95 | 96 | /* Arrow color by position */ 97 | @invertedArrowTopBackground: @invertedBackground; 98 | @invertedArrowCenterBackground: @invertedBackground; 99 | @invertedArrowBottomBackground: @invertedBackground; 100 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/progress.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/search.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/shape.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/sidebar.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/sticky.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/sticky.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Sticky 3 | *******************************/ 4 | 5 | @transsssitionDuration: @defaultDuration; 6 | @transition: none; 7 | @zIndex: 800; -------------------------------------------------------------------------------- /semantic/src/themes/default/modules/tab.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Tab Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/src/themes/default/views/ad.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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; -------------------------------------------------------------------------------- /semantic/src/themes/default/views/card.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/views/comment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/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 | 100 | /* Sizes */ 101 | @small: 0.9em; 102 | @medium: 1em; 103 | @large: 1.1em; 104 | @huge: 1.2em; -------------------------------------------------------------------------------- /semantic/src/themes/default/views/feed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/views/item.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/views/statistic.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/default/views/statistic.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Statistic 3 | *******************************/ 4 | 5 | /*------------------- 6 | View 7 | --------------------*/ 8 | 9 | @margin: 1em 0em; 10 | @textAlign: center; 11 | @maxWidth: auto; 12 | 13 | /* Group */ 14 | @horizontalSpacing: 1.5em; 15 | @rowSpacing: 2em; 16 | @groupMargin: 1em -@horizontalSpacing -@rowSpacing; 17 | 18 | /* Group Element */ 19 | @elementMargin: 0em @horizontalSpacing @rowSpacing; 20 | @elementMaxWidth: @maxWidth; 21 | 22 | /*------------------- 23 | Content 24 | --------------------*/ 25 | 26 | /* Value */ 27 | @valueFont: @pageFont; 28 | @valueFontWeight: normal; 29 | @valueLineHeight: 1em; 30 | @valueColor: @black; 31 | @valueTextTransform: uppercase; 32 | 33 | /* Label */ 34 | @labelSize: @relativeMedium; 35 | @topLabelDistance: 0rem; 36 | @bottomLabelDistance: 0rem; 37 | @labelFont: @headerFont; 38 | @labelFontWeight: bold; 39 | @labelColor: @textColor; 40 | @labelLineHeight: @relativeLarge; 41 | @labelTextTransform: uppercase; 42 | 43 | /* Text */ 44 | @textValueLineHeight: 1em; 45 | @textValueMinHeight: 2em; 46 | @textValueFontWeight: bold; 47 | 48 | /* Label Image */ 49 | @imageHeight: 3rem; 50 | @imageVerticalAlign: baseline; 51 | 52 | /*------------------- 53 | Types 54 | --------------------*/ 55 | 56 | @horizontalGroupElementMargin: 1em 0em; 57 | @horizontalLabelDistance: 0.75em; 58 | 59 | /*------------------- 60 | Variations 61 | --------------------*/ 62 | 63 | /* Floated */ 64 | @leftFloatedMargin: 0em 2em 1em 0em; 65 | @rightFloatedMargin: 0em 0em 1em 2em; 66 | 67 | /* Inverted */ 68 | @invertedValueColor: @white; 69 | @invertedLabelColor: @invertedTextColor; 70 | 71 | /* Item Width */ 72 | @itemGroupMargin: 0em 0em -@rowSpacing; 73 | @itemMargin: 0em 0em @rowSpacing; 74 | 75 | /* Size */ 76 | @miniTextValueSize: 1rem; 77 | @miniValueSize: 1.5rem; 78 | @miniHorizontalValueSize: 1.5rem; 79 | 80 | @tinyTextValueSize: 1rem; 81 | @tinyValueSize: 2rem; 82 | @tinyHorizontalValueSize: 2rem; 83 | 84 | @smallTextValueSize: 1rem; 85 | @smallValueSize: 3rem; 86 | @smallHorizontalValueSize: 2rem; 87 | 88 | @textValueSize: 2rem; 89 | @valueSize: 4rem; 90 | @horizontalValueSize: 3rem; 91 | 92 | @largeTextValueSize: 2.5rem; 93 | @largeValueSize: 5rem; 94 | @largeHorizontalValueSize: 4rem; 95 | 96 | @hugeTextValueSize: 2.5rem; 97 | @hugeValueSize: 6rem; 98 | @hugeHorizontalValueSize: 5rem; -------------------------------------------------------------------------------- /semantic/src/themes/duo/elements/loader.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/duo/elements/loader.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Loader 3 | *******************************/ 4 | 5 | @shapeBorderColor: @primaryColor @primaryColor @secondaryColor @secondaryColor; 6 | @invertedShapeBorderColor: @lightPrimaryColor @lightPrimaryColor @lightSecondaryColor @lightSecondaryColor; -------------------------------------------------------------------------------- /semantic/src/themes/fixed-width/collections/grid.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/fixed-width/collections/grid.variables: -------------------------------------------------------------------------------- 1 | /* Fixed Page Grid */ 2 | 3 | @mobileWidth: auto; 4 | @mobileMargin: 0em; 5 | @mobileGutter: 0em; 6 | 7 | @tabletWidth: auto; 8 | @tabletMargin: 0em; 9 | @tabletGutter: 8%; 10 | 11 | @computerWidth: 960px; 12 | @computerMargin: auto; 13 | @computerGutter: 0; 14 | 15 | @largeMonitorWidth: 1180px; 16 | @largeMonitorMargin: auto; 17 | @largeMonitorGutter: 0; 18 | 19 | @widescreenMonitorWidth: 1300px; 20 | @widescreenMargin: auto; 21 | @widescreenMonitorGutter: 0; 22 | 23 | @tableWidth: ''; -------------------------------------------------------------------------------- /semantic/src/themes/fixed-width/modules/modal.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/fixed-width/modules/modal.variables: -------------------------------------------------------------------------------- 1 | 2 | /* Responsive Widths */ 3 | @modalComputerWidth: 700px; 4 | @modalLargeMonitorWidth: 800px; 5 | @modalWidescreenMonitorWidth: 850px; 6 | 7 | @modalComputerMargin: 0em 0em 0em -(@modalComputerWidth / 2); 8 | @modalLargeMonitorMargin: 0em 0em 0em -(@modalLargeMonitorWidth / 2); 9 | @modalWidescreenMonitorMargin: 0em 0em 0em -(@modalWidescreenMonitorWidth / 2); 10 | 11 | 12 | /*------------------- 13 | Variations 14 | --------------------*/ 15 | 16 | /* Sizes */ 17 | @modalSmallRatio: 0.6; 18 | @modalLargeRatio: 1.2; 19 | 20 | /* Derived Responsive Sizes */ 21 | @modalSmallHeaderSize: 1.3em; 22 | @modalSmallComputerWidth: (@modalComputerWidth * @modalSmallRatio); 23 | @modalSmallLargeMonitorWidth: (@modalLargeMonitorWidth * @modalSmallRatio); 24 | @modalSmallWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalSmallRatio); 25 | 26 | @modalSmallComputerMargin: 0em 0em 0em -(@modalSmallComputerWidth / 2); 27 | @modalSmallLargeMonitorMargin: 0em 0em 0em -(@modalSmallLargeMonitorWidth / 2); 28 | @modalSmallWidescreenMonitorMargin: 0em 0em 0em -(@modalSmallWidescreenMonitorWidth / 2); 29 | 30 | @modalLargeHeaderSize: 1.3em; 31 | @modalLargeComputerWidth: (@modalComputerWidth * @modalLargeRatio); 32 | @modalLargeLargeMonitorWidth: (@modalLargeMonitorWidth * @modalLargeRatio); 33 | @modalLargeWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalLargeRatio); 34 | 35 | @modalLargeComputerMargin: 0em 0em 0em -(@modalLargeComputerWidth / 2); 36 | @modalLargeLargeMonitorMargin: 0em 0em 0em -(@modalLargeLargeMonitorWidth / 2); 37 | @modalLargeWidescreenMonitorMargin: 0em 0em 0em -(@modalLargeWidescreenMonitorWidth / 2); -------------------------------------------------------------------------------- /semantic/src/themes/flat/collections/form.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.form input[type="text"], 6 | .ui.form input[type="email"], 7 | .ui.form input[type="date"], 8 | .ui.form input[type="password"], 9 | .ui.form input[type="number"], 10 | .ui.form input[type="url"], 11 | .ui.form input[type="tel"] { 12 | border-bottom: 1px solid #DDDDDD; 13 | } 14 | 15 | .ui.form .selection.dropdown { 16 | border: none; 17 | box-shadow: none !important; 18 | border-bottom: 1px solid #DDDDDD; 19 | border-radius: 0em !important; 20 | } 21 | .ui.form .selection.dropdown > .menu { 22 | border-top-width: 1px !important; 23 | border-radius: @defaultBorderRadius !important; 24 | } 25 | 26 | .ui.form .ui.icon.input > .icon { 27 | width: 1em; 28 | } -------------------------------------------------------------------------------- /semantic/src/themes/flat/collections/form.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Form 3 | *******************************/ 4 | 5 | /*------------------- 6 | Elements 7 | --------------------*/ 8 | 9 | 10 | /* Text */ 11 | @paragraphMargin: 1em 0em; 12 | 13 | /* Field */ 14 | @fieldMargin: 0em 0em 1em; 15 | 16 | /* Form Label */ 17 | @labelFontSize: @relative11px; 18 | @labelTextTransform: uppercase; 19 | 20 | @groupedLabelTextTransform: none; 21 | 22 | /* Input */ 23 | @inputHorizontalPadding: 0.5em; 24 | @inputBackground: transparent; 25 | @inputBorder: none; 26 | @inputBorderRadius: 0em; 27 | @inputBoxShadow: none; 28 | 29 | @textAreaPadding: 1em; 30 | @textAreaBackground: transparent; 31 | @textAreaFocusBackground: #EEEEEE; 32 | @textAreaBorder: 1px solid #DDDDDD; 33 | 34 | /* Divider */ 35 | @dividerMargin: 1em 0em; 36 | 37 | /* Validation Prompt */ 38 | @validationMargin: 0em 0em 0em 1em; 39 | @validationArrowOffset: -0.3em; 40 | 41 | /*------------------- 42 | States 43 | --------------------*/ 44 | 45 | /* Disabled */ 46 | 47 | /* Focus */ 48 | @inputFocusPointerSize: 0px; 49 | @inputErrorPointerSize: 0px; 50 | 51 | /* Dropdown Error */ 52 | @dropdownErrorHoverBackground: #FFF2F2; 53 | @dropdownErrorActiveBackground: #FDCFCF; 54 | 55 | /* Focused Error */ 56 | @inputErrorFocusBackground: @negativeBackgroundColor; 57 | @inputErrorFocusColor: @negativeColorHover; 58 | @inputErrorFocusBorder: @negativeBorderColor; 59 | @inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset; 60 | 61 | /* Placeholder */ 62 | @inputPlaceholderColor: lighten(@inputColor, 55); 63 | @inputPlaceholderFocusColor: lighten(@inputColor, 35); 64 | @inputErrorPlaceholderColor: lighten(@formErrorColor, 10); 65 | @inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5); 66 | 67 | /* Loading */ 68 | @formLoaderDimmerColor: rgba(255, 255, 255, 0.6); 69 | @formLoaderPath: "@{imagePath}/loader-large.gif"; 70 | @formLoaderPosition: 50% 50%; 71 | 72 | /* (x) Wide Field */ 73 | @gutterWidth: 1.5em; 74 | -------------------------------------------------------------------------------- /semantic/src/themes/flat/globals/site.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/github/assets/fonts/octicons-local.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/github/assets/fonts/octicons-local.ttf -------------------------------------------------------------------------------- /semantic/src/themes/github/assets/fonts/octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/github/assets/fonts/octicons.ttf -------------------------------------------------------------------------------- /semantic/src/themes/github/assets/fonts/octicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/github/assets/fonts/octicons.woff -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/breadcrumb.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | 5 | @dividerOpacity: 1; 6 | @dividerSpacing: 0; 7 | @dividerSize: @big; 8 | @dividerColor: inherit; 9 | 10 | @huge: 1.5384em; 11 | 12 | -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/form.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.selection.dropdown { 6 | background-color: #FAFAFA; 7 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; 8 | border-color: #CCCCCC; 9 | } 10 | 11 | .ui.selection.dropdown:focus { 12 | box-shadow: 13 | 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 14 | 0px 0px 5px rgba(81, 167, 232, 0.5) 15 | ; 16 | } -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/form.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Form 3 | *******************************/ 4 | 5 | /*------------------- 6 | Elements 7 | --------------------*/ 8 | 9 | @inputBackground: #FAFAFA; 10 | @inputBorder: 1px solid #CCCCCC; 11 | @inputBoxShadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; 12 | @inputBorderRadius: 3px; 13 | 14 | @labelFontWeight: bold; 15 | @labelDistance: 6px; 16 | 17 | /*------------------- 18 | States 19 | --------------------*/ 20 | 21 | @inputFocusBackground: #FFFFFF; 22 | @inputFocusBoxShadow: 23 | 0px 1px 2px rgba(0, 0, 0, 0.075) inset, 24 | 0px 0px 5px rgba(81, 167, 232, 0.5) 25 | ; 26 | @inputFocusBorderColor: #51A7E8; 27 | @inputFocusBorderRadius: @inputBorderRadius; 28 | 29 | /*------------------- 30 | Types 31 | --------------------*/ 32 | 33 | 34 | /*------------------- 35 | Variations 36 | --------------------*/ 37 | 38 | /*------------------- 39 | Groups 40 | --------------------*/ 41 | -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/grid.variables: -------------------------------------------------------------------------------- 1 | 2 | @gutterWidth: 1.538rem; -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/menu.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.menu .item > .label { 6 | box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; 7 | } -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/menu.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Collection 3 | --------------------*/ 4 | 5 | @itemVerticalPadding: 1em; 6 | @itemHorizontalPadding: 1.25em; 7 | 8 | @background: #FFFFFF linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)); 9 | @fontWeight: normal; 10 | 11 | @activeBorderSize: 0em; 12 | 13 | @hoverBackground: rgba(0, 0, 0, 0.02); 14 | @downBackground: rgba(0, 0, 0, 0.06); 15 | 16 | @activeBackground: rgba(0, 0, 0, 0.04); 17 | @activeHoverBackground: rgba(0, 0, 0, 0.04); 18 | 19 | 20 | @headerBackground: rgba(0, 0, 0, 0.08); 21 | 22 | @subMenuMargin: 0.5em -0.6em 0; 23 | @subMenuHorizontalPadding: 0.7em; 24 | 25 | @arrowHoverColor: #EEEEEE; 26 | @arrowActiveColor: #EEEEEE; 27 | @arrowVerticalHoverColor: #F4F4F4; 28 | @arrowVerticalActiveColor: #F4F4F4; 29 | 30 | @dividerBackground: #E8E8E8; 31 | @verticalDividerBackground: #E8E8E8; 32 | 33 | /*------------------- 34 | Elements 35 | --------------------*/ 36 | 37 | @buttonOffset: -0.15em; 38 | @buttonVerticalPadding: 0.75em; 39 | 40 | /*------------------- 41 | Types 42 | --------------------*/ 43 | 44 | @paginationMinWidth: 3.5em; 45 | 46 | @tieredActiveItemBackground: #F5F5F5; 47 | @tieredActiveMenuBackground: #F5F5F5; 48 | 49 | /*------------------- 50 | Variations 51 | --------------------*/ 52 | 53 | @verticalBackground: #FFFFFF; 54 | @verticalItemBackground: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 55 | 56 | @invertedBackground: @black linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.0)); 57 | @invertedBoxShadow : 58 | 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 59 | 0px 0px 0px 1px rgba(255, 255, 255, 0.15) 60 | ; 61 | @secondaryVerticalPadding: 0.75em; -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/message.overrides: -------------------------------------------------------------------------------- 1 | .ui.info.message { 2 | background: linear-gradient(#D8EBF8, #D0E3EF); 3 | } 4 | .ui.error.message { 5 | background: linear-gradient(#F8D8D8, #EFD0D0); 6 | } 7 | .ui.warning.message { 8 | background: linear-gradient(#FFE3C8, #F5DAC0); 9 | } 10 | .ui.success.message { 11 | } 12 | -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/message.variables: -------------------------------------------------------------------------------- 1 | @background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)) #FEFEFE; 2 | @boxShadow: 3 | 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset, 4 | 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset 5 | ; 6 | @verticalPadding: 15px; 7 | @horizontalPadding: 15px; 8 | 9 | @headerFontSize: 1.15em; 10 | 11 | @infoTextColor: #264C72; 12 | @warningTextColor: #613A00; 13 | @errorTextColor: #991111; 14 | 15 | @floatingBoxShadow: 16 | 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 17 | 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 18 | 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset 19 | ; 20 | 21 | @infoBorderColor: #97C1DA; 22 | @errorBorderColor: #DA9797; 23 | @warningBorderColor: #DCA874; 24 | 25 | @small: 12px; 26 | @medium: 13px; 27 | @large: 14px; 28 | @huge: 16px; 29 | @massive: 18px; 30 | -------------------------------------------------------------------------------- /semantic/src/themes/github/collections/table.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | 5 | @background: #F8F8F8; 6 | 7 | @cellVerticalPadding: @relative6px; 8 | @cellHorizontalPadding: @relative8px; -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/button.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Button Variables 3 | --------------------*/ 4 | 5 | /* Button Variables */ 6 | @pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; 7 | @textTransform: none; 8 | @fontWeight: bold; 9 | @textColor: #333333; 10 | 11 | @textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9); 12 | @invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25); 13 | 14 | @borderRadius: @relativeBorderRadius; 15 | 16 | @verticalPadding: 0.75em; 17 | @horizontalPadding: 1.15em; 18 | 19 | @backgroundColor: #FAFAFA; 20 | @backgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); 21 | @boxShadow: 22 | 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 23 | 0 0 0 1px rgba(0, 0, 0, 0.13) inset, 24 | 0 1px 3px rgba(0, 0, 0, 0.05) 25 | ; 26 | 27 | @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); 28 | @coloredBoxShadow: 29 | 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 30 | 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 31 | 0 1px 3px rgba(0, 0, 0, 0.05) 32 | ; 33 | 34 | @hoverBackgroundColor: #E0E0E0; 35 | @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); 36 | @hoverBoxShadow: @boxShadow; 37 | 38 | @downBackgroundColor: ''; 39 | @downBackgroundImage: ''; 40 | @downBoxShadow: 41 | 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 42 | 0 0 0 1px rgba(0, 0, 0, 0.13) inset, 43 | 0 3px 5px rgba(0, 0, 0, 0.15) inset !important 44 | ; 45 | @activeBackgroundColor: #DFDFDF; 46 | @activeBackgroundImage: none; 47 | @activeBoxShadow: 48 | 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 49 | 0 0 0 1px rgba(0, 0, 0, 0.13) inset, 50 | 0 3px 5px rgba(0, 0, 0, 0.1) inset !important 51 | ; 52 | 53 | @labeledIconBackgroundColor: transparent; 54 | @labeledIconBorder: transparent; 55 | @labeledIconPadding: (@horizontalPadding + 2.25em); 56 | 57 | @basicFontWeight: bold; 58 | @basicTextColor: @linkColor; 59 | @basicHoverTextColor: @linkHoverColor; 60 | 61 | @basicHoverBackground: #E0E0E0; 62 | 63 | @blue: #3072B3; 64 | @green: #60B044; 65 | @black: #5D5D5D; 66 | 67 | @primaryColor: @blue; 68 | @secondaryColor: @black; 69 | 70 | @mini: 0.6rem; 71 | @tiny: 0.7rem; 72 | @small: 0.85rem; 73 | @medium: 0.92rem; 74 | @large: 1rem; 75 | @big: 1.125rem; 76 | @huge: 1.25rem; 77 | @massive: 1.3rem; 78 | -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/header.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Header 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @iconMargin: @4px; 10 | -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/icon.variables: -------------------------------------------------------------------------------- 1 | @fontPath: '../../themes/github/assets/fonts'; 2 | @fontName: 'octicons'; 3 | @fallbackSRC: ''; 4 | 5 | @width: 1em; 6 | @height: 1em; 7 | 8 | @small: 13px; 9 | @medium: 16px; 10 | @large: 18px; 11 | @big : 20px; 12 | @huge: 28px; 13 | @massive: 32px; -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/image.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | 5 | @miniWidth: 20px; -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/input.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Input 3 | *******************************/ 4 | 5 | /* Labeled Input has padding */ 6 | .ui.labeled.input { 7 | background-color: @white; 8 | border: @borderWidth solid @borderColor; 9 | border-radius: @borderRadius !important; 10 | } 11 | .ui.labeled.input input { 12 | box-shadow: none !important; 13 | border: none !important; 14 | } 15 | .ui.labeled.input .label { 16 | font-weight: normal; 17 | align-self: center; 18 | font-size: 12px; 19 | margin: @2px; 20 | border-radius: @borderRadius !important; 21 | padding: @relative5px @relative8px !important; 22 | } 23 | 24 | /* GitHub Uses Focus Group with class name added */ 25 | .ui.labeled.input.focused { 26 | border-color: @focusBorderColor; 27 | box-shadow: @focusBoxShadow; 28 | } 29 | .ui.labeled.input.focused .label { 30 | background-color: #E1EAF5; 31 | color: #4078C0; 32 | } -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/input.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Input 3 | *******************************/ 4 | 5 | @boxShadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; 6 | 7 | @verticalPadding: @relative7px; 8 | @horizontalPadding: @relative8px; 9 | 10 | @borderColor: #CCCCCC; 11 | 12 | @focusBorderColor: #51A7E8; 13 | @focusBoxShadow: 14 | 0 1px 2px rgba(0, 0, 0, 0.075) inset, 15 | 0 0 5px rgba(81, 167, 232, 0.5) 16 | ; -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/label.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Overrides 3 | *******************************/ 4 | 5 | /* Notification Label on GitHub */ 6 | .ui.floating.blue.label { 7 | border: 2px solid #f3f3f3 !important; 8 | background-image: linear-gradient(#7aa1d3, #4078c0) !important; 9 | } -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/label.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | 5 | -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/segment.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/segment.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Standard 3 | *******************************/ 4 | 5 | /*------------------- 6 | Segment 7 | --------------------*/ 8 | 9 | @segmentBorderWidth: 1px; 10 | @border: 1px solid #D8DEE2; 11 | @boxShadow: 0px 1px 3px rgba(0, 0, 0, 0.075); 12 | 13 | @verticalPadding: 20px; 14 | @horizontalPadding: 20px; 15 | 16 | @borderRadius: 4px; 17 | 18 | /******************************* 19 | Variations 20 | *******************************/ 21 | 22 | 23 | /* Raised */ 24 | @raisedBoxShadow: 0px 1px 3px rgba(0, 0, 0, 0.075); 25 | 26 | /* Colors */ 27 | @coloredBorderSize: 0.5em; 28 | 29 | /* Ordinality */ 30 | @secondaryBackground: #F9F9F9; 31 | @secondaryColor: @textColor; 32 | 33 | @tertiaryBackground: #F0F0F0; 34 | @tertiaryColor: @textColor; 35 | 36 | @secondaryInvertedBackground: #555555; 37 | @secondaryInvertedColor: @textColor; 38 | 39 | @tertiaryInvertedBackground: #333333; 40 | @tertiaryInvertedColor: @textColor; 41 | -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/step.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.steps .step:after { 6 | display: none; 7 | } 8 | .ui.steps .completed.step:before { 9 | opacity: 0.5; 10 | } 11 | 12 | .ui.steps .step.active:after { 13 | display: block; 14 | border: none; 15 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 16 | border-left: 1px solid rgba(0, 0, 0, 0.2); 17 | } 18 | .ui.vertical.steps .step.active:after { 19 | display: block; 20 | border: none; 21 | top: 50%; 22 | right: 0%; 23 | border-left: none; 24 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 25 | border-right: 1px solid rgba(0, 0, 0, 0.2); 26 | } -------------------------------------------------------------------------------- /semantic/src/themes/github/elements/step.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Step Variables 3 | --------------------*/ 4 | 5 | /* Step */ 6 | @background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.07)); 7 | @verticalPadding: 1em; 8 | 9 | @arrowDisplay: none; 10 | @lastArrowDisplay: none; 11 | @activeArrowDisplay: block; 12 | @activeLastArrowDisplay: block; 13 | 14 | /* Group */ 15 | @stepsBackground: #FFFFFF; 16 | @stepsBoxShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); 17 | 18 | /* States */ 19 | @activeBackground: #FFFFFF; 20 | @activeIconColor: @darkTextColor; 21 | 22 | /* Arrow */ 23 | @arrowTopOffset: 100%; 24 | @arrowRightOffset: 50%; 25 | @arrowBorderColor: rgba(0, 0, 0, 0.2); 26 | @arrowBorderWidth: 0px 0px @borderWidth @borderWidth; 27 | -------------------------------------------------------------------------------- /semantic/src/themes/github/globals/site.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Global Variables 3 | *******************************/ 4 | 5 | @pageMinWidth : 1049px; 6 | @pageOverflowX : visible; 7 | 8 | @emSize: 13px; 9 | @fontSize : 13px; 10 | @fontName : 'Arial'; 11 | @importGoogleFonts : false; 12 | 13 | @h1: 2.25em; 14 | 15 | @defaultBorderRadius: 0.2307em; 16 | 17 | @disabledOpacity: 0.3; 18 | 19 | /* Colors */ 20 | @blue: #80A6CD; 21 | @green: #78CB5B; 22 | @orange: #D26911; 23 | @black: #333333; 24 | @primaryColor: @green; 25 | @secondaryColor: @black; 26 | 27 | /* Links */ 28 | @linkColor: #4078C0; 29 | @linkHoverColor: @linkColor; 30 | @linkHoverUnderline: underline; 31 | 32 | /* Borders */ 33 | @borderColor: rgba(0, 0, 0, 0.13); 34 | @solidBorderColor: #DDDDDD; 35 | @internalBorderColor: rgba(0, 0, 0, 0.06); 36 | @selectedBorderColor: #51A7E8; 37 | 38 | /* Breakpoints */ 39 | @largeMonitorBreakpoint: 1049px; 40 | @computerBreakpoint: @largeMonitorBreakpoint; 41 | @tabletBreakpoint: @largeMonitorBreakpoint; 42 | 43 | @infoBackgroundColor: #E6F1F6; 44 | 45 | @infoTextColor: #4E575B; 46 | @warningTextColor: #613A00; 47 | @errorTextColor: #991111; -------------------------------------------------------------------------------- /semantic/src/themes/github/modules/dropdown.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | 5 | @transition: 6 | width @defaultDuration @defaultEasing 7 | ; 8 | 9 | @menuPadding: 0px; 10 | 11 | @itemVerticalPadding: @relative8px; 12 | @itemHorizontalPadding: @relative14px; 13 | 14 | @dropdownIconMargin: 0em 0em 0em 2px; 15 | 16 | @raisedBoxShadow: 0px 3px 12px rgba(0, 0, 0, 0.15); 17 | 18 | @menuPadding: @relative5px 0px; 19 | 20 | @menuHeaderMargin: 0em; 21 | @menuHeaderPadding: @relative6px @itemHorizontalPadding; 22 | @menuHeaderFontSize: @relative12px; 23 | @menuHeaderTextTransform: none; 24 | @menuHeaderFontWeight: normal; 25 | @menuHeaderColor: #767676; 26 | 27 | @menuDividerMargin: @relative8px 0em; 28 | 29 | @disabledOpacity: 0.6; 30 | 31 | /* States */ 32 | @hoveredItemBackground: #4078C0; 33 | @hoveredItemColor: @white; 34 | 35 | @pointingArrowSize: @relative9px; 36 | -------------------------------------------------------------------------------- /semantic/src/themes/github/modules/popup.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Popup 3 | *******************************/ 4 | 5 | 6 | @small: @relative10px; 7 | @medium: @relative11px; 8 | @large: @relative13px; 9 | 10 | @verticalPadding: @relative7px; 11 | @horizontalPadding: @relative11px; 12 | 13 | -------------------------------------------------------------------------------- /semantic/src/themes/gmail/collections/message.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/gmail/collections/message.overrides -------------------------------------------------------------------------------- /semantic/src/themes/gmail/collections/message.variables: -------------------------------------------------------------------------------- 1 | @background: #F3F3F3; 2 | 3 | @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; 4 | @borderRadius: 4px; 5 | @verticalPadding: 7px; 6 | @horizontalPadding: 15px; 7 | 8 | @headerFontSize: 1em; 9 | 10 | @floatingBoxShadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 11 | 12 | @iconSize: 1.5em; 13 | @iconDistance: 1em; 14 | 15 | @warningBackgroundColor: #F9EDBE; 16 | -------------------------------------------------------------------------------- /semantic/src/themes/instagram/views/card.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | 6 | @import url(http://fonts.googleapis.com/css?family=Montserrat:700,400); 7 | 8 | .ui.cards > .card, 9 | .ui.card { 10 | font-family: 'Montserrat'; 11 | font-size-adjust: 0.5; 12 | } -------------------------------------------------------------------------------- /semantic/src/themes/instagram/views/card.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Card 3 | *******************************/ 4 | 5 | /*------------------- 6 | View 7 | --------------------*/ 8 | 9 | @borderBoxShadow: none; 10 | @shadowBoxShadow: none; 11 | @boxShadow: none; 12 | 13 | 14 | @internalBorderColor: #EDEDEE; 15 | @border: 1px solid #EDEDEE; 16 | 17 | @contentPadding: 14px 20px; 18 | 19 | @metaColor: #A5A7AA; 20 | 21 | @linkHoverRaiseDistance: 0px; 22 | @linkHoverBoxShadow: none; 23 | @linkHoverBorder: 1px solid #D0D0D8; -------------------------------------------------------------------------------- /semantic/src/themes/material/collections/menu.overrides: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Roboto); 2 | -------------------------------------------------------------------------------- /semantic/src/themes/material/collections/menu.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Menu 3 | *******************************/ 4 | 5 | @fontFamily: 'Roboto', Arial, sans-serif; 6 | @boxShadow: 0px 1px 6px rgba(0, 0, 0, 0.2); 7 | @dividerSize: 0px; 8 | 9 | @itemVerticalPadding: @relativeLarge; 10 | @itemHorizontaPadding: @relativeLarge; -------------------------------------------------------------------------------- /semantic/src/themes/material/elements/button.overrides: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Roboto); 2 | 3 | .ui.primary.button:hover { 4 | box-shadow: 5 | 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset, 6 | 0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important 7 | ; 8 | } 9 | 10 | .ui.secondary.button:hover { 11 | box-shadow: 12 | 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset, 13 | 0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important 14 | ; 15 | } -------------------------------------------------------------------------------- /semantic/src/themes/material/elements/button.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Button 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @googleFontName : 'Roboto'; 10 | @pageFont : 'Roboto', Arial, sans-serif; 11 | 12 | @medium: 13px; 13 | 14 | @verticalPadding : 0.8em; 15 | @horizontalPadding : 0.8em; 16 | @borderRadius : @relative3px; 17 | @color : #222222; 18 | @fontWeight : normal; 19 | @textTransform : none; 20 | 21 | @backgroundColor : @white; 22 | @backgroundImage : linear-gradient(transparent, rgba(0, 0, 0, 0.02)); 23 | 24 | @solidBorderColor: #DDDDDD; 25 | 26 | @borderBoxShadowColor: @solidBorderColor; 27 | @borderBoxShadow: 0px 0px 0px 1px @solidBorderColor inset; 28 | @shadowBoxShadow: 0px 0px 0px 0px transparent; 29 | 30 | @transition: 31 | opacity 0.3s @defaultEasing, 32 | background-color 0.3s @defaultEasing, 33 | color 0.3s @defaultEasing, 34 | box-shadow 0.3s @defaultEasing, 35 | background 0.3s @defaultEasing 36 | ; 37 | /*------------------- 38 | State 39 | --------------------*/ 40 | 41 | @hoverBackgroundColor: @white; 42 | @hoverBoxShadow: 43 | @borderBoxShadow, 44 | 0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important 45 | ; 46 | 47 | @downBackgroundColor: @white; 48 | @downBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)); 49 | @downTextColor: #222222; 50 | @downBoxShadow: @borderBoxShadow; 51 | 52 | @activeBackgroundColor: #F0F0F0; 53 | @activeBoxShadow: 0px 0px 0px 1px #DDDDDD; 54 | 55 | /*------------------- 56 | Variations 57 | --------------------*/ 58 | 59 | /* Basic */ 60 | @basicBorderSize: 0px; 61 | @basicBorderRadius: 4px; 62 | @basicColoredBorderSize: 1px; 63 | @basicHoverBackground: @white; 64 | @basicHoverBoxShadow: @hoverBoxShadow; 65 | @basicDownBackground: @white; 66 | @basicDownBoxShadow: @downBoxShadow; 67 | 68 | @basicActiveBackground: #FFFFFF; 69 | @basicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); 70 | 71 | /* Labeled */ 72 | @labeledIconBackgroundColor: transparent; 73 | @labeledIconWidth: 2em; 74 | 75 | @labeledLabelBorderOffset: 0px; 76 | 77 | /* Colored */ 78 | @coloredBackgroundImage : @subtleGradient; 79 | @coloredBoxShadow : 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; 80 | 81 | /* Primary */ 82 | @primaryColor : #4184F3; 83 | @primaryBoxShadow : 0px 0px 0px 1px #0157E4 inset; 84 | 85 | /* Secondary */ 86 | @secondaryColor : #EEEEEE; 87 | @secondaryBackgroundImage : @backgroundImage; 88 | @secondaryTextColor : @textColor; 89 | @secondaryBoxShadow : @borderBoxShadow; 90 | 91 | /* Emotive */ 92 | @positiveColor: #3D9400; 93 | @negativeColor: #D34836; 94 | 95 | /* Inverted */ 96 | @invertedBorderSize: 1px; 97 | 98 | -------------------------------------------------------------------------------- /semantic/src/themes/material/elements/header.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | @import url(http://fonts.googleapis.com/css?family=Roboto); 6 | 7 | h1.ui.header, 8 | .ui.huge.header { 9 | font-weight: normal; 10 | } 11 | 12 | h2.ui.header, 13 | .ui.large.header { 14 | font-weight: normal; 15 | } -------------------------------------------------------------------------------- /semantic/src/themes/material/elements/header.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Header 3 | --------------------*/ 4 | 5 | @headerFont : 'Roboto', Arial, sans-serif; 6 | @fontWeight: normal; 7 | 8 | @iconSize: 2em; 9 | @iconOffset: 0.2em; 10 | @iconAlignment: top; 11 | 12 | @subHeaderFontSize: 1rem; 13 | 14 | 15 | /* HTML Headings */ 16 | @h1 : 2.25rem; 17 | @h2 : 2rem; 18 | @h3 : 1.75rem; 19 | @h4 : 1.5rem; 20 | @h5 : 1.25rem; 21 | 22 | -------------------------------------------------------------------------------- /semantic/src/themes/material/globals/site.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/material/globals/site.overrides -------------------------------------------------------------------------------- /semantic/src/themes/material/modules/dropdown.overrides: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Roboto:400,700); 2 | 3 | .ui.dropdown { 4 | font-family: 'Roboto'; 5 | } -------------------------------------------------------------------------------- /semantic/src/themes/material/modules/dropdown.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Menu 3 | *******************************/ 4 | 5 | @menuBorderRadius: @borderRadius; 6 | @menuBorderColor: #DADADA; 7 | @menuBoxShadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 8 | 9 | @menuPadding: @relative8px 0em; 10 | @itemVerticalPadding: 1em; 11 | @itemHorizontalPadding: 1.5em; 12 | 13 | @menuHeaderFontSize: @small; 14 | @menuHeaderFontWeight: bold; 15 | @menuHeaderTextTransform: none; 16 | 17 | @selectionBorderEmWidth: 0em; 18 | @selectionItemDivider: none; 19 | 20 | @labelBoxShadow: none; -------------------------------------------------------------------------------- /semantic/src/themes/material/modules/modal.overrides: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Roboto); 2 | 3 | .ui.modal .header { 4 | font-family: "Roboto", Arial, Sans-serif !important; 5 | font-weight: 400 !important; 6 | } -------------------------------------------------------------------------------- /semantic/src/themes/material/modules/modal.variables: -------------------------------------------------------------------------------- 1 | @boxShadow: 0px 10px 18px rgba(0, 0, 0, 0.22); 2 | @borderRadius: 0em; 3 | 4 | 5 | @headerBackground: @white; 6 | @headerVerticalPadding: 1.7142rem; 7 | @headerHorizontalPadding: 1.7142rem; 8 | @headerFontWeight: 400; 9 | @headerFontFamily: 'Roboto', "Helvetica Neue", Arial, sans-serif; 10 | @headerBorder: none; 11 | 12 | @contentPadding: 1rem 2rem 2rem; 13 | 14 | @actionBorder: none; 15 | @actionBackground: @white; -------------------------------------------------------------------------------- /semantic/src/themes/pulsar/elements/loader.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Theme Overrides 3 | *******************************/ 4 | 5 | .ui.loader:after { 6 | -webkit-animation: loader-pulsar 2s infinite linear; 7 | animation: loader-pulsar 2s infinite linear; 8 | } 9 | 10 | @-webkit-keyframes loader-pulsar { 11 | 0% { 12 | -webkit-transform: rotate(0deg); 13 | transform: rotate(0deg); 14 | opacity: 0; 15 | } 16 | 20% { 17 | -webkit-transform: rotate(360deg); 18 | transform: rotate(360deg); 19 | } 20 | 40% { 21 | -webkit-transform: rotate(740deg); 22 | transform: rotate(740deg); 23 | opacity: 1; 24 | } 25 | 60% { 26 | -webkit-transform: rotate(1120deg); 27 | transform: rotate(1120deg); 28 | opacity: 1; 29 | } 30 | 80% { 31 | -webkit-transform: rotate(1440deg); 32 | transform: rotate(1440deg); 33 | } 34 | 100% { 35 | -webkit-transform: rotate(1800deg); 36 | transform: rotate(1800deg); 37 | opacity: 0; 38 | } 39 | } 40 | 41 | @keyframes loader-pulsar { 42 | 0% { 43 | -webkit-transform: rotate(0deg); 44 | transform: rotate(0deg); 45 | opacity: 0; 46 | } 47 | 20% { 48 | -webkit-transform: rotate(360deg); 49 | transform: rotate(360deg); 50 | } 51 | 40% { 52 | -webkit-transform: rotate(740deg); 53 | transform: rotate(740deg); 54 | opacity: 1; 55 | } 56 | 60% { 57 | -webkit-transform: rotate(1120deg); 58 | transform: rotate(1120deg); 59 | opacity: 1; 60 | } 61 | 80% { 62 | -webkit-transform: rotate(1440deg); 63 | transform: rotate(1440deg); 64 | } 65 | 100% { 66 | -webkit-transform: rotate(1800deg); 67 | transform: rotate(1800deg); 68 | opacity: 0; 69 | } 70 | } -------------------------------------------------------------------------------- /semantic/src/themes/pulsar/elements/loader.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Loader 3 | *******************************/ 4 | 5 | @loaderSpeed: 2s; 6 | @loaderLineColor: @primaryColor; 7 | @invertedLoaderLineColor: @lightPrimaryColor; 8 | -------------------------------------------------------------------------------- /semantic/src/themes/raised/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/raised/elements/button.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Button 3 | *******************************/ 4 | 5 | /*------------------- 6 | Element 7 | --------------------*/ 8 | 9 | @backgroundColor: #F8F8F8; 10 | @backgroundImage: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); 11 | @verticalAlign: middle; 12 | @borderRadius: 0.4em; 13 | @borderBoxShadowColor: @borderColor; 14 | 15 | /* Shadow */ 16 | @shadowDistance: 0.3em; 17 | @verticalPadding: 1em; 18 | @horizontalPadding: 2em; 19 | 20 | /* transition box shadow as well */ 21 | @transition: 22 | opacity @defaultDuration @defaultEasing, 23 | background-color @defaultDuration @defaultEasing, 24 | box-shadow @defaultDuration @defaultEasing, 25 | color @defaultDuration @defaultEasing, 26 | background @defaultDuration @defaultEasing 27 | ; -------------------------------------------------------------------------------- /semantic/src/themes/resetcss/globals/reset.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | /** 6 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 7 | * http://cssreset.com 8 | */ 9 | 10 | html, body, div, span, applet, object, iframe, 11 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 12 | a, abbr, acronym, address, big, cite, code, 13 | del, dfn, em, img, ins, kbd, q, s, samp, 14 | small, strike, strong, sub, sup, tt, var, 15 | b, u, i, center, 16 | dl, dt, dd, ol, ul, li, 17 | fieldset, form, label, legend, 18 | table, caption, tbody, tfoot, thead, tr, th, td, 19 | article, aside, canvas, details, embed, 20 | figure, figcaption, footer, header, hgroup, 21 | menu, nav, output, ruby, section, summary, 22 | time, mark, audio, video { 23 | margin: 0; 24 | padding: 0; 25 | border: 0; 26 | font-size: 100%; 27 | font: inherit; 28 | vertical-align: baseline; 29 | } 30 | /* HTML5 display-role reset for older browsers */ 31 | article, aside, details, figcaption, figure, 32 | footer, header, hgroup, menu, nav, section { 33 | display: block; 34 | } 35 | body { 36 | line-height: 1; 37 | } 38 | ol, ul { 39 | list-style: none; 40 | } 41 | blockquote, q { 42 | quotes: none; 43 | } 44 | blockquote:before, blockquote:after, 45 | q:before, q:after { 46 | content: ''; 47 | content: none; 48 | } 49 | table { 50 | border-collapse: collapse; 51 | border-spacing: 0; 52 | } -------------------------------------------------------------------------------- /semantic/src/themes/resetcss/globals/reset.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Reset 3 | *******************************/ -------------------------------------------------------------------------------- /semantic/src/themes/round/elements/button.overrides: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyelemary/tdd-react-redux-isomorphic/033dd2975f33e5931f5a0724b9002c75b52cf86f/semantic/src/themes/round/elements/button.overrides -------------------------------------------------------------------------------- /semantic/src/themes/rtl/globals/site.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Global Overrides 3 | *******************************/ 4 | 5 | /* Import Droid Arabic Kufi */ 6 | @import 'http://fonts.googleapis.com/earlyaccess/droidarabickufi.css'; 7 | -------------------------------------------------------------------------------- /semantic/src/themes/rtl/globals/site.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Site Settings 3 | *******************************/ 4 | 5 | /*------------------- 6 | Fonts 7 | --------------------*/ 8 | 9 | @googleFontName : 'Droid Sans'; 10 | 11 | /* Kufi imported in site.overrides */ 12 | @headerFont : 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; 13 | @pageFont : 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; 14 | 15 | -------------------------------------------------------------------------------- /semantic/src/themes/striped/modules/progress.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | 5 | .ui.progress .bar { 6 | background-size: 30px 30px; 7 | background-image: 8 | linear-gradient( 9 | 135deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%, 10 | transparent 50%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.08) 75%, 11 | transparent 75%, transparent 12 | ) 13 | ; 14 | } 15 | 16 | .ui.progress.active .bar:after { 17 | animation: none; 18 | } 19 | .ui.progress.active .bar { 20 | animation: progress-striped 3s linear infinite; 21 | } 22 | @keyframes progress-striped { 23 | 0% { 24 | background-position: 0px 0; 25 | } 26 | 100% { 27 | background-position: 60px 0; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /semantic/src/themes/striped/modules/progress.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Progress 3 | *******************************/ 4 | -------------------------------------------------------------------------------- /semantic/src/themes/timeline/views/feed.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | User Variable Overrides 3 | *******************************/ 4 | 5 | .ui.feed > .event .label { 6 | border-left: 3px solid #DDDDDD; 7 | } 8 | .ui.feed > .event:last-child .label { 9 | border-left-color: transparent; 10 | } 11 | 12 | .ui.feed > .event > .label { 13 | margin-left: 1.6em; 14 | } 15 | 16 | .ui.feed > .event > .label > img, 17 | .ui.feed > .event > .label > .icon { 18 | background-color: #009FDA; 19 | border-radius: 500rem; 20 | color: #FFFFFF; 21 | width: 3rem; 22 | height: 3rem; 23 | line-height: 1.5; 24 | left: -1.6rem; 25 | opacity: 1; 26 | position: relative; 27 | } 28 | -------------------------------------------------------------------------------- /semantic/src/themes/timeline/views/feed.variables: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Feed 3 | *******************************/ 4 | 5 | /*------------------- 6 | Elements 7 | --------------------*/ 8 | 9 | @eventMargin: 0em; 10 | @eventDivider: none; 11 | @eventPadding: 0em; 12 | 13 | /* Event Label */ 14 | @labelWidth: 3em; 15 | @labelHeight: auto; 16 | 17 | @labeledContentMargin: 0.75em 0em 2em 0.75em; 18 | 19 | /* Icon */ 20 | @iconLabelBackground: @primaryColor; 21 | @iconLabelBorderRadius: @circularRadius; 22 | @iconLabelColor: @white; 23 | 24 | /* Metadata Group */ 25 | @metadataDisplay: inline-block; 26 | @metadataMargin: 1em 0em 0em; 27 | @metadataBackground: @white @subtleGradient; 28 | @metadataBorder: 1px solid @solidBorderColor; 29 | @metadataBorderRadius: 0.25em; 30 | @metadataBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.05); 31 | @metadataPadding: 0.5em 1em; 32 | @metadataColor: rgba(0, 0, 0, 0.6); 33 | 34 | /*------------------- 35 | Variations 36 | --------------------*/ 37 | -------------------------------------------------------------------------------- /semantic/src/themes/twitter/elements/button.overrides: -------------------------------------------------------------------------------- 1 | /******************************* 2 | Overrides 3 | *******************************/ 4 | 5 | .ui.primary.button { 6 | box-shadow: 7 | 0px 0px 0px 1px #3B88C3 inset, 8 | 0 2px 0 rgba(255, 255, 255, 0.15) inset 9 | ; 10 | } 11 | .ui.primary.button > .icon { 12 | color: #FFFFFF; 13 | } 14 | -------------------------------------------------------------------------------- /semantic/src/themes/twitter/elements/button.variables: -------------------------------------------------------------------------------- 1 | /*------------------- 2 | Global Variables 3 | --------------------*/ 4 | 5 | @pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; 6 | @textColor: #66757F; 7 | @blue: #55ACEE; 8 | 9 | /*------------------- 10 | Button Variables 11 | --------------------*/ 12 | 13 | @backgroundColor: #F5F8FA; 14 | @backgroundImage: linear-gradient(@white, @backgroundColor); 15 | @color: #66757F; 16 | @borderBoxShadowColor: #E1E8ED; 17 | 18 | @textTransform: none; 19 | @fontWeight: bold; 20 | @textColor: #333333; 21 | 22 | @horizontalPadding: 1.284em; 23 | @verticalPadding: 0.8571em; 24 | 25 | @activeBackgroundColor: rgba(0, 0, 0, 0.1); 26 | 27 | @primaryColor: @blue; 28 | @coloredBackgroundImage: @subtleGradient; 29 | 30 | 31 | /*------------------- 32 | States 33 | --------------------*/ 34 | 35 | @hoverBackgroundColor: #E1E8ED; 36 | @hoverBackgroundImage: linear-gradient(@white, @hoverBackgroundColor); 37 | @hoverColor: #292F33; 38 | 39 | @downBackgroundColor: #E1E8ED; 40 | @downColor: #292F33; 41 | @downPressedShadow: 0px 1px 4px rgba(0, 0, 0, 0.2) inset; 42 | 43 | @labeledIconBackgroundColor: rgba(85, 172, 238, 0.05); 44 | @labeledIconBorder: rgba(0, 0, 0, 0.1); 45 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Banner from './header/components/Banner'; 3 | 4 | const App = ({ children }) => { 5 | return ( 6 |
7 | 8 |
{children}
9 |
10 | ); 11 | }; 12 | 13 | App.propTypes = { 14 | children: React.PropTypes.element 15 | }; 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/App.less: -------------------------------------------------------------------------------- 1 | body, html, #app, #app > div { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | 6 | body { 7 | background-color: @backgroundGray; 8 | * { 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | } 13 | 14 | header { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | right: 0; 19 | z-index: 999; 20 | } 21 | 22 | main { 23 | margin-top: 128px; 24 | } 25 | -------------------------------------------------------------------------------- /src/api/search-route.js: -------------------------------------------------------------------------------- 1 | import { Router } from 'express'; 2 | import SearchService from './search-service'; 3 | 4 | const router = Router(); 5 | 6 | router.get('/:query', (request, response) => { 7 | SearchService.searchForQuery(request.params.query, response); 8 | }); 9 | 10 | export default router; 11 | -------------------------------------------------------------------------------- /src/api/search-service.js: -------------------------------------------------------------------------------- 1 | import HTTPStatus from 'http-status-codes'; 2 | import fetch from 'isomorphic-fetch'; 3 | require('es6-promise').polyfill(); 4 | 5 | const searchServiceUrl = 'http://localhost:8081'; 6 | const searchUrl = `${searchServiceUrl}/consultants/search/`; 7 | 8 | export default class SearchService { 9 | static searchForQuery(query, res) { 10 | fetch(searchUrl, { 11 | method: 'POST', 12 | headers: { 13 | 'Content-Type': 'application/json' 14 | }, 15 | body: query 16 | }).then(response => { 17 | if (response.ok) { 18 | return response.json(); 19 | } 20 | console.log('Error occurred while trying to search', response); 21 | res.sendStatus(response.status); 22 | }).then((searchResults) => { 23 | res.status(HTTPStatus.OK).json(searchResults); 24 | }).catch(error => { 25 | console.log('Error occurred while fetching search results', error); 26 | res.sendStatus(HTTPStatus.INTERNAL_SERVER_ERROR); 27 | }); 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /src/api/search.js: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill'; 2 | import fetch from 'isomorphic-fetch'; 3 | 4 | const search = (query) => { 5 | const encodedQuery = encodeURIComponent(query); 6 | return fetch(`${document.location.origin}/api/search/${encodedQuery}`) 7 | .then(res => { 8 | return res.json(); 9 | }) 10 | .then(results => { 11 | return results; 12 | }); 13 | }; 14 | 15 | export default search; 16 | -------------------------------------------------------------------------------- /src/client.js: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import { Provider } from 'react-redux'; 5 | import { Router, browserHistory } from 'react-router'; 6 | import { syncHistoryWithStore } from 'react-router-redux'; 7 | import { fromJS } from 'immutable'; 8 | import getRoutes from './routes'; 9 | import configureStore from './store'; 10 | import rootSaga from './sagas'; 11 | 12 | // Add the reducer to your store on the `routing` key 13 | // http://redux.js.org/docs/api/combineReducers.html 14 | 15 | const initialState = JSON.parse(window.__INITIAL_STATE__); 16 | /* eslint no-param-reassign: ["off"] */ 17 | 18 | const immutifiedState = Object.keys(initialState).reduce((accumulator, data) => { 19 | accumulator[data] = fromJS(initialState[data]); 20 | return accumulator; 21 | }, {}); 22 | 23 | const store = configureStore(immutifiedState, browserHistory); 24 | store.runSaga(rootSaga); 25 | // Create an enhanced history that syncs navigation events with the store 26 | const history = syncHistoryWithStore(browserHistory, store); 27 | 28 | const component = ( 29 | 30 | {getRoutes()} 31 | 32 | ); 33 | 34 | ReactDOM.render( 35 | 36 | {component} 37 | , 38 | document.getElementById('app') 39 | ); 40 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | BASE_URL: document.location.origin 3 | }; 4 | 5 | export default config; -------------------------------------------------------------------------------- /src/header/actions/search-actions.js: -------------------------------------------------------------------------------- 1 | export const searchWithQuery = (query, hits) => ({ 2 | type: 'AUTOCOMPLETE_SEARCH', 3 | query, 4 | hits 5 | }); 6 | 7 | export const searchResultsForQuery = (query, hits) => ({ 8 | type: 'SEARCH_FOR_RESULTS', 9 | query, 10 | hits 11 | }); -------------------------------------------------------------------------------- /src/header/components/AutocompleteResult.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | const AutocompleteResult = ({ content, focused, hrefForResult }) => { 5 | 6 | const profilePictureSrc = '/images/' + (content.picture ? content.picture : 'default-picture.png'); 7 | const linkClassNames = classnames( 8 | 'autocomplete-result', 9 | 'search-link', 10 | { selected: focused } 11 | ); 12 | 13 | return ( 14 | 19 | Consultant 24 |
25 | {content.name} 26 |
27 | 28 | ); 29 | }; 30 | 31 | AutocompleteResult.propTypes = { 32 | content: React.PropTypes.object.isRequired, 33 | hrefForResult: React.PropTypes.string, 34 | focused: React.PropTypes.bool 35 | }; 36 | 37 | export default AutocompleteResult; 38 | -------------------------------------------------------------------------------- /src/header/components/AutocompleteResultsFooter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const AutocompleteResultsFooter = ({ numResults, href }) => { 4 | return ( 5 |
6 | See All ({numResults}) Results 7 |
8 | ); 9 | }; 10 | 11 | AutocompleteResultsFooter.propTypes = { 12 | numResults: React.PropTypes.number.isRequired, 13 | href: React.PropTypes.string.isRequired 14 | }; 15 | 16 | export default AutocompleteResultsFooter; 17 | -------------------------------------------------------------------------------- /src/header/components/AutocompleteResultsList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AutocompleteResult from './AutocompleteResult'; 3 | import AutocompleteResultsFooter from './AutocompleteResultsFooter'; 4 | 5 | const AutocompleteResultsList = ({ searchResults, href }) => { 6 | const EMPTY_ARRAY = 0; 7 | const results = searchResults; 8 | const resultHref = (type, id) => { 9 | return `/${type}s/${id}`; 10 | }; 11 | 12 | if (results.payload.consultants !== undefined && 13 | results.payload.consultants.length !== EMPTY_ARRAY) { 14 | return ( 15 |
16 | { 17 | results.payload.consultants.map(result => { 18 | return ( 19 | 24 | ); 25 | }) 26 | } 27 | 32 |
33 | ); 34 | } 35 | return null; 36 | }; 37 | 38 | AutocompleteResultsList.propTypes = { 39 | searchResults: React.PropTypes.object.isRequired, 40 | href: React.PropTypes.string.isRequired 41 | }; 42 | 43 | export default AutocompleteResultsList; 44 | -------------------------------------------------------------------------------- /src/header/components/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navigation from './Navigation'; 3 | import PageHeader from './PageHeader'; 4 | 5 | const Banner = () => { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | }; 13 | 14 | export default Banner; 15 | -------------------------------------------------------------------------------- /src/header/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Button = ({ buttonText, classNames, handleClick }) => { 4 | return ; 5 | } 6 | 7 | Button.PropTypes = { 8 | buttonText: React.PropTypes.string.isRequired, 9 | handleClick: React.PropTypes.func.isRequired, 10 | classNames: React.PropTypes.string 11 | } 12 | 13 | export default Button; -------------------------------------------------------------------------------- /src/header/components/Navigation.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import SearchBarContainer from './SearchBarContainer'; 4 | 5 | const Navigation = () => { 6 | return ( 7 | 22 | ); 23 | }; 24 | 25 | export default Navigation; 26 | -------------------------------------------------------------------------------- /src/header/components/PageHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | const PageHeader = ({ iconClass, title }) => { 5 | return ( 6 |
7 |
8 |

9 | 10 | {title} 11 |

12 |
13 |
14 | ); 15 | } 16 | 17 | PageHeader.PropTypes = { 18 | iconClass: React.PropTypes.string, 19 | title: React.PropTypes.string.isRequired 20 | }; 21 | 22 | const mapStateToProps = (state) => ({ 23 | title: state.pageHeader.get('title'), 24 | iconClass: state.pageHeader.get('iconClass') 25 | }); 26 | 27 | export default connect(mapStateToProps)(PageHeader); -------------------------------------------------------------------------------- /src/header/components/SearchBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AutocompleteResultsList from './AutocompleteResultsList'; 3 | import SearchButton from './Button'; 4 | 5 | const SearchBar = ({ handleKeyDown, handleValueChange, handleSearch, query }) => { 6 | return ( 7 |
8 |
9 | 17 | { query.trim() !== '' ? 18 | 19 | : 20 | null 21 | } 22 |
23 |
24 | ); 25 | }; 26 | 27 | SearchBar.propTypes = { 28 | handleKeyDown: React.PropTypes.func.isRequired, 29 | handleValueChange: React.PropTypes.func.isRequired, 30 | query: React.PropTypes.string.isRequired 31 | }; 32 | 33 | export default SearchBar; 34 | -------------------------------------------------------------------------------- /src/header/components/SearchBarContainer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { browserHistory } from 'react-router'; 4 | import { Map } from 'immutable'; 5 | import { searchWithQuery, searchResultsForQuery } from '../actions/search-actions'; 6 | import SearchBar from './SearchBar'; 7 | import AutocompleteResultsList from './AutocompleteResultsList'; 8 | 9 | const ENTER = 13; 10 | const HITS_PER_PAGE = 8; 11 | 12 | class SearchBarContainer extends React.Component { 13 | handleValueChange = (e) => { 14 | const query = e.target.value; 15 | return this.props.searchWithQuery(query, HITS_PER_PAGE); 16 | } 17 | 18 | handleKeyDown = (event) => { 19 | switch (event.keyCode) { 20 | case ENTER: 21 | this.handleEnter(event); 22 | break; 23 | default: 24 | break; 25 | } 26 | } 27 | 28 | handleEnter = (event) => { 29 | const { searchResults } = this.props; 30 | const results = searchResults.toJS(); 31 | const query = event.target.value; 32 | if (query.trim() !== '') { 33 | this.performSearch(query); 34 | } 35 | } 36 | 37 | performSearch(query) { 38 | this.props.searchResultsForQuery(query, HITS_PER_PAGE); 39 | browserHistory.push(`/search/${query}`); 40 | } 41 | 42 | render() { 43 | const { searchResults, query } = this.props; 44 | const results = searchResults.toJS(); 45 | return ( 46 |
47 | 54 |
55 | 59 |
60 |
61 | ); 62 | } 63 | } 64 | 65 | SearchBarContainer.propTypes = { 66 | searchResults: React.PropTypes.instanceOf(Map).isRequired, 67 | handleSearch: React.PropTypes.func, 68 | searchWithQuery: React.PropTypes.func.isRequired, 69 | searchResultsForQuery: React.PropTypes.func.isRequired 70 | }; 71 | 72 | const mapStateToProps = (state) => { 73 | return { 74 | searchResults: state.searchResults 75 | }; 76 | }; 77 | 78 | export default connect(mapStateToProps, { searchWithQuery, searchResultsForQuery })(SearchBarContainer); 79 | -------------------------------------------------------------------------------- /src/header/css/PageHeader.less: -------------------------------------------------------------------------------- 1 | nav { 2 | background-color: white; 3 | } 4 | 5 | .page-header { 6 | background-color: @primary; 7 | color: white; 8 | 9 | h3 { 10 | font-weight: normal; 11 | } 12 | 13 | .fa { 14 | padding-right: 0.5em; 15 | } 16 | } 17 | 18 | .search-results-progress-text { 19 | display: inline; 20 | } 21 | 22 | .product-title { 23 | color: @primary; 24 | font-size: 1.2em; 25 | font-weight: bold; 26 | 27 | sub { 28 | color: @subText; 29 | font-weight: normal; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/header/css/Search.less: -------------------------------------------------------------------------------- 1 | .search { 2 | border: 1.5px solid rgb(149, 152, 154); 3 | border-radius: 20px; 4 | padding: 0.5em; 5 | display: flex; 6 | } 7 | 8 | .search-bar { 9 | border: 1px solid #BCBCBC; 10 | padding: 0.4em; 11 | display: flex; 12 | box-shadow: 0px 3px 6px #CCC; 13 | } 14 | 15 | .search-bar-input { 16 | width: 100%; 17 | border: none; 18 | outline: none; 19 | color: rgb(53, 54, 55); 20 | font-size: 0.975em; 21 | padding: 0.3em 0 0.3em 0.5em; 22 | font-family: inherit; 23 | vertical-align: middle !important; 24 | text-align: center; 25 | } 26 | 27 | .search-button { 28 | outline: none; 29 | border: none; 30 | background-color: @primary; 31 | color: white; 32 | line-height: 1em; 33 | padding: 0.3em 1.2em; 34 | font-weight: bold; 35 | font-family: inherit; 36 | display: inline-block; 37 | } 38 | 39 | .search-button:hover { 40 | background-color: @secondary; 41 | cursor: pointer; 42 | } 43 | 44 | .autocomplete-results-container { 45 | width: 95%; 46 | background-color: rgb(255, 255, 255); 47 | position: absolute; 48 | -webkit-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.17); 49 | -moz-box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.17); 50 | box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.17); 51 | margin-top: 1em; 52 | z-index: 9999; 53 | 54 | .autocomplete-result { 55 | border-bottom: 1px solid rgb(227, 227, 227); 56 | width: 100%; 57 | padding: 1.3em 2.5%; 58 | margin-top: -5px; 59 | display: inline-block; 60 | 61 | &:hover, &.selected { 62 | border: none; 63 | margin-bottom: 1px; 64 | cursor: pointer; 65 | background-color: @muted; 66 | } 67 | 68 | .autocomplete-result-name { 69 | float: left; 70 | padding-left: 1em; 71 | color: #353637; 72 | white-space: nowrap; 73 | text-overflow: ellipsis; 74 | vertical-align: middle; 75 | } 76 | 77 | .autocomplete-result-icon { 78 | float: left; 79 | display: inline-block; 80 | width: 1.5em; 81 | } 82 | } 83 | 84 | .autocomplete-results-footer { 85 | text-decoration: none; 86 | color: white; 87 | background-color: @primary; 88 | text-align: center; 89 | padding: 1.3em 0em; 90 | margin-top: -5px; 91 | 92 | &:hover { 93 | background-color: @secondary; 94 | } 95 | } 96 | } 97 | 98 | #no-results-container { 99 | margin-top: 25px; 100 | text-align: center; 101 | } 102 | 103 | .search-link, .search-link:visited { 104 | text-decoration: none; 105 | color: inherit; 106 | } 107 | -------------------------------------------------------------------------------- /src/header/reducers/autocomplete-reducer.js: -------------------------------------------------------------------------------- 1 | import { Map } from 'immutable'; 2 | 3 | const defaultState = Map({ payload: {}, query: '' }); 4 | 5 | export const searchWithQuery = (state = defaultState, action) => { 6 | switch (action.type) { 7 | case 'AUTOCOMPLETE_SEARCH_COMPLETE': 8 | return Map({ payload: action.payload, query: action.query }); 9 | case 'RESET_SEARCH': 10 | return Map({ payload: {}, query: '' }); 11 | default: 12 | return state; 13 | } 14 | }; -------------------------------------------------------------------------------- /src/header/reducers/page-header-reducer.js: -------------------------------------------------------------------------------- 1 | import { Map } from 'immutable'; 2 | 3 | const defaultState = Map({ 4 | iconClass: 'fa fa-users', 5 | title: 'Consultants' 6 | }); 7 | 8 | export default function pageHeaderReducer(state = defaultState, action) { 9 | switch(action.type) { 10 | case 'SEARCH_RESULTS_COMPLETE': 11 | return Map({ 12 | title: action.query, 13 | iconClass: 'fa fa-search' 14 | }); 15 | default: 16 | return state; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/header/sagas/autocomplete-saga.js: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill'; 2 | import { call, put } from 'redux-saga/effects'; 3 | import { takeLatest } from 'redux-saga'; 4 | import search from '../../api/search'; 5 | 6 | export function* autocompleteSearch(action) { 7 | const { query } = action; 8 | if (query === '') { 9 | yield put({ type: 'AUTOCOMPLETE_SEARCH_COMPLETE', payload: {}, query }); 10 | } else { 11 | const results = yield call(search, query); 12 | yield put({ type: 'AUTOCOMPLETE_SEARCH_COMPLETE', payload: results, query }); 13 | } 14 | } 15 | 16 | export function* watchAutocompleteSearch() { 17 | yield* takeLatest('AUTOCOMPLETE_SEARCH', autocompleteSearch); 18 | } 19 | 20 | -------------------------------------------------------------------------------- /src/header/tests/Button_spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import expect from 'expect'; 3 | import { shallow } from 'enzyme'; 4 | import sinon from 'sinon'; 5 | 6 | import Button from '../components/Button'; 7 | 8 | describe('Button', () => { 9 | describe('Button behavior', () => { 10 | it('should call the onclick handler when button is clicked', () => { 11 | //given 12 | let fakeFunction = sinon.spy(); 13 | 14 | const button = shallow( 15 | '); 23 | }); 24 | 25 | it('should not render when there is an empty query', () => { 26 | const fn = () => {}; 27 | const searchBar = mount( 28 | 34 | ); 35 | 36 | const searchButton = searchBar.find('.search-button'); 37 | 38 | expect(searchButton.exists()).toBe(false); 39 | }); 40 | 41 | it('should not render when there is the query is an empty space', () => { 42 | const fn = () => {}; 43 | const searchBar = mount( 44 | 50 | ); 51 | 52 | const searchButton = searchBar.find('.search-button'); 53 | 54 | expect(searchButton.exists()).toBe(false); 55 | }); 56 | }); 57 | }); -------------------------------------------------------------------------------- /src/main.less: -------------------------------------------------------------------------------- 1 | /* Main entrypoint for app css */ 2 | 3 | /* Colors 4 | ========================================================================== 5 | */ 6 | 7 | @primary : #702269; 8 | @secondary : #b51b58; 9 | @muted : #fbdcf8; 10 | @subText : #888; 11 | @backgroundGray : #F0F4F7; 12 | @translucent : rgba(0, 0, 0, .4); 13 | 14 | .logo { 15 | width: 200px; 16 | } 17 | 18 | .ellipsis-text { 19 | overflow: hidden; 20 | white-space: nowrap; 21 | vertical-align: middle; 22 | text-overflow: ellipsis; 23 | } 24 | 25 | .disabled { 26 | opacity: 0.3; 27 | } 28 | 29 | .wrapping { 30 | flex-wrap: wrap; 31 | } 32 | 33 | .page-content { 34 | display: flex; 35 | } 36 | 37 | .content-panel { 38 | flex: 1; 39 | padding: 25px 20px 20px 20px; 40 | } 41 | 42 | .main-container-white-box { 43 | background-color: rgb(255,255,255); 44 | box-shadow: 0 1px 6px rgba(0,0,0,.08),0 1px 6px rgba(0,0,0,.12); 45 | } 46 | 47 | @import './App.less'; 48 | @import './header/css/PageHeader.less'; 49 | @import './header/css/Search.less'; 50 | @import './pages/search-results-page/css/SearchResults.less'; 51 | -------------------------------------------------------------------------------- /src/mocks/autosuggest/autosuggest.ejs: -------------------------------------------------------------------------------- 1 | { 2 | "port": 8081, 3 | "protocol": "http", 4 | "predicates": [{ 5 | "and" : [ 6 | { 7 | "equals": { 8 | "method": "POST", 9 | "path": "/consultants/search/", 10 | "headers": { 11 | "Content-Type": "application/json" 12 | } 13 | } 14 | } 15 | ] 16 | }], 17 | "responses": [{ 18 | "inject" : "<%- stringify(filename, 'autosuggest/response.js') %>" 19 | }] 20 | } -------------------------------------------------------------------------------- /src/mocks/autosuggest/data.js: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": 1, 3 | "name": "Hany Elemary", 4 | "role": "Developer", 5 | "grade": "Lead Consultant" 6 | }, 7 | { 8 | "id": 2, 9 | "name": "Joe Man", 10 | "role": "Business Analyst", 11 | "grade": "Sr. Consultant" 12 | }, 13 | { 14 | "id": 3, 15 | "name": "Hailey Bloom", 16 | "role": "Developer", 17 | "grade": "Sr. Consultant" 18 | }, { 19 | "id": 4, 20 | "name": "Hannah Swanson", 21 | "role": "Developer", 22 | "grade": "Lead Consultant" 23 | }, { 24 | "id": 5, 25 | "name": "Josh Brooke", 26 | "role": "Developer", 27 | "grade": "Consultant" 28 | }, 29 | { 30 | "id": 6, 31 | "name": "John Doe", 32 | "role": "QA", 33 | "grade": "Consultant" 34 | }, 35 | { 36 | "id": 7, 37 | "name": "Mark Bane", 38 | "role": "QA", 39 | "grade": "Lead Consultant" 40 | }, { 41 | "id": 8, 42 | "name": "Joanna Brooks", 43 | "role": "Experience Designer", 44 | "grade": "Sr. Consultant" 45 | }]; -------------------------------------------------------------------------------- /src/mocks/autosuggest/response.js: -------------------------------------------------------------------------------- 1 | function inject(request, state, logger) { 2 | 3 | const data = [{ 4 | "id": 1, 5 | "alias": "hanyelemary", 6 | "picture": "hanyelemary.jpg", 7 | "name": "Hany Elemary", 8 | "role": "Developer", 9 | "grade": "Lead Consultant" 10 | }, 11 | { 12 | "id": 2, 13 | "name": "Joe Man", 14 | "alias": "joeman", 15 | "role": "Business Analyst", 16 | "grade": "Sr. Consultant" 17 | }, 18 | { 19 | "id": 3, 20 | "alias": "haileybloom", 21 | "name": "Hailey Bloom", 22 | "role": "Developer", 23 | "grade": "Sr. Consultant" 24 | }, 25 | { 26 | "id": 4, 27 | "alias": "hannahswanson", 28 | "name": "Hannah Swanson", 29 | "role": "Developer", 30 | "grade": "Lead Consultant" 31 | }, 32 | { 33 | "id": 5, 34 | "alias": "joshbrooke", 35 | "name": "Josh Brooke", 36 | "role": "Developer", 37 | "grade": "Consultant" 38 | }, 39 | { 40 | "id": 6, 41 | "alias": "johndoe", 42 | "name": "John Doe", 43 | "role": "QA", 44 | "grade": "Consultant" 45 | }, 46 | { 47 | "id": 7, 48 | "alias": "markbane", 49 | "name": "Mark Bane", 50 | "role": "Project Manager", 51 | "grade": "Lead Consultant" 52 | }, 53 | { 54 | "id": 8, 55 | "alias": "joannabrooks", 56 | "name": "Joanna Brooks", 57 | "role": "Experience Designer", 58 | "grade": "Sr. Consultant" 59 | }]; 60 | 61 | function httpResponse(filtered) { 62 | return { 63 | "statusCode": 200, 64 | "headers": { 65 | "Content-Type": "application/json" 66 | }, 67 | "body": { 68 | "consultants": filter(data) 69 | } 70 | }; 71 | } 72 | 73 | function filter(results) { 74 | const patt = new RegExp(request.body, 'i'); 75 | return results.filter(function(consultant) { 76 | return patt.test(consultant.name); 77 | }); 78 | } 79 | 80 | return httpResponse(data); 81 | } -------------------------------------------------------------------------------- /src/mocks/imposters.ejs: -------------------------------------------------------------------------------- 1 | { 2 | "imposters": [ 3 | { 4 | "port": 8081, 5 | "protocol": "http", 6 | "stubs": [ 7 | <% include autosuggest/autosuggest.ejs %> 8 | ] 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/mocks/profiles/hanyelemary.ejs: -------------------------------------------------------------------------------- 1 | { 2 | "port": 8081, 3 | "protocol": "http", 4 | "predicates": [{ 5 | "and" : [ 6 | { 7 | "equals": { 8 | "method": "GET", 9 | "path": "/consultants/hanyelemary", 10 | "headers": { 11 | "Content-Type": "application/json" 12 | } 13 | } 14 | } 15 | ] 16 | }], 17 | "responses": [{ 18 | "inject" : "<%- stringify(filename, 'profiles/response.js') %>" 19 | }] 20 | } -------------------------------------------------------------------------------- /src/mocks/profiles/response.js: -------------------------------------------------------------------------------- 1 | function inject(request, state, logger) { 2 | var data = { 3 | "id": 1, 4 | "name": "Hany Elemary", 5 | "role": "Developer", 6 | "grade": "Lead Consultant", 7 | "yearsExperience": { 8 | "general": 11.2, 9 | "thoughtworks": 1.2 10 | }, 11 | "skills": { 12 | "languages": [ 13 | "Java", 14 | "JavaScript", 15 | "C#", 16 | "C/C++", 17 | "PHP", 18 | "HTML", 19 | "CSS" 20 | ], 21 | "frameworks": [ 22 | "SpringBoot", 23 | "Axon", 24 | "NodeJS", 25 | "SASS/SCSS", 26 | "ReactJS", 27 | "Redux", 28 | "AngularJS" 29 | ] 30 | } 31 | }; 32 | 33 | return { 34 | "statusCode": 200, 35 | "headers": { 36 | "Content-Type": "application/json" 37 | }, 38 | "body": data 39 | }; 40 | } -------------------------------------------------------------------------------- /src/pages/search-results-page/components/NoSearchResults.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | const NoSearchResults = ({ errorClassName, errorMessage, secondaryMessage }) => { 3 | return ( 4 |
5 |
6 |
7 |

{errorMessage}

8 |
9 |
10 | {secondaryMessage} 11 |
12 |
13 |
14 |
15 | ); 16 | }; 17 | 18 | export default NoSearchResults; 19 | -------------------------------------------------------------------------------- /src/pages/search-results-page/components/SearchResult.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SearchResult = ({ result }) => { 4 | const profilePictureSrc = '/images/' + (result.picture ? result.picture : 'default-picture.png'); 5 | return ( 6 |
7 | 8 |
9 | Consultant 10 |
11 |
12 |
13 |
14 | {result.name} 15 |
16 |
17 | {result.grade} 18 |
19 |
20 |
21 | {result.website} 22 |
23 |
24 | 25 |
26 | ); 27 | }; 28 | 29 | SearchResult.propTypes = { 30 | result: React.PropTypes.object.isRequired 31 | }; 32 | 33 | export default SearchResult; 34 | -------------------------------------------------------------------------------- /src/pages/search-results-page/components/SearchResults.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SearchResult from './SearchResult'; 3 | 4 | const SearchResults = ({ results }) => { 5 | const resultList = results.map(result => { 6 | return ; 7 | }); 8 | 9 | return ( 10 |
11 |
12 |
13 | {resultList} 14 |
15 |
16 |
17 | ); 18 | }; 19 | 20 | SearchResults.propTypes = { 21 | results: React.PropTypes.array.isRequired 22 | }; 23 | 24 | export default SearchResults; 25 | -------------------------------------------------------------------------------- /src/pages/search-results-page/components/SearchResultsPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SearchResults from './SearchResults'; 3 | import NoSearchResults from './NoSearchResults'; 4 | import Spinner from './Spinner'; 5 | 6 | const SearchResultsPage = ({ results }) => { 7 | let component; 8 | if (results.isFetching) { 9 | component = ; 10 | } else if (!results.error && results.payload.consultants.length === 0) { 11 | component = 12 | 17 | } else if (results.payload.consultants.length > 0) { 18 | component = 19 | 23 | } else { 24 | component = 25 | 30 | } 31 | return component; 32 | }; 33 | 34 | SearchResultsPage.propTypes = { 35 | results: React.PropTypes.object.isRequired 36 | }; 37 | 38 | export default SearchResultsPage; 39 | -------------------------------------------------------------------------------- /src/pages/search-results-page/components/SearchResultsPageContainer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { searchResultsForQuery } from '../../../header/actions/search-actions'; 4 | import SearchResultsPage from './SearchResultsPage'; 5 | 6 | const RESULTS_PER_PAGE = 20; 7 | class SearchResultsPageContainer extends React.Component { 8 | componentDidMount() { 9 | const { query } = this.props.params; 10 | this.props.searchResultsForQuery(query, RESULTS_PER_PAGE); 11 | } 12 | 13 | render() { 14 | const { results } = this.props; 15 | return ( 16 | 17 | ); 18 | } 19 | } 20 | 21 | SearchResultsPageContainer.propTypes = { 22 | params: React.PropTypes.object.isRequired, 23 | searchResultsForQuery: React.PropTypes.func.isRequired 24 | }; 25 | 26 | const mapStateToProps = state => ({ 27 | results: state.resultsForQuery.toJS() 28 | }); 29 | 30 | export default connect(mapStateToProps, { searchResultsForQuery })(SearchResultsPageContainer); 31 | -------------------------------------------------------------------------------- /src/pages/search-results-page/components/Spinner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Spinner = () => { 4 | return ( 5 |
6 |
7 |
8 | ); 9 | }; 10 | 11 | export default Spinner; 12 | -------------------------------------------------------------------------------- /src/pages/search-results-page/css/SearchResults.less: -------------------------------------------------------------------------------- 1 | .search-result { 2 | display: flex; 3 | width: 100%; 4 | border-bottom: 1px solid rgb(220,220,220); 5 | transition: background-color 0.1s linear; 6 | &:hover { 7 | background-color: @muted; 8 | transition: background-color 0.1s linear; 9 | } 10 | & > a { 11 | width: 100%; 12 | padding: 1em; 13 | display: inherit; 14 | text-decoration: none; 15 | color: inherit; 16 | } 17 | 18 | .search-result-icon { 19 | border: 1px solid rgb(210,210,210); 20 | margin-right: 1.3em; 21 | border-radius: 50%; 22 | width: 70px; 23 | height: 70px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | 28 | & > i { 29 | color: rgb(210,210,210); 30 | } 31 | 32 | .search-result-image { 33 | width: 100%; 34 | border-radius: 50px 35 | } 36 | } 37 | 38 | .search-result-content { 39 | display: flex; 40 | align-items: center; 41 | justify-content: space-between; 42 | flex: 1; 43 | 44 | .search-result-name { 45 | font-size: 1.25em; 46 | } 47 | 48 | .search-result-grade { 49 | font-size: 0.875em; 50 | color: @subText; 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /src/pages/search-results-page/reducers/search-results-reducer.js: -------------------------------------------------------------------------------- 1 | import { Map } from 'immutable'; 2 | 3 | const defaultState = Map({ 4 | payload: { consultants: [] }, 5 | query: '', 6 | isFetching: true 7 | }); 8 | 9 | export const searchResultsForQuery = (state = defaultState, action) => { 10 | switch (action.type) { 11 | case 'SEARCH_RESULTS_COMPLETE': 12 | return Map({ 13 | payload: action.payload, 14 | query: action.query, 15 | isFetching: false 16 | }); 17 | case 'SEARCH_REQUEST_FAILED': 18 | return Map({ 19 | payload: { 20 | consultants: [] 21 | }, 22 | error: action.payload, 23 | query: action.query, 24 | isFetching: action.isFetching 25 | }); 26 | default: 27 | return state; 28 | } 29 | }; -------------------------------------------------------------------------------- /src/pages/search-results-page/sagas/search-results-saga.js: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill'; 2 | import { call, put } from 'redux-saga/effects'; 3 | import { takeEvery } from 'redux-saga'; 4 | import search from '../../../api/search'; 5 | 6 | export function* searchForResults(action) { 7 | try { 8 | const { query } = action; 9 | const results = yield call(search, query); 10 | yield put({ 11 | type: 'SEARCH_RESULTS_COMPLETE', payload: results, query, isFetching: false 12 | }); 13 | //Reset the search box after we get results. 14 | yield put({ type: 'RESET_SEARCH' }); 15 | } catch (ex) { 16 | yield put({ 17 | type: 'SEARCH_REQUEST_FAILED', payload: ex.message, isFetching: false 18 | }); 19 | } 20 | } 21 | 22 | export function* watchSearchForResults() { 23 | yield takeEvery('SEARCH_FOR_RESULTS', searchForResults); 24 | } 25 | -------------------------------------------------------------------------------- /src/reducers.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { routerReducer } from 'react-router-redux'; 3 | import { searchWithQuery } from './header/reducers/autocomplete-reducer'; 4 | import { searchResultsForQuery } from './pages/search-results-page/reducers/search-results-reducer'; 5 | import pageHeaderReducer from './header/reducers/page-header-reducer'; 6 | 7 | export default combineReducers({ 8 | routing: routerReducer, 9 | pageHeader: pageHeaderReducer, 10 | searchResults: searchWithQuery, 11 | resultsForQuery: searchResultsForQuery 12 | }); 13 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, IndexRoute } from 'react-router'; 3 | import App from './App'; 4 | import SearchResultsPageContainer from './pages/search-results-page/components/SearchResultsPageContainer'; 5 | 6 | export default () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /src/sagas.js: -------------------------------------------------------------------------------- 1 | import { fork } from 'redux-saga/effects'; 2 | import { watchSearchForResults } from './pages/search-results-page/sagas/search-results-saga'; 3 | import { watchAutocompleteSearch } from './header/sagas/autocomplete-saga'; 4 | 5 | export default function* rootSaga() { 6 | yield [ 7 | fork(watchAutocompleteSearch), 8 | fork(watchSearchForResults) 9 | ]; 10 | } 11 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, compose } from 'redux'; 2 | import { routerMiddleware } from 'react-router-redux'; 3 | import createSagaMiddleware, { END } from 'redux-saga'; 4 | import reducers from './reducers'; 5 | import createLogger from 'redux-logger'; 6 | 7 | const logger = createLogger(); 8 | const sagaMiddleware = createSagaMiddleware(); 9 | 10 | export default function configureStore(initialState = {}, history) { 11 | const middlewares = [ 12 | logger, 13 | sagaMiddleware, 14 | routerMiddleware(history) 15 | ]; 16 | 17 | const enhancers = [ 18 | applyMiddleware(...middlewares) 19 | ]; 20 | 21 | const store = createStore( 22 | reducers, 23 | initialState, 24 | compose(...enhancers) 25 | ); 26 | 27 | // Extensions 28 | // store.runSaga = sagaMiddleware.run; 29 | // store.asyncReducers = {}; // Async reducer registry 30 | return { 31 | ...store, 32 | runSaga: sagaMiddleware.run, 33 | close() { store.dispatch(END); } 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /test/mocha.opts: -------------------------------------------------------------------------------- 1 | --require test/utils/dom.js 2 | --require babel-polyfill 3 | --compilers jsx?:babel-core/register 4 | --recursive src/**/tests/**/*.js 5 | -------------------------------------------------------------------------------- /test/utils/dom.js: -------------------------------------------------------------------------------- 1 | // required for using async/await 2 | import 'babel-polyfill'; 3 | import jsdom from 'jsdom'; 4 | import jquery from 'jquery'; 5 | // setup the simplest document possible 6 | const doc = jsdom.jsdom('', { url: 'http://fakehost:9131' }); 7 | 8 | // get the window object out of the document 9 | const win = doc.defaultView; 10 | 11 | // set globals for mocha that make access to document and window feel 12 | // natural in the test environment 13 | global.document = doc; 14 | global.window = win; 15 | global.$ = jquery(win); 16 | 17 | process.env.NODE_ENV = 'test'; 18 | 19 | // take all properties of the window object and also attach it to the 20 | // mocha global object 21 | 22 | // adapted from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80 23 | Object.keys(window).forEach(key => { 24 | if (!(key in global)) { 25 | global[key] = window[key]; 26 | } 27 | }); 28 | -------------------------------------------------------------------------------- /webpack/dev/webpack.config.js: -------------------------------------------------------------------------------- 1 | // using require is how you include node_modules and other files into the current module 2 | // CommonJS and module pattern explanation: https://webpack.github.io/docs/commonjs.html 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 | 7 | const PATHS = { 8 | app: path.join(__dirname, '../../src'), 9 | distJS: path.join(__dirname, '../../dist/js'), 10 | distCSS: path.join('../../dist/css') 11 | }; 12 | 13 | const clientConfig = { 14 | // tool used to help with debugging 15 | // more info: https://webpack.github.io/docs/configuration.html#devtool 16 | devtool: 'source-map', 17 | // context sets the main folder for our app 18 | context: PATHS.app, 19 | // the file containing all our .less imports 20 | // the file that is the entry point to the application containing the routes 21 | entry: [ 22 | './main.less', 23 | './client.js', 24 | 'babel-polyfill' 25 | ], 26 | // the name of our bundled file will be placed in the /dist/js folder called bundle.js 27 | output: { 28 | path: PATHS.distJS, 29 | filename: 'bundle.js' 30 | }, 31 | // allows you to require your modules in other modules without specifying the extension 32 | resolve: { 33 | extensions: ['', '.js', '.jsx'] 34 | }, 35 | // make jquery available accross all modules, therefore you don't need to require it constantly 36 | // takes the converted css file from the loader and publishes it to styles.css 37 | plugins: [ 38 | new webpack.ProvidePlugin({ 39 | $: 'jquery', 40 | jQuery: 'jquery', 41 | 'window.jQuery': 'jquery' 42 | }), 43 | new ExtractTextPlugin(path.join(PATHS.distCSS, '/styles.css')) 44 | ], 45 | module: { 46 | loaders: [ 47 | { 48 | // this goes through all your files including the extension type specified in test key 49 | // we exclude all the files in node_modules 50 | // the loader is babel-loader: allows us to write es6 and transpile down to JS that current browsers understand 51 | // https://github.com/babel/babel-loader 52 | test: /\.jsx?$/, 53 | loader: 'babel', 54 | query: { 55 | cacheDirectory: true 56 | }, 57 | include: [ 58 | PATHS.app 59 | ] 60 | }, 61 | // takes our main.less file and converts it to css 62 | { 63 | test: /\.less$/, 64 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') 65 | }, 66 | { 67 | test: /\.svg/, 68 | loader: 'svg-url-loader' 69 | } 70 | ] 71 | } 72 | }; 73 | 74 | module.exports = clientConfig; 75 | -------------------------------------------------------------------------------- /webpack/dev/webpack.server.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const nodeExternals = require('webpack-node-externals'); 3 | 4 | const PATHS = { 5 | server: path.resolve(__dirname, '../../src/server.js'), 6 | root: path.join(__dirname, '../../') 7 | }; 8 | 9 | const serverConfig = { 10 | entry: PATHS.server, 11 | resolve: { 12 | extensions: ['', '.js', '.jsx'] 13 | }, 14 | output: { 15 | path: PATHS.root, 16 | filename: 'server.bundle.js' 17 | }, 18 | target: 'node', 19 | externals: [nodeExternals({ 20 | whitelist: [] 21 | })], 22 | 23 | node: { 24 | __filename: false, 25 | __dirname: false 26 | }, 27 | 28 | module: { 29 | loaders: [ 30 | { 31 | test: /\.jsx?$/, 32 | loader: 'babel', 33 | query: { 34 | cacheDirectory: true 35 | } 36 | } 37 | ] 38 | } 39 | }; 40 | 41 | module.exports = serverConfig; 42 | -------------------------------------------------------------------------------- /webpack/prod/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | 5 | const PATHS = { 6 | app: path.join(__dirname, '../../src'), 7 | distJS: path.join(__dirname, '../../dist/js'), 8 | distCSS: path.join('../../dist/css') 9 | }; 10 | 11 | const clientConfig = { 12 | context: PATHS.app, 13 | entry: [ 14 | './main.less', 15 | './client.js', 16 | 'babel-polyfill' 17 | ], 18 | output: { 19 | path: PATHS.distJS, 20 | filename: 'bundle.js' 21 | }, 22 | resolve: { 23 | extensions: ['', '.js', '.jsx'] 24 | }, 25 | plugins: [ 26 | new webpack.ProvidePlugin({ 27 | $: 'jquery', 28 | jQuery: 'jquery', 29 | 'window.jQuery': 'jquery' 30 | }), 31 | new ExtractTextPlugin(path.join(PATHS.distCSS, '/styles.css')), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false, 35 | screw_ie8: true 36 | }, 37 | comments: false, 38 | sourceMap: false 39 | }), 40 | new webpack.DefinePlugin({ 41 | 'process.env': { 42 | NODE_ENV: '"production"' 43 | } 44 | }) 45 | ], 46 | module: { 47 | loaders: [ 48 | { 49 | test: /\.jsx?$/, 50 | loader: 'babel', 51 | query: { 52 | cacheDirectory: false 53 | }, 54 | include: [ 55 | PATHS.app 56 | ] 57 | }, 58 | { 59 | test: /\.less$/, 60 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') 61 | }, 62 | { 63 | test: /\.svg/, 64 | loader: 'svg-url-loader' 65 | } 66 | ] 67 | } 68 | }; 69 | 70 | module.exports = clientConfig; 71 | -------------------------------------------------------------------------------- /webpack/prod/webpack.server.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const PATHS = { 4 | server: path.resolve(__dirname, '../../src/server.js'), 5 | root: path.join(__dirname, '../../') 6 | }; 7 | 8 | const serverConfig = { 9 | entry: PATHS.server, 10 | resolve: { 11 | extensions: ['', '.js', '.jsx'] 12 | }, 13 | output: { 14 | path: PATHS.root, 15 | filename: 'server.bundle.js' 16 | }, 17 | target: 'node', 18 | node: { 19 | __filename: false, 20 | __dirname: false 21 | }, 22 | module: { 23 | loaders: [ 24 | { 25 | test: /\.jsx?$/, 26 | loader: 'babel', 27 | query: { 28 | cacheDirectory: false 29 | } 30 | } 31 | ] 32 | } 33 | }; 34 | 35 | module.exports = serverConfig; 36 | --------------------------------------------------------------------------------