├── .gitignore ├── LICENSE ├── Procfile ├── README.md ├── app.js ├── gruntfile.js ├── package.json ├── public ├── css │ └── style.css ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── img │ ├── add-channel.svg │ ├── chevron.svg │ ├── discussion.svg │ ├── graph-title.png │ ├── graph-title.svg │ ├── graph_1.png │ ├── graph_1.svg │ ├── graph_2.svg │ ├── loading.svg │ ├── prof-1.png │ ├── share.svg │ ├── upload.svg │ └── x.svg ├── javascripts │ ├── .gitignore │ ├── app.js │ ├── controllers │ │ ├── DataSetController.js │ │ ├── DiscussController.js │ │ ├── DiscussPointController.js │ │ ├── NavController.js │ │ ├── NavigatorController.js │ │ ├── ShareController.js │ │ ├── SidebarController.js │ │ ├── ToolController.js │ │ ├── UploadController.js │ │ └── ViewController.js │ ├── directives.js │ └── services │ │ ├── DataSets.js │ │ ├── Observations.js │ │ └── Sources.js ├── partials │ ├── nav.html │ ├── observation.html │ ├── share.html │ ├── tool.html │ └── upload.html └── templates │ ├── data_set.html │ ├── data_sets.html │ ├── discuss.html │ ├── navigator.html │ └── views.html ├── routes ├── api │ └── v1 │ │ └── journey.js └── index.js ├── sass ├── _base.scss ├── _config.scss ├── app.scss ├── global │ ├── _layout.scss │ ├── _mixins.scss │ └── _states.scss ├── lib │ ├── bourbon │ │ ├── _bourbon.scss │ │ ├── addons │ │ │ ├── _button.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _font-family.scss │ │ │ ├── _hide-text.scss │ │ │ ├── _html5-input-types.scss │ │ │ ├── _position.scss │ │ │ ├── _prefixer.scss │ │ │ ├── _retina-image.scss │ │ │ ├── _size.scss │ │ │ ├── _timing-functions.scss │ │ │ └── _triangle.scss │ │ ├── css3 │ │ │ ├── _animation.scss │ │ │ ├── _appearance.scss │ │ │ ├── _backface-visibility.scss │ │ │ ├── _background-image.scss │ │ │ ├── _background.scss │ │ │ ├── _border-image.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-sizing.scss │ │ │ ├── _columns.scss │ │ │ ├── _flex-box.scss │ │ │ ├── _font-face.scss │ │ │ ├── _hidpi-media-query.scss │ │ │ ├── _image-rendering.scss │ │ │ ├── _inline-block.scss │ │ │ ├── _keyframes.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _perspective.scss │ │ │ ├── _placeholder.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _transform.scss │ │ │ ├── _transition.scss │ │ │ └── _user-select.scss │ │ ├── functions │ │ │ ├── _compact.scss │ │ │ ├── _flex-grid.scss │ │ │ ├── _grid-width.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _modular-scale.scss │ │ │ ├── _px-to-em.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _tint-shade.scss │ │ │ └── _transition-property-name.scss │ │ ├── helpers │ │ │ ├── _deprecated-webkit-gradient.scss │ │ │ ├── _gradient-positions-parser.scss │ │ │ ├── _linear-positions-parser.scss │ │ │ ├── _radial-arg-parser.scss │ │ │ ├── _radial-positions-parser.scss │ │ │ ├── _render-gradients.scss │ │ │ └── _shape-size-stripper.scss │ │ └── readme.md │ └── neat │ │ ├── _neat-helpers.scss │ │ ├── _neat.scss │ │ ├── functions │ │ ├── _new-breakpoint.scss │ │ └── _private.scss │ │ ├── grid │ │ ├── _fill-parent.scss │ │ ├── _grid.scss │ │ ├── _media.scss │ │ ├── _omega.scss │ │ ├── _outer-container.scss │ │ ├── _pad.scss │ │ ├── _private.scss │ │ ├── _reset.scss │ │ ├── _row.scss │ │ ├── _shift.scss │ │ ├── _span-columns.scss │ │ ├── _to-deprecate.scss │ │ └── _visual-grid.scss │ │ └── settings │ │ ├── _grid.scss │ │ └── _visual-grid.scss ├── modules │ ├── _batch.scss │ ├── _batches.scss │ ├── _channel.scss │ ├── _data-sets.scss │ ├── _discuss.scss │ ├── _discussion.scss │ ├── _main.scss │ ├── _nav.scss │ ├── _navigator.scss │ ├── _observation.scss │ ├── _share.scss │ ├── _source.scss │ ├── _tools.scss │ ├── _upload.scss │ └── _views.scss └── patterns │ ├── _animations.scss │ ├── _batch.scss │ ├── _channel.scss │ ├── _formatting.scss │ ├── _gradients.scss │ ├── _icons.scss │ ├── _input.scss │ ├── _layout.scss │ ├── _modals.scss │ ├── _nav.scss │ ├── _navigator.scss │ ├── _overlay.scss │ ├── _transitions.scss │ └── _typography.scss └── views └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sciview Prototype 2 | 3 | You can read the story about this project [here](https://medium.com/@thomasdrach/i-thought-i-was-designing-for-spacex-i-was-actually-designing-for-the-silk-road-4b4b64834868#.795zenezg), and see a live demo [here](http://sciview.herokuapp.com). 4 | 5 | ``` 6 | DISCLAIMER 7 | 8 | This code is very old! It does not follow best practices! Packages are not up to date! Sorry! 9 | ``` 10 | 11 | ## Up and running 12 | ``` 13 | $ npm install 14 | $ npm start 15 | ``` 16 | 17 | ### To Build Sass 18 | Running `grunt watch` will watch the `/sass` directory for changes and update the `public/css/style.css` based on changes. 19 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | , routes = require('./routes') 3 | , http = require('http') 4 | , request = require('request') 5 | , cons = require('consolidate') 6 | , path = require('path'); 7 | 8 | var app = express(); 9 | 10 | app.configure(function(){ 11 | app.set('port', process.env.PORT || 5000); 12 | app.set('views', __dirname + '/views'); 13 | app.set('view engine', 'html'); 14 | app.use(express.favicon()); 15 | app.use(express.logger('dev')); 16 | app.use(express.bodyParser()); 17 | app.use(express.cookieParser()); 18 | app.use(express.methodOverride()); 19 | app.use(app.router); 20 | app.engine('html', cons.swig); 21 | app.use(express.static(path.join(__dirname, 'public'))); 22 | app.use(express.urlencoded()); 23 | app.use(express.json); 24 | app.locals.cache = "memory" 25 | }); 26 | 27 | app.configure('development', function(){ 28 | app.use(express.errorHandler()); 29 | }); 30 | 31 | app.get('/', routes.index); 32 | 33 | var server = http.createServer(app).listen(process.env.PORT || app.get('port'), function(){ 34 | console.log("Express server listening on port " + app.get('port')); 35 | }); 36 | -------------------------------------------------------------------------------- /gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig ({ 3 | sass: { 4 | dist: { 5 | files: { 6 | 'public/css/style.css' : 'sass/app.scss' 7 | } 8 | } 9 | }, 10 | 11 | watch: { 12 | source: { 13 | files: ['sass/**/*.scss'], 14 | tasks: ['sass'], 15 | options: { 16 | livereload: true, 17 | } 18 | } 19 | } 20 | }); 21 | grunt.loadNpmTasks('grunt-contrib-watch'); 22 | grunt.loadNpmTasks('grunt-sass'); 23 | grunt.registerTask('default', ['sass']); 24 | }; 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "application-name", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node app" 7 | }, 8 | "dependencies": { 9 | "bcrypt": "0.7.7", 10 | "express": "3.0.0rc4", 11 | "express-jwt": "0.2.0", 12 | "http": "*", 13 | "request": "2.34.0", 14 | "swig": "1.3.2", 15 | "consolidate": "0.10.0", 16 | "passport": "0.2.0", 17 | "passport-local": "1.0.0", 18 | "path": "0.4.9", 19 | "jsonwebtoken": "0.2.0", 20 | "mongoose": "~3.8.8", 21 | "validator": "3.5.1" 22 | }, 23 | "devDependencies": { 24 | "bcrypt": "~0.7.7", 25 | "connect-mongodb": "~1.1.5", 26 | "consolidate": "0.10.0", 27 | "express-jwt": "~0.2.0", 28 | "grunt": "~0.4.2", 29 | "grunt-contrib-watch": "~0.5.3", 30 | "grunt-sass": "~0.10.0", 31 | "jsonwebtoken": "~0.2.0", 32 | "node-sass": "^4.0.0", 33 | "passport": "0.2.0", 34 | "passport-local": "~1.0.0", 35 | "swig": "~1.3.2", 36 | "validator": "~3.5.1" 37 | }, 38 | "engines": { 39 | "node": "0.10.22" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/fonts/icomoon.eot -------------------------------------------------------------------------------- /public/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/fonts/icomoon.ttf -------------------------------------------------------------------------------- /public/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/fonts/icomoon.woff -------------------------------------------------------------------------------- /public/img/add-channel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rectangle 84 + + 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | + 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/img/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Triangle 4 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/img/discussion.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Oval 4 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/img/graph-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/img/graph-title.png -------------------------------------------------------------------------------- /public/img/graph-title.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path 326 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/img/graph_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/img/graph_1.png -------------------------------------------------------------------------------- /public/img/graph_1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path-130 + Path-127 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/img/graph_2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/img/loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/img/prof-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/img/prof-1.png -------------------------------------------------------------------------------- /public/img/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rectangle 9 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/img/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rectangle 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/img/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rectangle 25 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/javascripts/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /public/javascripts/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('app', [ 2 | 'ngAnimate', 3 | 'ngCookies', 4 | 'ngRoute', 5 | 'ui.router' 6 | ]).config(function($routeProvider, $locationProvider, $httpProvider, $stateProvider, $urlRouterProvider) { 7 | 8 | $urlRouterProvider.otherwise('/data-sets/0'); 9 | $urlRouterProvider.when('/data-sets', '/data-sets/0'); 10 | 11 | $stateProvider 12 | .state('data-sets', { 13 | url: '/data-sets', 14 | templateUrl: '/templates/data_sets.html', 15 | controller: 'DataSetController' 16 | }) 17 | .state('data-sets.single', { 18 | url: '/:dataSetId', 19 | templateUrl: '/templates/data_set.html', 20 | controller: 'DataSetController' 21 | }) 22 | .state('data-sets.single.discuss', { 23 | url: '/discuss', 24 | templateUrl: '/templates/discuss.html', 25 | controller: 'DiscussController' 26 | }) 27 | .state('data-sets.single.discuss.point', { 28 | url: '/:dataPoint', 29 | templateUrl: '/partials/observation.html', 30 | controller: 'DiscussPointController' 31 | }) 32 | .state('data-sets.single.share', { 33 | url: '/share', 34 | templateUrl: '/partials/share.html', 35 | controller: 'ShareController' 36 | }) 37 | .state('navigator', { 38 | url: '/navigator', 39 | templateUrl: '/templates/navigator.html', 40 | controller: 'NavigatorController' 41 | }) 42 | .state('navigator.upload', { 43 | url: '/upload', 44 | templateUrl: '/partials/upload.html', 45 | controller: 'UploadController' 46 | }) 47 | ; 48 | 49 | }); -------------------------------------------------------------------------------- /public/javascripts/controllers/DataSetController.js: -------------------------------------------------------------------------------- 1 | app.controller('DataSetController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | '$stateParams', 6 | '$state', 7 | 'DataSets', 8 | 'Observations', 9 | function($scope, $rootScope, $location, $stateParams, $state, DataSets, Observations) { 10 | 11 | // Get all Data Sets 12 | $scope.data_sets = DataSets.getDataSets(); 13 | // Set current Data Set 14 | $scope.current_data_set = $scope.data_sets[$stateParams.dataSetId]; 15 | // Get list of data points (for over chart) 16 | // $scope.data_points = Observations.getDataPoints($stateParams.dataSetId); 17 | // Make $state available in $scope 18 | $scope.$state = $state; 19 | 20 | // Default state for adding new meta tag 21 | $scope.meta = {}; 22 | 23 | // Expand and retract group channels 24 | $scope.toggleGroup = function(channel) { 25 | toggleExpandRetract(channel); 26 | }; 27 | 28 | $scope.toggleChannel = function(channel) { 29 | toggleExpandRetract(channel); 30 | }; 31 | 32 | // $scope.addNewMeta = function(channel) { 33 | // // $scope.meta_add = ""; 34 | // }; 35 | 36 | $scope.saveMetaChannel = function(channel, content) { 37 | channel.meta.push(content); 38 | } 39 | 40 | // Function to change state of expanded or retracted object 41 | var toggleExpandRetract = function(obj) { 42 | if(obj.state === "retracted") 43 | obj.state = "expanded"; 44 | else 45 | obj.state = "retracted"; 46 | }; 47 | } 48 | 49 | ]); -------------------------------------------------------------------------------- /public/javascripts/controllers/DiscussController.js: -------------------------------------------------------------------------------- 1 | app.controller('DiscussController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | '$state', 6 | '$stateParams', 7 | 'Observations', 8 | function($scope, $rootScope, $location, $state, $stateParams, Observations) { 9 | $scope.$state = $state; 10 | $scope.observations = Observations.getObservations(); 11 | console.log($stateParams); 12 | 13 | $scope.new_obvs = $scope.observations[0]; 14 | 15 | } 16 | ]); 17 | -------------------------------------------------------------------------------- /public/javascripts/controllers/DiscussPointController.js: -------------------------------------------------------------------------------- 1 | app.controller('DiscussPointController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | '$state', 6 | '$stateParams', 7 | 'Observations', 8 | function($scope, $rootScope, $location, $state, $stateParams, Observations) { 9 | $scope.$state = $state; 10 | // $scope.observations = Observations.getObservations(); 11 | // console.log($stateParams); 12 | console.log("DiscussPointController"); 13 | } 14 | ]); 15 | -------------------------------------------------------------------------------- /public/javascripts/controllers/NavController.js: -------------------------------------------------------------------------------- 1 | app.controller('NavController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | '$state', 6 | function($scope, $rootScope, $location, $state) { 7 | $scope.$state = $state; 8 | } 9 | ]); 10 | -------------------------------------------------------------------------------- /public/javascripts/controllers/NavigatorController.js: -------------------------------------------------------------------------------- 1 | app.controller('NavigatorController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | 'Sources', 6 | function($scope, $rootScope, $location, Sources) { 7 | 8 | $scope.sources = Sources.getDataSources(); 9 | 10 | $scope.navigator = { 11 | search_query: "" 12 | }; 13 | 14 | } 15 | ]); 16 | -------------------------------------------------------------------------------- /public/javascripts/controllers/ShareController.js: -------------------------------------------------------------------------------- 1 | app.controller('ShareController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | '$state', 6 | function($scope, $rootScope, $location, $state) { 7 | // $scope.$state = $state; 8 | $scope.share = { 9 | link: "app.sciview.com/3fj309kd39" 10 | }; 11 | } 12 | ]); 13 | -------------------------------------------------------------------------------- /public/javascripts/controllers/SidebarController.js: -------------------------------------------------------------------------------- 1 | app.controller('SidebarController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | function($scope, $rootScope, $location) { 6 | 7 | } 8 | ]); 9 | -------------------------------------------------------------------------------- /public/javascripts/controllers/ToolController.js: -------------------------------------------------------------------------------- 1 | app.controller('ToolController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | function($scope, $rootScope, $location) { 6 | $scope.channel = { 7 | title: 'oil-pressure_3a', 8 | category: 'thrusters', 9 | value: '321', 10 | unit: 'psi' 11 | }; 12 | 13 | $scope.data_set = { 14 | time: '00:20:38:12', 15 | unit: 'seconds' 16 | }; 17 | } 18 | ]); 19 | -------------------------------------------------------------------------------- /public/javascripts/controllers/UploadController.js: -------------------------------------------------------------------------------- 1 | app.controller('UploadController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | '$timeout', 6 | function($scope, $rootScope, $location, $timeout) { 7 | 8 | $scope.uploads = []; 9 | var index = 0; 10 | 11 | var upload_items = [ 12 | { 13 | name: "LAUNCH_FILE_3s", 14 | status: { 15 | upload: false 16 | } 17 | }, 18 | { 19 | name: "TEST_LAUNCH", 20 | status: { 21 | upload: false 22 | } 23 | }, 24 | { 25 | name: "TEST_3", 26 | status: { 27 | upload: false 28 | } 29 | } 30 | ]; 31 | 32 | 33 | $scope.choseFile = function() { 34 | $scope.uploads.push(upload_items[index]); 35 | index++; 36 | }; 37 | 38 | $scope.uploadItem = function(item) { 39 | item.status.upload = true; 40 | }; 41 | 42 | $scope.stopUpload = function(item) { 43 | $scope.uploads.splice(item, 1); 44 | } 45 | 46 | } 47 | ]); 48 | -------------------------------------------------------------------------------- /public/javascripts/controllers/ViewController.js: -------------------------------------------------------------------------------- 1 | app.controller('ViewController', [ 2 | '$scope', 3 | '$rootScope', 4 | '$location', 5 | function($scope, $rootScope, $location) { 6 | 7 | } 8 | ]); 9 | -------------------------------------------------------------------------------- /public/javascripts/directives.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdrach/Sciview/718680685981899a17b58fbe7de12584c24097c2/public/javascripts/directives.js -------------------------------------------------------------------------------- /public/javascripts/services/DataSets.js: -------------------------------------------------------------------------------- 1 | app.service('DataSets', function($http, $cookieStore, $state) { 2 | var DataSets = {}; 3 | 4 | DataSets.getDataSets = function() { 5 | return [ 6 | { 7 | id: '0', 8 | title: 'Data Set 1', 9 | batch: [ 10 | { 11 | title: 'Pressure', 12 | chart: './img/graph_1.svg', 13 | channel: [ 14 | { 15 | title: 'Pressure Sensors', 16 | group: [ 17 | { 18 | title: 'fuel_pressure-d', 19 | category: 'pressure', 20 | state: "retracted", 21 | meta: [ { tag: "tag1" }, { key: "keyss", value: "valuess"}], 22 | key: { 23 | color: '#FF00D8', 24 | style: "dashed" 25 | } 26 | }, { 27 | title: 'oil_pressure-3a', 28 | category: 'pressure', 29 | state: "retracted", 30 | meta: [ { tag: "tag1" }, { key: "keyss", value: "valuess"}], 31 | key: { 32 | color: '#FFF81D', 33 | style: "solid" 34 | } 35 | } 36 | 37 | ] 38 | } 39 | ], 40 | data_points: [ 41 | { 42 | count: 5, 43 | position: { 44 | x: 34, 45 | y: 22 46 | } 47 | }, 48 | { 49 | count: 3, 50 | position: { 51 | x: 200, 52 | y: 78 53 | } 54 | }, 55 | { 56 | count: 12, 57 | position: { 58 | x: 605, 59 | y: 152 60 | } 61 | } 62 | ] 63 | }, 64 | { 65 | title: 'Speed', 66 | chart: './img/graph_2.svg', 67 | channel: [ 68 | { 69 | title: 'Pressure Sensors', 70 | group: [ 71 | { 72 | title: 'fuel_pressure-d', 73 | category: 'pressure', 74 | state: "retracted", 75 | meta: [ { tag: "tag1" }, { key: "keyss", value: "valuess"}], 76 | key: { 77 | color: '#AC00FF', 78 | style: "solid" 79 | } 80 | }, { 81 | title: 'oil_pressure-3a', 82 | category: 'pressure', 83 | state: "retracted", 84 | meta: [ { tag: "tag1" }, { key: "keyss", value: "valuess"}], 85 | key: { 86 | color: '#FF00D8', 87 | style: "solid" 88 | } 89 | } 90 | 91 | ] 92 | }, 93 | { 94 | title: 'random_sensor', 95 | category: 'pressure', 96 | state: "retracted", 97 | meta: [ { tag: "tag1" }, { key: "keyss", value: "valuess"}], 98 | key: { 99 | color: '#00E7FF', 100 | style: "solid" 101 | } 102 | } 103 | ], 104 | data_points: [ 105 | { 106 | count: 1, 107 | position: { 108 | x: 59, 109 | y: 200 110 | } 111 | }, 112 | { 113 | count: 4, 114 | position: { 115 | x: 200, 116 | y: 127 117 | } 118 | }, 119 | { 120 | count: 17, 121 | position: { 122 | x: 615, 123 | y: 131 124 | } 125 | } 126 | ] 127 | } 128 | ] 129 | // Dummy chart for now 130 | }, 131 | { 132 | id: '1', 133 | title: 'Data Set 2' 134 | } 135 | ]; 136 | } 137 | 138 | return DataSets; 139 | }); 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /public/javascripts/services/Observations.js: -------------------------------------------------------------------------------- 1 | app.service('Observations', function($http, $cookieStore, $state) { 2 | var Observations = {}; 3 | var data_points = []; 4 | 5 | Observations.getObservations = function() { 6 | return [ 7 | { 8 | data_set: "launch_39.2", 9 | data_point: "0", 10 | img: "../img/prof-1.png", 11 | author: "Thomas Drach", 12 | created: "1288323623006", 13 | observation: "This doesn't look good, it could be X or Y, but not Z." 14 | }, 15 | { 16 | data_set: "TEST_3A", 17 | data_point: "1", 18 | img: "../img/prof-1.png", 19 | author: "Thomas Drach", 20 | created: "1288323623006", 21 | observation: "I think this problem will continue to grow if we don't address immediately. I think we could do Z if we had A and B, but that's up to Stan." 22 | }, 23 | { 24 | data_set: "launch_39.2", 25 | data_point: "2", 26 | img: "../img/prof-1.png", 27 | author: "Thomas Drach", 28 | created: "1288323623006", 29 | observation: "This doesn't look good, it could be X or Y, but not Z." 30 | } 31 | ]; 32 | }, 33 | 34 | Observations.getDataPoints = function(index) { 35 | data_points = [ 36 | { 37 | list: [ 38 | { 39 | count: 5, 40 | position: { 41 | x: 34, 42 | y: 22 43 | } 44 | }, 45 | { 46 | count: 3, 47 | position: { 48 | x: 200, 49 | y: 78 50 | } 51 | }, 52 | { 53 | count: 12, 54 | position: { 55 | x: 605, 56 | y: 152 57 | } 58 | } 59 | ] 60 | } 61 | ]; 62 | return data_points[index]; 63 | } 64 | 65 | return Observations; 66 | }); 67 | -------------------------------------------------------------------------------- /public/javascripts/services/Sources.js: -------------------------------------------------------------------------------- 1 | app.service('Sources', function($http, $cookieStore, $state) { 2 | var Sources = {}; 3 | 4 | Sources.getDataSources = function() { 5 | return [ 6 | { 7 | title: "LAUNCH_SALAD", 8 | created: "1288323623006", 9 | modified: "1288323623006", 10 | size: "32MB", 11 | length: "32s", 12 | info: "This is some info on this particular source" 13 | }, 14 | { 15 | title: "LAUNCH_BACON", 16 | created: "1288323623006", 17 | modified: "1288323623006", 18 | size: "32MB", 19 | length: "32s", 20 | info: "This is some info on this particular source" 21 | }, 22 | { 23 | title: "LAUNCH_SANDWICH", 24 | created: "1288323623006", 25 | modified: "1288323623006", 26 | size: "32MB", 27 | length: "32s", 28 | info: "This is some info on this particular source" 29 | }, 30 | { 31 | title: "LAUNCH_SALAD", 32 | created: "1288323623006", 33 | modified: "1288323623006", 34 | size: "32MB", 35 | length: "32s", 36 | info: "This is some info on this particular source" 37 | }, 38 | { 39 | title: "LAUNCH_BACON", 40 | created: "1288323623006", 41 | modified: "1288323623006", 42 | size: "32MB", 43 | length: "32s", 44 | info: "This is some info on this particular source" 45 | }, 46 | { 47 | title: "LAUNCH_SANDWICH", 48 | created: "1288323623006", 49 | modified: "1288323623006", 50 | size: "32MB", 51 | length: "32s", 52 | info: "This is some info on this particular source" 53 | }, 54 | { 55 | title: "LAUNCH_SALAD", 56 | created: "1288323623006", 57 | modified: "1288323623006", 58 | size: "32MB", 59 | length: "32s", 60 | info: "This is some info on this particular source" 61 | }, 62 | { 63 | title: "LAUNCH_BACON", 64 | created: "1288323623006", 65 | modified: "1288323623006", 66 | size: "32MB", 67 | length: "32s", 68 | info: "This is some info on this particular source" 69 | }, 70 | { 71 | title: "LAUNCH_SANDWICH", 72 | created: "1288323623006", 73 | modified: "1288323623006", 74 | size: "32MB", 75 | length: "32s", 76 | info: "This is some info on this particular source" 77 | }, 78 | { 79 | title: "LAUNCH_SALAD", 80 | created: "1288323623006", 81 | modified: "1288323623006", 82 | size: "32MB", 83 | length: "32s", 84 | info: "This is some info on this particular source" 85 | }, 86 | { 87 | title: "LAUNCH_BACON", 88 | created: "1288323623006", 89 | modified: "1288323623006", 90 | size: "32MB", 91 | length: "32s", 92 | info: "This is some info on this particular source" 93 | }, 94 | { 95 | title: "LAUNCH_SANDWICH", 96 | created: "1288323623006", 97 | modified: "1288323623006", 98 | size: "32MB", 99 | length: "32s", 100 | info: "This is some info on this particular source" 101 | }, 102 | { 103 | title: "LAUNCH_CHICKEN", 104 | created: "1288323623006", 105 | modified: "1288323623006", 106 | size: "32MB", 107 | length: "32s", 108 | info: "This is some info on this particular source" 109 | } 110 | ]; 111 | } 112 | 113 | return Sources; 114 | }); 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /public/partials/nav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/partials/observation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 5 | 6 |
7 |
8 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /public/partials/share.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Cancel 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /public/partials/tool.html: -------------------------------------------------------------------------------- 1 |
2 | 4 | 5 | 7 | 8 | 10 | 11 | 13 | 14 |
15 | 16 |
17 | 19 | 20 | 22 | 23 |
-------------------------------------------------------------------------------- /public/partials/upload.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 8 | 9 | 10 |
11 | 12 | 13 |
14 |

Upload a TDMS or CSV file

15 |
16 | 19 |
20 |
21 | 22 | 23 |
25 | Drag and Drop, or choose a file 26 |
27 | 28 | 29 | 78 | 79 | 81 |
82 |
-------------------------------------------------------------------------------- /public/templates/data_set.html: -------------------------------------------------------------------------------- 1 |
2 |
4 | 6 | 7 |
8 |
10 | 12 |
13 |
14 | 15 |
16 | Share Data Set 18 | 19 |
20 | 21 |
22 | 159 |
160 | 161 |
164 |
165 | 166 |
169 |
-------------------------------------------------------------------------------- /public/templates/data_sets.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 12 |
13 |
14 |
-------------------------------------------------------------------------------- /public/templates/discuss.html: -------------------------------------------------------------------------------- 1 |
2 |

Activity

3 |
4 | 3 unread observations.Mark as read 5 |
6 | 7 | 8 |
9 | 10 | 46 | -------------------------------------------------------------------------------- /public/templates/navigator.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 7 |
8 | 9 | 11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | -------------------------------------------------------------------------------- /public/templates/views.html: -------------------------------------------------------------------------------- 1 |
2 |
-------------------------------------------------------------------------------- /routes/api/v1/journey.js: -------------------------------------------------------------------------------- 1 | var Journey = require('../../../data/model/JourneyModel'); 2 | 3 | // Routes for Journey Api 4 | exports.JourneyApi = function(app, jwt, e_jwt, secret) { 5 | 6 | // Get Journeys 7 | app.get('/api/v1/journey', function(req, res) { 8 | Journey.find({}, function(err, journey) { 9 | if(err) res.json(err); 10 | else res.json({"journey": journey}); 11 | }); 12 | }); 13 | 14 | // Get A Journey 15 | app.get('/api/v1/journey/:id', function(req, res) { 16 | Journey.findById(req.params.id, function(err, journey) { 17 | if(err) res.json(err); 18 | else res.json({"journey": journey}); 19 | }); 20 | }); 21 | 22 | // New Journey 23 | app.post('/api/v1/journey', function(req, res) { 24 | var journey = new Journey(req.body.journey); 25 | console.log(journey); 26 | Journey.create(journey, function(err) { 27 | if (err) res.json(err); 28 | else res.json({"success": {"journey": journey}}); 29 | }); 30 | }); 31 | 32 | // Update Start 33 | // Partial POST update 34 | app.post('/api/v1/journey/:id/start', function(req, res) { 35 | Journey.findByIdAndUpdate(req.params.id, req.body.journey, function(err, journey) { 36 | console.log(journey); 37 | if (err) res.json(err); 38 | else res.json({"success": {"journey": journey}}); 39 | }); 40 | }); 41 | 42 | // Update Finish 43 | // Partial POST update 44 | app.post('/api/v1/journey/:id/finish', function(req, res) { 45 | Journey.findByIdAndUpdate(req.params.id, req.body.journey, function(err, journey) { 46 | console.log(journey); 47 | if (err) res.json(err); 48 | else res.json({"success": {"journey": journey}}); 49 | }); 50 | }); 51 | 52 | // Add Force / Update Forces 53 | // Partial POST update 54 | app.post('/api/v1/journey/:id/force', function(req, res) { 55 | Journey.findByIdAndUpdate(req.params.id, req.body.journey, function(err, journey) { 56 | console.log(journey); 57 | if (err) res.json(err); 58 | else res.json({"success": {"journey": journey}}); 59 | }); 60 | }); 61 | 62 | // Add Balance / Update Balances 63 | // Partial POST update 64 | app.post('/api/v1/journey/:id/balance', function(req, res) { 65 | Journey.findByIdAndUpdate(req.params.id, req.body.journey, function(err, journey) { 66 | console.log(journey); 67 | if (err) res.json(err); 68 | else res.json({"success": {"journey": journey}}); 69 | }); 70 | }); 71 | 72 | // Add owner 73 | // Partial POST update 74 | app.post('/api/v1/journey/:id/owner', function(req, res) { 75 | Journey.findByIdAndUpdate(req.params.id, req.body.journey, function(err, journey) { 76 | console.log(journey); 77 | if (err) res.json(err); 78 | else res.json({"success": {"journey": journey}}); 79 | }); 80 | }); 81 | 82 | }; 83 | -------------------------------------------------------------------------------- /routes/index.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * GET home page. 4 | */ 5 | 6 | exports.index = function(req, res){ 7 | res.render('index', { title: 'Sciview' }); 8 | }; 9 | -------------------------------------------------------------------------------- /sass/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | position: relative; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | overflow-x: hidden; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | body { 14 | font-size: $font_size; 15 | min-height: 100%; 16 | min-width: 100%; 17 | 18 | background-color: $background_color; 19 | color: $font_color; 20 | font-family: $primary_font_family; 21 | font-weight: 300; 22 | text-align: left; 23 | 24 | @if $interface_style == dark { 25 | background-repeat: no-repeat; 26 | @extend %gradient-1; 27 | } 28 | 29 | -webkit-backface-visibility: hidden; 30 | } 31 | 32 | a { 33 | text-decoration: none; 34 | color: $font_color; 35 | 36 | &:hover { 37 | border-bottom: 2px solid $interface_color; 38 | } 39 | } 40 | 41 | h1, h2, h3, 42 | h4, h5, h6 { 43 | font-size: $normal; 44 | font-weight: 400; 45 | margin: 0; 46 | } 47 | 48 | @font-face { 49 | font-family: 'Sciview'; 50 | src: url('../fonts/icomoon.eot'); 51 | src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), 52 | url('../fonts/icomoon.woff') format('woff'), 53 | url('../fonts/icomoon.ttf') format('truetype'), 54 | url('../fonts/icomoon.svg') format('svg'); 55 | font-weight: normal; 56 | font-style: normal; 57 | } -------------------------------------------------------------------------------- /sass/_config.scss: -------------------------------------------------------------------------------- 1 | // The role of the config sass file is two fold. Adjust !defaults as set in lower level modules 2 | // and to set theme variables. 3 | 4 | // Typically, commented out variables signify a !default setting at a 5 | // lower level module. 6 | 7 | // CSS3 defaults 8 | // *------------------------------------------------------------------------------- 9 | $default-box-sizing: border-box; 10 | 11 | 12 | /////// Typography configuration 13 | // *------------------------------------------------------------------------------- 14 | $font_size: 16px; 15 | 16 | // $kilo: 6.4rem; 17 | $alpha: 2.56rem; 18 | $beta: 1.6rem; 19 | $gamma: 1rem; 20 | $normal: .8rem; 21 | $baby: .6rem; 22 | 23 | $line: $font_size * 1.5; 24 | $small_point_size: 10; 25 | $large_point_size: 14; 26 | 27 | $primary_font_family: #{"pt-sans", "Avenir", Helvetica, sans-serif}; 28 | $mono_font_family: #{"fira-mono", Courier, sans-serif}; 29 | 30 | $spacing_unit: $line; 31 | 32 | 33 | /////// Colors 34 | // *------------------------------------------------------------------------------- 35 | 36 | $interface_style: dark; 37 | 38 | @if $interface_style == dark { 39 | $font_color: white; 40 | $interface_color: white; // White - to be added with transparency 41 | $highlight_color: #00A2CE; // Light blue 42 | $background_color: #152A56; // Dark blue 43 | $notification_color: #FF00E6; 44 | } @else if $interface_style == light { 45 | $font_color: #333; // Dark gray 46 | $interface_color: #2DB7DD; // Light blue 47 | $background_color: #fafafa; // Light gray 48 | $highlight_color: #00A2CE; // Light blue 49 | } 50 | 51 | $white: #fff; 52 | $color-interface: #0F0F1F; 53 | $color-semi-white: #616169; 54 | 55 | $color-highlight: #FF6757; 56 | $color-demure: #C9C5C5; 57 | 58 | $base: #333; 59 | $color-bg-light: #FFFDF5; 60 | $color-bg: #fafafa; 61 | 62 | $base-font-color: $base; 63 | 64 | /////// @media breakpoint defaults 65 | // *------------------------------------------------------------------------------- 66 | $tablet: "screen and (max-width: 64em)"; 67 | $tablet_portrait: "screen and (max-width: 50em) and (orientation: portrait)"; 68 | $tablet_landscape: "screen and (max-width: 50em) and (orientation: landscape)"; 69 | 70 | $mobile: "screen and (max-width: 30em)"; 71 | $mobile_portrait: "screen and (max-width: 30em) and (orientation : portrait)"; 72 | $mobile_landscape: "screen and (max-width: 30em) and (orientation : landscape)"; 73 | 74 | 75 | //////// Other 76 | $z-index-kilo: 2; 77 | $z-index-alpha: 1; 78 | $z-index-beta: -1; 79 | $z-index-neutral: 0; 80 | 81 | $list_item_size: $beta; 82 | 83 | $cubic-out: cubic-bezier(.94,.09,.7,.95); 84 | $cubic-in: cubic-bezier(0,.71,.99,.64); -------------------------------------------------------------------------------- /sass/app.scss: -------------------------------------------------------------------------------- 1 | @import "config"; 2 | @import "lib/bourbon/bourbon"; 3 | @import "lib/neat/neat"; 4 | @import "global/mixins"; 5 | 6 | @import "base"; 7 | 8 | @import "global/layout"; 9 | @import "global/mixins"; 10 | 11 | @import "global/states"; 12 | 13 | @import "patterns/animations"; 14 | @import "patterns/batch"; 15 | @import "patterns/channel"; 16 | @import "patterns/formatting"; 17 | @import "patterns/gradients"; 18 | @import "patterns/icons"; 19 | @import "patterns/input"; 20 | @import "patterns/layout"; 21 | @import "patterns/modals"; 22 | @import "patterns/nav"; 23 | @import "patterns/navigator"; 24 | @import "patterns/overlay"; 25 | @import "patterns/transitions"; 26 | @import "patterns/typography"; 27 | 28 | @import "modules/batches"; 29 | @import "modules/batch"; 30 | @import "modules/channel"; 31 | @import "modules/data-sets"; 32 | @import "modules/discuss"; 33 | @import "modules/discussion"; 34 | @import "modules/main"; 35 | @import "modules/nav"; 36 | @import "modules/navigator"; 37 | @import "modules/observation"; 38 | @import "modules/share"; 39 | @import "modules/source"; 40 | @import "modules/tools"; 41 | @import "modules/upload"; 42 | @import "modules/views"; 43 | -------------------------------------------------------------------------------- /sass/global/_layout.scss: -------------------------------------------------------------------------------- 1 | // Global 2 | // -- Layout 3 | 4 | // Any semantic class that requires layout styles should be included 5 | // in this file, along with layout-only styles. 6 | 7 | // Semantic placeholders will prevent repetition of code 8 | %full-width { 9 | @include span-columns(12); 10 | } 11 | 12 | %sidebar-width { 13 | @include span-columns(3); 14 | @include omega; 15 | } 16 | 17 | %chart-width { 18 | @include span-columns(9); 19 | @include omega; 20 | } 21 | 22 | .data-sets__list { 23 | @extend %full-width; 24 | } 25 | 26 | .data-set { 27 | @extend %full-width; 28 | } 29 | 30 | .data-set__graphs { 31 | @extend %full-width; 32 | } 33 | 34 | .batch { 35 | @extend %full-width; 36 | height: $alpha*8; 37 | } 38 | 39 | .batch__sidebar { 40 | @extend %sidebar-width; 41 | overflow-y: scroll; 42 | } 43 | 44 | .batch__chart { 45 | @extend %chart-width; 46 | height: $alpha*8; 47 | } 48 | 49 | .batch__title { 50 | @include span-columns(9); 51 | } 52 | 53 | .batch__title-icon { 54 | @include span-columns(1); 55 | } 56 | 57 | .batch__add-channel-action { 58 | @include span-columns(1); 59 | } 60 | 61 | .batch__data-item { 62 | @include span-columns(12); 63 | } 64 | 65 | 66 | -------------------------------------------------------------------------------- /sass/global/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Global 2 | // -- Mixins 3 | // Canonical location for SASS mixins 4 | 5 | @function strip-unit($num) { 6 | @return $num / ($num * 0 + 1); 7 | } 8 | 9 | @mixin rem($property, $values...) { 10 | $max: length($values); 11 | $pxValues: ''; 12 | $remValues: ''; 13 | 14 | @for $i from 1 through $max { 15 | $value: strip-unit(nth($values, $i)); 16 | $pxValues: #{$pxValues + $value*16}px; 17 | 18 | @if $i < $max { 19 | $pxValues: #{$pxValues + " "}; 20 | } 21 | } 22 | 23 | @for $i from 1 through $max { 24 | $value: strip-unit(nth($values, $i)); 25 | $remValues: #{$remValues + $value}rem; 26 | 27 | @if $i < $max { 28 | $remValues: #{$remValues + " "}; 29 | } 30 | } 31 | 32 | #{$property}: $pxValues; 33 | #{$property}: $remValues; 34 | } 35 | 36 | // Vendor prefixing 37 | @mixin vp($name, $argument) { 38 | -webkit-#{$name}: #{$argument}; 39 | -ms-#{$name}: #{$argument}; 40 | -moz-#{$name}: #{$argument}; 41 | -o-#{$name}: #{$argument}; 42 | #{$name}: #{$argument}; 43 | } 44 | 45 | // keyframes mixin 46 | @mixin keyframes($name) { 47 | @-webkit-keyframes #{$name} { 48 | @content; 49 | } 50 | @-moz-keyframes #{$name} { 51 | @content; 52 | } 53 | @-ms-keyframes #{$name} { 54 | @content; 55 | } 56 | @keyframes #{$name} { 57 | @content; 58 | } 59 | } -------------------------------------------------------------------------------- /sass/global/_states.scss: -------------------------------------------------------------------------------- 1 | // Global 2 | // -- States 3 | 4 | // This file should be used for state-specific CSS classes. 5 | // Prefix class names with 'is' as much as possible 6 | 7 | // EX: .is-selected, .is-transparent 8 | 9 | .is-current { 10 | 11 | &.nav__data-sets { 12 | color: $font_color; 13 | } 14 | 15 | &.nav__navigator { 16 | color: $font_color; 17 | } 18 | 19 | &.data-sets__item { 20 | background-color: rgba($interface_color, 0.05); 21 | } 22 | 23 | .data-sets__item-title { 24 | color: $font_color; 25 | } 26 | 27 | .data-sets__share-action { 28 | display: block; 29 | } 30 | 31 | } 32 | 33 | .is-blurred { 34 | -webkit-filter: blur(10px); 35 | } 36 | 37 | .is-retracted { 38 | 39 | // Groups 40 | .batch__data-group-title { 41 | border-bottom: 1px solid rgba($white, 0.1); 42 | } 43 | .batch__data-group-expand { 44 | @extend %batch-rotate-chevron-1; 45 | &:hover { 46 | opacity: 1; 47 | } 48 | } 49 | .batch__data-group { 50 | @extend %batch-retract-animation; 51 | } 52 | 53 | // Meta 54 | .channel__dropdown { 55 | @extend %channel-rotate-chevron; 56 | } 57 | 58 | .channel__meta { 59 | @extend %batch-retract-animation; 60 | display: none; 61 | } 62 | 63 | 64 | 65 | } 66 | 67 | .is-group { 68 | .channel__title { 69 | @include shift(1); 70 | } 71 | .channel__category { 72 | @include shift(1); 73 | } 74 | .channel__dropdown { 75 | left: 1em; 76 | } 77 | } 78 | 79 | .is-active { 80 | &.channel__meta-add { 81 | opacity: 1; 82 | color: $font_color; 83 | } 84 | 85 | } -------------------------------------------------------------------------------- /sass/lib/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Custom Helpers 2 | @import "helpers/deprecated-webkit-gradient"; 3 | @import "helpers/gradient-positions-parser"; 4 | @import "helpers/linear-positions-parser"; 5 | @import "helpers/radial-arg-parser"; 6 | @import "helpers/radial-positions-parser"; 7 | @import "helpers/render-gradients"; 8 | @import "helpers/shape-size-stripper"; 9 | 10 | // Custom Functions 11 | @import "functions/compact"; 12 | @import "functions/flex-grid"; 13 | @import "functions/grid-width"; 14 | @import "functions/linear-gradient"; 15 | @import "functions/modular-scale"; 16 | @import "functions/px-to-em"; 17 | @import "functions/radial-gradient"; 18 | @import "functions/tint-shade"; 19 | @import "functions/transition-property-name"; 20 | 21 | // CSS3 Mixins 22 | @import "css3/animation"; 23 | @import "css3/appearance"; 24 | @import "css3/backface-visibility"; 25 | @import "css3/background"; 26 | @import "css3/background-image"; 27 | @import "css3/border-image"; 28 | @import "css3/border-radius"; 29 | @import "css3/box-sizing"; 30 | @import "css3/columns"; 31 | @import "css3/flex-box"; 32 | @import "css3/font-face"; 33 | @import "css3/hidpi-media-query"; 34 | @import "css3/image-rendering"; 35 | @import "css3/inline-block"; 36 | @import "css3/keyframes"; 37 | @import "css3/linear-gradient"; 38 | @import "css3/perspective"; 39 | @import "css3/radial-gradient"; 40 | @import "css3/transform"; 41 | @import "css3/transition"; 42 | @import "css3/user-select"; 43 | @import "css3/placeholder"; 44 | 45 | // Addons & other mixins 46 | @import "addons/button"; 47 | @import "addons/clearfix"; 48 | @import "addons/font-family"; 49 | @import "addons/hide-text"; 50 | @import "addons/html5-input-types"; 51 | @import "addons/position"; 52 | @import "addons/prefixer"; 53 | @import "addons/retina-image"; 54 | @import "addons/size"; 55 | @import "addons/timing-functions"; 56 | @import "addons/triangle"; 57 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_button.scss: -------------------------------------------------------------------------------- 1 | @mixin button ($style: simple, $base-color: #4294f0) { 2 | 3 | @if type-of($style) == color { 4 | $base-color: $style; 5 | $style: simple; 6 | } 7 | 8 | // Grayscale button 9 | @if $base-color == grayscale($base-color) { 10 | @if $style == simple { 11 | @include simple($base-color, $grayscale: true); 12 | } 13 | 14 | @else if $style == shiny { 15 | @include shiny($base-color, $grayscale: true); 16 | } 17 | 18 | @else if $style == pill { 19 | @include pill($base-color, $grayscale: true); 20 | } 21 | } 22 | 23 | // Colored button 24 | @else { 25 | @if $style == simple { 26 | @include simple($base-color); 27 | } 28 | 29 | @else if $style == shiny { 30 | @include shiny($base-color); 31 | } 32 | 33 | @else if $style == pill { 34 | @include pill($base-color); 35 | } 36 | } 37 | 38 | &:disabled { 39 | opacity: 0.5; 40 | cursor: not-allowed; 41 | } 42 | } 43 | 44 | 45 | // Simple Button 46 | //************************************************************************// 47 | @mixin simple($base-color, $grayscale: false) { 48 | $color: hsl(0, 0, 100%); 49 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 50 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 51 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 52 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 53 | 54 | @if lightness($base-color) > 70% { 55 | $color: hsl(0, 0, 20%); 56 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 57 | } 58 | 59 | @if $grayscale == true { 60 | $border: grayscale($border); 61 | $inset-shadow: grayscale($inset-shadow); 62 | $stop-gradient: grayscale($stop-gradient); 63 | $text-shadow: grayscale($text-shadow); 64 | } 65 | 66 | border: 1px solid $border; 67 | border-radius: 3px; 68 | box-shadow: inset 0 1px 0 0 $inset-shadow; 69 | color: $color; 70 | display: inline-block; 71 | font-size: 11px; 72 | font-weight: bold; 73 | @include linear-gradient ($base-color, $stop-gradient); 74 | padding: 7px 18px; 75 | text-decoration: none; 76 | text-shadow: 0 1px 0 $text-shadow; 77 | background-clip: padding-box; 78 | 79 | &:hover:not(:disabled) { 80 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 81 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 82 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 83 | 84 | @if $grayscale == true { 85 | $base-color-hover: grayscale($base-color-hover); 86 | $inset-shadow-hover: grayscale($inset-shadow-hover); 87 | $stop-gradient-hover: grayscale($stop-gradient-hover); 88 | } 89 | 90 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 91 | cursor: pointer; 92 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 93 | } 94 | 95 | &:active:not(:disabled) { 96 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 97 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 98 | 99 | @if $grayscale == true { 100 | $border-active: grayscale($border-active); 101 | $inset-shadow-active: grayscale($inset-shadow-active); 102 | } 103 | 104 | border: 1px solid $border-active; 105 | box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; 106 | } 107 | } 108 | 109 | 110 | // Shiny Button 111 | //************************************************************************// 112 | @mixin shiny($base-color, $grayscale: false) { 113 | $color: hsl(0, 0, 100%); 114 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 115 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 116 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 117 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 118 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 119 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 120 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 121 | 122 | @if lightness($base-color) > 70% { 123 | $color: hsl(0, 0, 20%); 124 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 125 | } 126 | 127 | @if $grayscale == true { 128 | $border: grayscale($border); 129 | $border-bottom: grayscale($border-bottom); 130 | $fourth-stop: grayscale($fourth-stop); 131 | $inset-shadow: grayscale($inset-shadow); 132 | $second-stop: grayscale($second-stop); 133 | $text-shadow: grayscale($text-shadow); 134 | $third-stop: grayscale($third-stop); 135 | } 136 | 137 | border: 1px solid $border; 138 | border-bottom: 1px solid $border-bottom; 139 | border-radius: 5px; 140 | box-shadow: inset 0 1px 0 0 $inset-shadow; 141 | color: $color; 142 | display: inline-block; 143 | font-size: 14px; 144 | font-weight: bold; 145 | @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 146 | padding: 8px 20px; 147 | text-align: center; 148 | text-decoration: none; 149 | text-shadow: 0 -1px 1px $text-shadow; 150 | 151 | &:hover:not(:disabled) { 152 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 153 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 154 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 155 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 156 | 157 | @if $grayscale == true { 158 | $first-stop-hover: grayscale($first-stop-hover); 159 | $second-stop-hover: grayscale($second-stop-hover); 160 | $third-stop-hover: grayscale($third-stop-hover); 161 | $fourth-stop-hover: grayscale($fourth-stop-hover); 162 | } 163 | 164 | cursor: pointer; 165 | @include linear-gradient(top, $first-stop-hover 0%, 166 | $second-stop-hover 50%, 167 | $third-stop-hover 50%, 168 | $fourth-stop-hover 100%); 169 | } 170 | 171 | &:active:not(:disabled) { 172 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 173 | 174 | @if $grayscale == true { 175 | $inset-shadow-active: grayscale($inset-shadow-active); 176 | } 177 | 178 | box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; 179 | } 180 | } 181 | 182 | 183 | // Pill Button 184 | //************************************************************************// 185 | @mixin pill($base-color, $grayscale: false) { 186 | $color: hsl(0, 0, 100%); 187 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 188 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 189 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 190 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 191 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 192 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 193 | 194 | @if lightness($base-color) > 70% { 195 | $color: hsl(0, 0, 20%); 196 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 197 | } 198 | 199 | @if $grayscale == true { 200 | $border-bottom: grayscale($border-bottom); 201 | $border-sides: grayscale($border-sides); 202 | $border-top: grayscale($border-top); 203 | $inset-shadow: grayscale($inset-shadow); 204 | $stop-gradient: grayscale($stop-gradient); 205 | $text-shadow: grayscale($text-shadow); 206 | } 207 | 208 | border: 1px solid $border-top; 209 | border-color: $border-top $border-sides $border-bottom; 210 | border-radius: 16px; 211 | box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; 212 | color: $color; 213 | display: inline-block; 214 | font-size: 11px; 215 | font-weight: normal; 216 | line-height: 1; 217 | @include linear-gradient ($base-color, $stop-gradient); 218 | padding: 5px 16px; 219 | text-align: center; 220 | text-decoration: none; 221 | text-shadow: 0 -1px 1px $text-shadow; 222 | background-clip: padding-box; 223 | 224 | &:hover:not(:disabled) { 225 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 226 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 227 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 228 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 229 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 230 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 231 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 232 | 233 | @if $grayscale == true { 234 | $base-color-hover: grayscale($base-color-hover); 235 | $border-bottom: grayscale($border-bottom); 236 | $border-sides: grayscale($border-sides); 237 | $border-top: grayscale($border-top); 238 | $inset-shadow-hover: grayscale($inset-shadow-hover); 239 | $stop-gradient-hover: grayscale($stop-gradient-hover); 240 | $text-shadow-hover: grayscale($text-shadow-hover); 241 | } 242 | 243 | border: 1px solid $border-top; 244 | border-color: $border-top $border-sides $border-bottom; 245 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 246 | cursor: pointer; 247 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 248 | text-shadow: 0 -1px 1px $text-shadow-hover; 249 | background-clip: padding-box; 250 | } 251 | 252 | &:active:not(:disabled) { 253 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 254 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 255 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 256 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 257 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 258 | 259 | @if $grayscale == true { 260 | $active-color: grayscale($active-color); 261 | $border-active: grayscale($border-active); 262 | $border-bottom-active: grayscale($border-bottom-active); 263 | $inset-shadow-active: grayscale($inset-shadow-active); 264 | $text-shadow-active: grayscale($text-shadow-active); 265 | } 266 | 267 | background: $active-color; 268 | border: 1px solid $border-active; 269 | border-bottom: 1px solid $border-bottom-active; 270 | box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff; 271 | text-shadow: 0 -1px 1px $text-shadow-active; 272 | } 273 | } 274 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Micro clearfix provides an easy way to contain floats without adding additional markup 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | *zoom: 1; 16 | 17 | &:before, 18 | &:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | &:after { 24 | clear: both; 25 | } 26 | } 27 | 28 | // Acknowledgements 29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) 30 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | color: transparent; 3 | font: 0/0 a; 4 | text-shadow: none; 5 | } 6 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | $unquoted-inputs-list: (); 24 | @each $input-type in $inputs-list { 25 | $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); 26 | } 27 | 28 | $all-text-inputs: $unquoted-inputs-list; 29 | 30 | 31 | // Hover Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-hover: (); 34 | @each $input-type in $unquoted-inputs-list { 35 | $input-type-hover: $input-type + ":hover"; 36 | $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); 37 | } 38 | 39 | // Focus Pseudo-class 40 | //************************************************************************// 41 | $all-text-inputs-focus: (); 42 | @each $input-type in $unquoted-inputs-list { 43 | $input-type-focus: $input-type + ":focus"; 44 | $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); 45 | } 46 | 47 | // You must use interpolation on the variable: 48 | // #{$all-text-inputs} 49 | // #{$all-text-inputs-hover} 50 | // #{$all-text-inputs-focus} 51 | 52 | // Example 53 | //************************************************************************// 54 | // #{$all-text-inputs}, textarea { 55 | // border: 1px solid red; 56 | // } 57 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $top: nth($coordinates, 1); 9 | $right: nth($coordinates, 2); 10 | $bottom: nth($coordinates, 3); 11 | $left: nth($coordinates, 4); 12 | 13 | position: $position; 14 | 15 | @if $top == auto { 16 | top: $top; 17 | } 18 | @else if not(unitless($top)) { 19 | top: $top; 20 | } 21 | 22 | @if $right == auto { 23 | right: $right; 24 | } 25 | @else if not(unitless($right)) { 26 | right: $right; 27 | } 28 | 29 | @if $bottom == auto { 30 | bottom: $bottom; 31 | } 32 | @else if not(unitless($bottom)) { 33 | bottom: $bottom; 34 | } 35 | 36 | @if $left == auto { 37 | left: $left; 38 | } 39 | @else if not(unitless($left)) { 40 | left: $left; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | $prefix-for-webkit: true !default; 5 | $prefix-for-mozilla: true !default; 6 | $prefix-for-microsoft: true !default; 7 | $prefix-for-opera: true !default; 8 | $prefix-for-spec: true !default; // required for keyframe mixin 9 | 10 | @mixin prefixer ($property, $value, $prefixes) { 11 | @each $prefix in $prefixes { 12 | @if $prefix == webkit { 13 | @if $prefix-for-webkit { 14 | -webkit-#{$property}: $value; 15 | } 16 | } 17 | @else if $prefix == moz { 18 | @if $prefix-for-mozilla { 19 | -moz-#{$property}: $value; 20 | } 21 | } 22 | @else if $prefix == ms { 23 | @if $prefix-for-microsoft { 24 | -ms-#{$property}: $value; 25 | } 26 | } 27 | @else if $prefix == o { 28 | @if $prefix-for-opera { 29 | -o-#{$property}: $value; 30 | } 31 | } 32 | @else if $prefix == spec { 33 | @if $prefix-for-spec { 34 | #{$property}: $value; 35 | } 36 | } 37 | @else { 38 | @warn "Unrecognized prefix: #{$prefix}"; 39 | } 40 | } 41 | } 42 | 43 | @mixin disable-prefix-for-all() { 44 | $prefix-for-webkit: false; 45 | $prefix-for-mozilla: false; 46 | $prefix-for-microsoft: false; 47 | $prefix-for-opera: false; 48 | $prefix-for-spec: false; 49 | } 50 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | 11 | @if $asset-pipeline { 12 | @if $retina-filename { 13 | background-image: image-url("#{$retina-filename}.#{$extension}"); 14 | } 15 | @else { 16 | background-image: image-url("#{$filename}@2x.#{$extension}"); 17 | } 18 | } 19 | 20 | @else { 21 | @if $retina-filename { 22 | background-image: url("#{$retina-filename}.#{$extension}"); 23 | } 24 | @else { 25 | background-image: url("#{$filename}@2x.#{$extension}"); 26 | } 27 | } 28 | 29 | background-size: $background-size; 30 | 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | @if length($size) == 1 { 3 | @if $size == auto { 4 | width: $size; 5 | height: $size; 6 | } 7 | 8 | @else if unitless($size) { 9 | width: $size + px; 10 | height: $size + px; 11 | } 12 | 13 | @else if not(unitless($size)) { 14 | width: $size; 15 | height: $size; 16 | } 17 | } 18 | 19 | // Width x Height 20 | @if length($size) == 2 { 21 | $width: nth($size, 1); 22 | $height: nth($size, 2); 23 | 24 | @if $width == auto { 25 | width: $width; 26 | } 27 | @else if not(unitless($width)) { 28 | width: $width; 29 | } 30 | @else if unitless($width) { 31 | width: $width + px; 32 | } 33 | 34 | @if $height == auto { 35 | height: $height; 36 | } 37 | @else if not(unitless($height)) { 38 | height: $height; 39 | } 40 | @else if unitless($height) { 41 | height: $height + px; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /sass/lib/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 6 | border-color: transparent; 7 | border-style: solid; 8 | border-width: $size / 2; 9 | 10 | @if $direction == up { 11 | border-bottom-color: $color; 12 | 13 | } @else if $direction == right { 14 | border-left-color: $color; 15 | 16 | } @else if $direction == down { 17 | border-top-color: $color; 18 | 19 | } @else if $direction == left { 20 | border-right-color: $color; 21 | } 22 | } 23 | 24 | @else if ($direction == up-right) or ($direction == up-left) { 25 | border-top: $size solid $color; 26 | 27 | @if $direction == up-right { 28 | border-left: $size solid transparent; 29 | 30 | } @else if $direction == up-left { 31 | border-right: $size solid transparent; 32 | } 33 | } 34 | 35 | @else if ($direction == down-right) or ($direction == down-left) { 36 | border-bottom: $size solid $color; 37 | 38 | @if $direction == down-right { 39 | border-left: $size solid transparent; 40 | 41 | } @else if $direction == down-left { 42 | border-right: $size solid transparent; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | background-image: _add-prefix($images, webkit); 8 | background-image: _add-prefix($images); 9 | } 10 | 11 | @function _add-prefix($images, $vendor: false) { 12 | $images-prefixed: (); 13 | $gradient-positions: false; 14 | @for $i from 1 through length($images) { 15 | $type: type-of(nth($images, $i)); // Get type of variable - List or String 16 | 17 | // If variable is a list - Gradient 18 | @if $type == list { 19 | $gradient-type: nth(nth($images, $i), 1); // linear or radial 20 | $gradient-pos: null; 21 | $gradient-args: null; 22 | 23 | @if ($gradient-type == linear) or ($gradient-type == radial) { 24 | $gradient-pos: nth(nth($images, $i), 2); // Get gradient position 25 | $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) 26 | } 27 | @else { 28 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) 29 | } 30 | 31 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 32 | $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 33 | $images-prefixed: append($images-prefixed, $gradient, comma); 34 | } 35 | // If variable is a string - Image 36 | @else if $type == string { 37 | $images-prefixed: join($images-prefixed, nth($images, $i), comma); 38 | } 39 | } 40 | @return $images-prefixed; 41 | } 42 | 43 | //Examples: 44 | //@include background-image(linear-gradient(top, orange, red)); 45 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); 46 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); 47 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); 48 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); 49 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background( 7 | $background-1 , $background-2: false, 8 | $background-3: false, $background-4: false, 9 | $background-5: false, $background-6: false, 10 | $background-7: false, $background-8: false, 11 | $background-9: false, $background-10: false, 12 | $fallback: false 13 | ) { 14 | $backgrounds: compact($background-1, $background-2, 15 | $background-3, $background-4, 16 | $background-5, $background-6, 17 | $background-7, $background-8, 18 | $background-9, $background-10); 19 | 20 | $fallback-color: false; 21 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 22 | $fallback-color: $fallback; 23 | } 24 | @else { 25 | $fallback-color: _extract-background-color($backgrounds); 26 | } 27 | 28 | @if $fallback-color { 29 | background-color: $fallback-color; 30 | } 31 | background: _background-add-prefix($backgrounds, webkit); 32 | background: _background-add-prefix($backgrounds); 33 | } 34 | 35 | @function _extract-background-color($backgrounds) { 36 | $final-bg-layer: nth($backgrounds, length($backgrounds)); 37 | @if type-of($final-bg-layer) == list { 38 | @for $i from 1 through length($final-bg-layer) { 39 | $value: nth($final-bg-layer, $i); 40 | @if type-of($value) == color { 41 | @return $value; 42 | } 43 | } 44 | } 45 | @return false; 46 | } 47 | 48 | @function _background-add-prefix($backgrounds, $vendor: false) { 49 | $backgrounds-prefixed: (); 50 | 51 | @for $i from 1 through length($backgrounds) { 52 | $shorthand: nth($backgrounds, $i); // Get member for current index 53 | $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image) 54 | 55 | // If shorthand is a list (gradient) 56 | @if $type == list { 57 | $first-member: nth($shorthand, 1); // Get first member of shorthand 58 | 59 | // Linear Gradient 60 | @if index(linear radial, nth($first-member, 1)) { 61 | $gradient-type: nth($first-member, 1); // linear || radial 62 | $gradient-args: false; 63 | $gradient-positions: false; 64 | $shorthand-start: false; 65 | @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,... 66 | $gradient-positions: nth($first-member, 2); 67 | $gradient-args: nth($first-member, 3); 68 | $shorthand-start: 2; 69 | } 70 | @else { // Linear gradient only - lg(red,orange),... 71 | $gradient-positions: nth($shorthand, 2); 72 | $gradient-args: nth($shorthand, 3); // Get gradient (red, blue) 73 | } 74 | 75 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions); 76 | $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 77 | 78 | // Append any additional shorthand args to gradient 79 | @if $shorthand-start { 80 | @for $j from $shorthand-start through length($shorthand) { 81 | $gradient: join($gradient, nth($shorthand, $j), space); 82 | } 83 | } 84 | $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); 85 | } 86 | // Image with additional properties 87 | @else { 88 | $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); 89 | } 90 | } 91 | // If shorthand is a simple string (color or image) 92 | @else if $type == string { 93 | $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); 94 | } 95 | } 96 | @return $backgrounds-prefixed; 97 | } 98 | 99 | //Examples: 100 | //@include background(linear-gradient(top, orange, red)); 101 | //@include background(radial-gradient(circle at 40% 40%, orange, red)); 102 | //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); 103 | //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); 104 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($images) { 2 | -webkit-border-image: _border-add-prefix($images, webkit); 3 | -moz-border-image: _border-add-prefix($images, moz); 4 | -o-border-image: _border-add-prefix($images, o); 5 | border-image: _border-add-prefix($images); 6 | } 7 | 8 | @function _border-add-prefix($images, $vendor: false) { 9 | $border-image: null; 10 | $images-type: type-of(nth($images, 1)); 11 | $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) 12 | 13 | // If input is a gradient 14 | @if $images-type == string { 15 | @if ($first-var == "linear") or ($first-var == "radial") { 16 | $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) 17 | $gradient-pos: nth($images, 2); // Get gradient position 18 | $gradient-args: nth($images, 3); // Get actual gradient (red, blue) 19 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 20 | $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 21 | } 22 | // If input is a URL 23 | @else { 24 | $border-image: $images; 25 | } 26 | } 27 | // If input is gradient or url + additional args 28 | @else if $images-type == list { 29 | $type: type-of(nth($images, 1)); // Get type of variable - List or String 30 | 31 | // If variable is a list - Gradient 32 | @if $type == list { 33 | $gradient: nth($images, 1); 34 | $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) 35 | $gradient-pos: nth($gradient, 2); // Get gradient position 36 | $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) 37 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 38 | $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 39 | 40 | @for $i from 2 through length($images) { 41 | $border-image: append($border-image, nth($images, $i)); 42 | } 43 | } 44 | } 45 | @return $border-image; 46 | } 47 | 48 | //Examples: 49 | // @include border-image(url("image.png")); 50 | // @include border-image(url("image.png") 20 stretch); 51 | // @include border-image(linear-gradient(45deg, orange, yellow)); 52 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 53 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 54 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 55 | 56 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | $default-box-sizing: border-box !default; 2 | 3 | @mixin box-sizing ($box: $default-box-sizing) { 4 | // content-box | border-box | inherit 5 | @include prefixer(box-sizing, $box, webkit moz spec); 6 | } 7 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(columns-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_flex-box.scss: -------------------------------------------------------------------------------- 1 | // CSS3 Flexible Box Model and property defaults 2 | 3 | // Custom shorthand notation for flexbox 4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) { 5 | @include display-box; 6 | @include box-orient($orient); 7 | @include box-pack($pack); 8 | @include box-align($align); 9 | } 10 | 11 | @mixin display-box { 12 | display: -webkit-box; 13 | display: -moz-box; 14 | display: box; 15 | } 16 | 17 | @mixin box-orient($orient: inline-axis) { 18 | // horizontal|vertical|inline-axis|block-axis|inherit 19 | @include prefixer(box-orient, $orient, webkit moz spec); 20 | } 21 | 22 | @mixin box-pack($pack: start) { 23 | // start|end|center|justify 24 | @include prefixer(box-pack, $pack, webkit moz spec); 25 | } 26 | 27 | @mixin box-align($align: stretch) { 28 | // start|end|center|baseline|stretch 29 | @include prefixer(box-align, $align, webkit moz spec); 30 | } 31 | 32 | @mixin box-direction($direction: normal) { 33 | // normal|reverse|inherit 34 | @include prefixer(box-direction, $direction, webkit moz spec); 35 | } 36 | 37 | @mixin box-lines($lines: single) { 38 | // single|multiple 39 | @include prefixer(box-lines, $lines, webkit moz spec); 40 | } 41 | 42 | @mixin box-ordinal-group($int: 1) { 43 | @include prefixer(box-ordinal-group, $int, webkit moz spec); 44 | } 45 | 46 | @mixin box-flex($value: 0.0) { 47 | @include prefixer(box-flex, $value, webkit moz spec); 48 | } 49 | 50 | @mixin box-flex-group($int: 1) { 51 | @include prefixer(box-flex-group, $int, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_font-face.scss: -------------------------------------------------------------------------------- 1 | $default_family: web-font !default; 2 | $default_path: web-font !default; 3 | $default_weight: normal !default; 4 | $default_style: normal !default; 5 | 6 | // Order of the includes matters, and it is: normal, bold, italic, bold+italic. 7 | 8 | @mixin font-face($font_family: $default_family, $file_path: $default_path, $weight: $default_weight, $style: $default_style ) { 9 | @font-face { 10 | font-family: $font_family; 11 | font-weight: $weight; 12 | font-style: $style; 13 | src: url('#{$fontDir}#{$file_path}.eot'); 14 | src: url('#{$fontDir}#{$file_path}.eot?#iefix') format('embedded-opentype'), 15 | url('#{$fontDir}#{$file_path}.woff') format('woff'), 16 | url('#{$fontDir}#{$file_path}.ttf') format('truetype'), 17 | url('#{$fontDir}#{$file_path}.svg##{$font_family}') format('svg'); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_hidpi-media-query.scss: -------------------------------------------------------------------------------- 1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 2 | @mixin hidpi($ratio: 1.3) { 3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 4 | only screen and (min--moz-device-pixel-ratio: $ratio), 5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 6 | only screen and (min-resolution: #{round($ratio*96)}dpi), 7 | only screen and (min-resolution: #{$ratio}dppx) { 8 | @content; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_image-rendering.scss: -------------------------------------------------------------------------------- 1 | @mixin image-rendering ($mode:optimizeQuality) { 2 | 3 | @if ($mode == optimize-contrast) { 4 | image-rendering: -moz-crisp-edges; 5 | image-rendering: -o-crisp-edges; 6 | image-rendering: -webkit-optimize-contrast; 7 | image-rendering: optimize-contrast; 8 | } 9 | 10 | @else { 11 | image-rendering: $mode; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_inline-block.scss: -------------------------------------------------------------------------------- 1 | // Legacy support for inline-block in IE7 (maybe IE6) 2 | @mixin inline-block { 3 | display: inline-block; 4 | vertical-align: baseline; 5 | zoom: 1; 6 | *display: inline; 7 | *vertical-align: auto; 8 | } 9 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content 2 | @mixin keyframes($name) { 3 | $original-prefix-for-webkit: $prefix-for-webkit; 4 | $original-prefix-for-mozilla: $prefix-for-mozilla; 5 | $original-prefix-for-microsoft: $prefix-for-microsoft; 6 | $original-prefix-for-opera: $prefix-for-opera; 7 | $original-prefix-for-spec: $prefix-for-spec; 8 | 9 | @if $original-prefix-for-webkit { 10 | @include disable-prefix-for-all(); 11 | $prefix-for-webkit: true; 12 | @-webkit-keyframes #{$name} { 13 | @content; 14 | } 15 | } 16 | @if $original-prefix-for-mozilla { 17 | @include disable-prefix-for-all(); 18 | $prefix-for-mozilla: true; 19 | @-moz-keyframes #{$name} { 20 | @content; 21 | } 22 | } 23 | @if $original-prefix-for-opera { 24 | @include disable-prefix-for-all(); 25 | $prefix-for-opera: true; 26 | @-o-keyframes #{$name} { 27 | @content; 28 | } 29 | } 30 | @if $original-prefix-for-spec { 31 | @include disable-prefix-for-all(); 32 | $prefix-for-spec: true; 33 | @keyframes #{$name} { 34 | @content; 35 | } 36 | } 37 | 38 | $prefix-for-webkit: $original-prefix-for-webkit; 39 | $prefix-for-mozilla: $original-prefix-for-mozilla; 40 | $prefix-for-microsoft: $original-prefix-for-microsoft; 41 | $prefix-for-opera: $original-prefix-for-opera; 42 | $prefix-for-spec: $original-prefix-for-spec; 43 | } 44 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($pos, $G1, $G2: false, 2 | $G3: false, $G4: false, 3 | $G5: false, $G6: false, 4 | $G7: false, $G8: false, 5 | $G9: false, $G10: false, 6 | $deprecated-pos1: left top, 7 | $deprecated-pos2: left bottom, 8 | $fallback: false) { 9 | // Detect what type of value exists in $pos 10 | $pos-type: type-of(nth($pos, 1)); 11 | $pos-spec: null; 12 | $pos-degree: null; 13 | 14 | // If $pos is missing from mixin, reassign vars and add default position 15 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 16 | $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; 17 | $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; 18 | $pos: null; 19 | } 20 | 21 | @if $pos { 22 | $positions: _linear-positions-parser($pos); 23 | $pos-degree: nth($positions, 1); 24 | $pos-spec: nth($positions, 2); 25 | } 26 | 27 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 28 | 29 | // Set $G1 as the default fallback color 30 | $fallback-color: nth($G1, 1); 31 | 32 | // If $fallback is a color use that color as the fallback color 33 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 34 | $fallback-color: $fallback; 35 | } 36 | 37 | background-color: $fallback-color; 38 | background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 39 | background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome 40 | background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); 41 | } 42 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_perspective.scss: -------------------------------------------------------------------------------- 1 | @mixin perspective($depth: none) { 2 | // none | 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | $placeholders: '-webkit-input-placeholder', 2 | '-moz-placeholder', 3 | '-ms-input-placeholder'; 4 | 5 | @mixin placeholder { 6 | @each $placeholder in $placeholders { 7 | @if $placeholder == "-webkit-input-placeholder" { 8 | &::#{$placeholder} { 9 | @content; 10 | } 11 | } 12 | @else if $placeholder == "-moz-placeholder" { 13 | // FF 18- 14 | &:#{$placeholder} { 15 | @content; 16 | } 17 | 18 | // FF 19+ 19 | &::#{$placeholder} { 20 | @content; 21 | } 22 | } 23 | @else { 24 | &:#{$placeholder} { 25 | @content; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: false, $G4: false, 4 | $G5: false, $G6: false, 5 | $G7: false, $G8: false, 6 | $G9: false, $G10: false, 7 | $pos: null, 8 | $shape-size: null, 9 | $deprecated-pos1: center center, 10 | $deprecated-pos2: center center, 11 | $deprecated-radius1: 0, 12 | $deprecated-radius2: 460, 13 | $fallback: false) { 14 | 15 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 16 | $G1: nth($data, 1); 17 | $G2: nth($data, 2); 18 | $pos: nth($data, 3); 19 | $shape-size: nth($data, 4); 20 | 21 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 22 | 23 | // Strip deprecated cover/contain for spec 24 | $shape-size-spec: _shape-size-stripper($shape-size); 25 | 26 | // Set $G1 as the default fallback color 27 | $first-color: nth($full, 1); 28 | $fallback-color: nth($first-color, 1); 29 | 30 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 31 | $fallback-color: $fallback; 32 | } 33 | 34 | // Add Commas and spaces 35 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 36 | $pos: if($pos, '#{$pos}, ', null); 37 | $pos-spec: if($pos, 'at #{$pos}', null); 38 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 39 | 40 | background-color: $fallback-color; 41 | background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4 42 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 43 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 44 | } 45 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all, 2.0s, ease-in-out); 3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); 4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); 5 | 6 | @mixin transition ($properties...) { 7 | @if length($properties) >= 1 { 8 | @include prefixer(transition, $properties, webkit moz spec); 9 | } 10 | 11 | @else { 12 | $properties: all 0.15s ease-out 0; 13 | @include prefixer(transition, $properties, webkit moz spec); 14 | } 15 | } 16 | 17 | @mixin transition-property ($properties...) { 18 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 19 | -moz-transition-property: transition-property-names($properties, 'moz'); 20 | transition-property: transition-property-names($properties, false); 21 | } 22 | 23 | @mixin transition-duration ($times...) { 24 | @include prefixer(transition-duration, $times, webkit moz spec); 25 | } 26 | 27 | @mixin transition-timing-function ($motions...) { 28 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 29 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 30 | } 31 | 32 | @mixin transition-delay ($times...) { 33 | @include prefixer(transition-delay, $times, webkit moz spec); 34 | } 35 | -------------------------------------------------------------------------------- /sass/lib/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_compact.scss: -------------------------------------------------------------------------------- 1 | // Remove `false` values from a list 2 | 3 | @function compact($vars...) { 4 | $list: (); 5 | @each $var in $vars { 6 | @if $var { 7 | $list: append($list, $var, comma); 8 | } 9 | } 10 | @return $list; 11 | } 12 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_flex-grid.scss: -------------------------------------------------------------------------------- 1 | // Flexible grid 2 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 5 | @return percentage($width / $container-width); 6 | } 7 | 8 | // Flexible gutter 9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($gutter / $container-width); 12 | } 13 | 14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 16 | // 17 | // The calculation presumes that your column structure will be missing the last gutter: 18 | // 19 | // -- column -- gutter -- column -- gutter -- column 20 | // 21 | // $fg-column: 60px; // Column Width 22 | // $fg-gutter: 25px; // Gutter Width 23 | // $fg-max-columns: 12; // Total Columns For Main Container 24 | // 25 | // div { 26 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 27 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 28 | // 29 | // p { 30 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 31 | // float: left; 32 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 33 | // } 34 | // 35 | // blockquote { 36 | // float: left; 37 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 38 | // } 39 | // } -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @function linear-gradient($pos, $gradients...) { 2 | $type: linear; 3 | $pos-type: type-of(nth($pos, 1)); 4 | 5 | // if $pos doesn't exist, fix $gradient 6 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 7 | $gradients: zip($pos $gradients); 8 | $pos: false; 9 | } 10 | 11 | $type-gradient: $type, $pos, $gradients; 12 | @return $type-gradient; 13 | } 14 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | @function modular-scale($value, $increment, $ratio) { 2 | @if $increment > 0 { 3 | @for $i from 1 through $increment { 4 | $value: ($value * $ratio); 5 | } 6 | } 7 | 8 | @if $increment < 0 { 9 | $increment: abs($increment); 10 | @for $i from 1 through $increment { 11 | $value: ($value / $ratio); 12 | } 13 | } 14 | 15 | @return $value; 16 | } 17 | 18 | // div { 19 | // Increment Up GR with positive value 20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px 21 | // 22 | // Increment Down GR with negative value 23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px 24 | // 25 | // Can be used with ceil(round up) or floor(round down) 26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px 27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px 28 | // } 29 | // 30 | // modularscale.com 31 | 32 | @function golden-ratio($value, $increment) { 33 | @return modular-scale($value, $increment, 1.618) 34 | } 35 | 36 | // div { 37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px 38 | // } 39 | // 40 | // goldenratiocalculator.com 41 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $font_size) { 6 | @return ($pxval / $base) * 1em; 7 | } 8 | 9 | @function rem($pxval, $base: $font_size) { 10 | @return ($pxval / $base) * 1rem; 11 | } 12 | 13 | // Custom additions of rem function, also uses config variable for $base font-size 14 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // This function is required and used by the background-image mixin. 2 | @function radial-gradient($G1, $G2, 3 | $G3: false, $G4: false, 4 | $G5: false, $G6: false, 5 | $G7: false, $G8: false, 6 | $G9: false, $G10: false, 7 | $pos: null, 8 | $shape-size: null) { 9 | 10 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 11 | $G1: nth($data, 1); 12 | $G2: nth($data, 2); 13 | $pos: nth($data, 3); 14 | $shape-size: nth($data, 4); 15 | 16 | $type: radial; 17 | $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 18 | 19 | $type-gradient: $type, $shape-size $pos, $gradient; 20 | @return $type-gradient; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /sass/lib/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_deprecated-webkit-gradient.scss: -------------------------------------------------------------------------------- 1 | // Render Deprecated Webkit Gradient - Linear || Radial 2 | //************************************************************************// 3 | @function _deprecated-webkit-gradient($type, 4 | $deprecated-pos1, $deprecated-pos2, 5 | $full, 6 | $deprecated-radius1: false, $deprecated-radius2: false) { 7 | $gradient-list: (); 8 | $gradient: false; 9 | $full-length: length($full); 10 | $percentage: false; 11 | $gradient-type: $type; 12 | 13 | @for $i from 1 through $full-length { 14 | $gradient: nth($full, $i); 15 | 16 | @if length($gradient) == 2 { 17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); 18 | $gradient-list: join($gradient-list, $color-stop, comma); 19 | } 20 | @else if $gradient != null { 21 | @if $i == $full-length { 22 | $percentage: 100%; 23 | } 24 | @else { 25 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; 26 | } 27 | $color-stop: color-stop(unquote($percentage), $gradient); 28 | $gradient-list: join($gradient-list, $color-stop, comma); 29 | } 30 | } 31 | 32 | @if $type == radial { 33 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); 34 | } 35 | @else if $type == linear { 36 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); 37 | } 38 | @return $gradient; 39 | } 40 | -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: false; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: false; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: false; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: false; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /sass/lib/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /sass/lib/bourbon/readme.md: -------------------------------------------------------------------------------- 1 | # The Bourbon Sass Mixin library 2 | 3 | Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. 4 | The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible. 5 | 6 | The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax. 7 | 8 | ### Customizations per this project 9 | 10 | A technique I make heavy use of is using a site `config.scss` file for theme and default management. The Bourbon library does not use common defaults within it's modular structure, so I am adding them as I need them. 11 | 12 | Within modules like `css3/_box-sizing.scss` for example, you will see `!default` variables added to the module. 13 | 14 | $default-box-sizing: border-box !default; 15 | 16 | These `!default` variables are then configurable via the `_config.scss` file located at the root of the `sass/` directory for customization. -------------------------------------------------------------------------------- /sass/lib/neat/_neat-helpers.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | @import "functions/private"; 3 | @import "functions/new-breakpoint"; 4 | 5 | // Settings 6 | @import "settings/grid"; 7 | @import "settings/visual-grid"; 8 | -------------------------------------------------------------------------------- /sass/lib/neat/_neat.scss: -------------------------------------------------------------------------------- 1 | // Bourbon Neat 2 | // MIT Licensed 3 | // Copyright (c) 2012-2013 thoughtbot, inc. 4 | 5 | // Helpers 6 | @import "neat-helpers"; 7 | 8 | // Grid 9 | @import "grid/private"; 10 | @import "grid/reset"; 11 | @import "grid/grid"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | -------------------------------------------------------------------------------- /sass/lib/neat/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 2 | 3 | @if length($query) == 1 { 4 | $query: $default-feature nth($query, 1) $total-columns; 5 | } 6 | 7 | @else if length($query) == 2 or length($query) == 4 { 8 | $query: append($query, $total-columns); 9 | } 10 | 11 | @if not belongs-to($query, $visual-grid-breakpoints) { 12 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma); 13 | } 14 | 15 | @return $query; 16 | } 17 | -------------------------------------------------------------------------------- /sass/lib/neat/functions/_private.scss: -------------------------------------------------------------------------------- 1 | // Checks if a number is even 2 | @function is-even($int) { 3 | @if $int%2 == 0 { 4 | @return true; 5 | } 6 | 7 | @return false; 8 | } 9 | 10 | // Checks if an element belongs to a list 11 | @function belongs-to($tested-item, $list) { 12 | @each $item in $list { 13 | @if $item == $tested-item { 14 | @return true; 15 | } 16 | } 17 | 18 | @return false; 19 | } 20 | 21 | // Contains display value 22 | @function contains-display-value($query) { 23 | @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) { 24 | @return true; 25 | } 26 | 27 | @return false; 28 | } 29 | 30 | // Parses the first argument of span-columns() 31 | @function container-span($span: $span) { 32 | @if length($span) == 3 { 33 | $container-columns: nth($span, 3); 34 | @return $container-columns; 35 | } 36 | 37 | @else if length($span) == 2 { 38 | $container-columns: nth($span, 2); 39 | @return $container-columns; 40 | } 41 | 42 | @else { 43 | @return $grid-columns; 44 | } 45 | } 46 | 47 | @function container-shift($shift: $shift) { 48 | $parent-columns: $grid-columns !default; 49 | 50 | @if length($shift) == 3 { 51 | $container-columns: nth($shift, 3); 52 | @return $container-columns; 53 | } 54 | 55 | @else if length($shift) == 2 { 56 | $container-columns: nth($shift, 2); 57 | @return $container-columns; 58 | } 59 | 60 | @else { 61 | @return $parent-columns; 62 | } 63 | } 64 | 65 | // Generates a striped background 66 | @function gradient-stops($grid-columns, $color: $visual-grid-color) { 67 | $transparent: rgba(0,0,0,0); 68 | 69 | $column-width: flex-grid(1, $grid-columns); 70 | $gutter-width: flex-gutter($grid-columns); 71 | $column-offset: $column-width; 72 | 73 | $values: ($transparent 0, $color 0); 74 | 75 | @for $i from 1 to $grid-columns*2 { 76 | @if is-even($i) { 77 | $values: append($values, $transparent $column-offset, comma); 78 | $values: append($values, $color $column-offset, comma); 79 | $column-offset: $column-offset + $column-width; 80 | } 81 | 82 | @else { 83 | $values: append($values, $color $column-offset, comma); 84 | $values: append($values, $transparent $column-offset, comma); 85 | $column-offset: $column-offset + $gutter-width; 86 | } 87 | } 88 | 89 | @return $values; 90 | } 91 | 92 | // Layout direction 93 | @function get-direction($layout, $default) { 94 | $direction: nil; 95 | 96 | @if $layout == LTR or $layout == RTL { 97 | $direction: direction-from-layout($layout); 98 | } @else { 99 | $direction: direction-from-layout($default); 100 | } 101 | 102 | @return $direction; 103 | } 104 | 105 | @function direction-from-layout($layout) { 106 | $direction: nil; 107 | 108 | @if $layout == LTR { 109 | $direction: right; 110 | } @else { 111 | $direction: left; 112 | } 113 | 114 | @return $direction; 115 | } 116 | 117 | @function get-opposite-direction($direction) { 118 | $opposite-direction: left; 119 | 120 | @if $direction == left { 121 | $opposite-direction: right; 122 | } 123 | 124 | @return $opposite-direction; 125 | } 126 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @mixin fill-parent() { 2 | width: 100%; 3 | 4 | @if $border-box-sizing == false { 5 | @include box-sizing(border-box); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_grid.scss: -------------------------------------------------------------------------------- 1 | @if $border-box-sizing == true { 2 | * { 3 | @include box-sizing(border-box); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_media.scss: -------------------------------------------------------------------------------- 1 | @mixin media($query:$feature $value $columns, $total-columns: $grid-columns) { 2 | 3 | @if length($query) == 1 { 4 | @media screen and ($default-feature: nth($query, 1)) { 5 | $default-grid-columns: $grid-columns; 6 | $grid-columns: $total-columns; 7 | @content; 8 | $grid-columns: $default-grid-columns; 9 | } 10 | } 11 | 12 | @else if length($query) == 2 { 13 | @media screen and (nth($query, 1): nth($query, 2)) { 14 | $default-grid-columns: $grid-columns; 15 | $grid-columns: $total-columns; 16 | @content; 17 | $grid-columns: $default-grid-columns; 18 | } 19 | } 20 | 21 | @else if length($query) == 3 { 22 | @media screen and (nth($query, 1): nth($query, 2)) { 23 | $default-grid-columns: $grid-columns; 24 | $grid-columns: nth($query, 3); 25 | @content; 26 | $grid-columns: $default-grid-columns; 27 | } 28 | } 29 | 30 | @else if length($query) == 4 { 31 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 32 | $default-grid-columns: $grid-columns; 33 | $grid-columns: $total-columns; 34 | @content; 35 | $grid-columns: $default-grid-columns; 36 | } 37 | } 38 | 39 | @else if length($query) == 5 { 40 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 41 | $default-grid-columns: $grid-columns; 42 | $grid-columns: nth($query, 5); 43 | @content; 44 | $grid-columns: $default-grid-columns; 45 | } 46 | } 47 | 48 | @else { 49 | @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_omega.scss: -------------------------------------------------------------------------------- 1 | // Remove last element gutter 2 | @mixin omega($query: block, $direction: default) { 3 | $table: if(belongs-to(table, $query), true, false); 4 | $auto: if(belongs-to(auto, $query), true, false); 5 | 6 | @if $direction != default { 7 | @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead." 8 | } @else { 9 | $direction: get-direction($layout-direction, $default-layout-direction); 10 | } 11 | 12 | @if length($query) == 1 { 13 | @if $auto { 14 | &:last-child { 15 | margin-#{$direction}: 0; 16 | } 17 | } 18 | 19 | @else if contains-display-value($query) { 20 | @if $table { 21 | padding-#{$direction}: 0; 22 | } 23 | 24 | @else { 25 | margin-#{$direction}: 0; 26 | } 27 | } 28 | 29 | @else { 30 | @include nth-child($query, $direction); 31 | } 32 | } 33 | 34 | @else if length($query) == 2 { 35 | @if $table { 36 | @if $auto { 37 | &:last-child { 38 | padding-#{$direction}: 0; 39 | } 40 | } 41 | 42 | @else { 43 | &:nth-child(#{nth($query, 1)}) { 44 | padding-#{$direction}: 0; 45 | } 46 | } 47 | } 48 | 49 | @else { 50 | @if $auto { 51 | &:last-child { 52 | margin-#{$direction}: 0; 53 | } 54 | } 55 | 56 | @else { 57 | @include nth-child(nth($query, 1), $direction); 58 | } 59 | } 60 | } 61 | 62 | @else { 63 | @warn "Too many arguments passed to the omega() mixin." 64 | } 65 | } 66 | 67 | @mixin nth-child($query, $direction) { 68 | $opposite-direction: get-opposite-direction($direction); 69 | 70 | &:nth-child(#{$query}) { 71 | margin-#{$direction}: 0; 72 | } 73 | 74 | @if type-of($query) == number { 75 | &:nth-child(#{$query}+1) { 76 | clear: $opposite-direction; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @mixin outer-container { 2 | @include clearfix; 3 | max-width: $max-width; 4 | margin: { 5 | left: auto; 6 | right: auto; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @mixin pad($padding: flex-gutter()) { 2 | $padding-list: null; 3 | @each $value in $padding { 4 | $value: if($value == 'default', flex-gutter(), $value); 5 | $padding-list: join($padding-list, $value); 6 | } 7 | padding: $padding-list; 8 | } 9 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: nil !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns; 26 | } @else { 27 | $parent-columns: $grid-columns; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | $display-table: false; 35 | 36 | @if $container-is-display-table == true { 37 | $display-table: true; 38 | } @else if $display == table { 39 | $display-table: true; 40 | } 41 | 42 | @return $display-table; 43 | } 44 | 45 | @function get-padding-for-table-layout($columns, $total-columns) { 46 | $total-padding: flex-gutter($total-columns) * ($columns - 1); 47 | $padding: $total-padding / $columns; 48 | 49 | @return $padding; 50 | } 51 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_reset.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-display { 2 | $container-display-table: false; 3 | } 4 | 5 | @mixin reset-layout-direction { 6 | $layout-direction: $default-layout-direction; 7 | } 8 | 9 | @mixin reset-all { 10 | @include reset-display; 11 | @include reset-layout-direction; 12 | } 13 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @mixin row($display: block, $direction: $default-layout-direction) { 2 | @include clearfix; 3 | $layout-direction: $direction; 4 | 5 | @if $display == table { 6 | display: table; 7 | @include fill-parent; 8 | table-layout: fixed; 9 | $container-display-table: true; 10 | } 11 | 12 | @else { 13 | display: block; 14 | $container-display-table: false; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @mixin shift($n-columns: 1) { 2 | @include shift-in-context($n-columns); 3 | } 4 | 5 | @mixin shift-in-context($shift: $columns of $container-columns) { 6 | $n-columns: nth($shift, 1); 7 | $parent-columns: container-shift($shift); 8 | 9 | $direction: get-direction($layout-direction, $default-layout-direction); 10 | $opposite-direction: get-opposite-direction($direction); 11 | 12 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 13 | 14 | // Reset nesting context 15 | $parent-columns: $grid-columns; 16 | } 17 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_span-columns.scss: -------------------------------------------------------------------------------- 1 | @mixin span-columns($span: $columns of $container-columns, $display: block) { 2 | $columns: nth($span, 1); 3 | $container-columns: container-span($span); 4 | 5 | // Set nesting context (used by shift()) 6 | $parent-columns: get-parent-columns($container-columns); 7 | 8 | $direction: get-direction($layout-direction, $default-layout-direction); 9 | $opposite-direction: get-opposite-direction($direction); 10 | 11 | $display-table: is-display-table($container-display-table, $display); 12 | 13 | @if $display-table { 14 | $padding: get-padding-for-table-layout($columns, $container-columns); 15 | display: table-cell; 16 | padding-#{$direction}: $padding; 17 | width: flex-grid($columns, $container-columns) + $padding; 18 | } @else { 19 | float: #{$opposite-direction}; 20 | 21 | @if $display != no-display { 22 | display: block; 23 | } 24 | 25 | @if $display == collapse { 26 | @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." 27 | } 28 | 29 | @if $display == collapse or $display == block-collapse { 30 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); 31 | 32 | &:last-child { 33 | width: flex-grid($columns, $container-columns); 34 | } 35 | 36 | } @else { 37 | margin-#{$direction}: flex-gutter($container-columns); 38 | width: flex-grid($columns, $container-columns); 39 | 40 | &:last-child { 41 | margin-#{$direction}: 0; 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_to-deprecate.scss: -------------------------------------------------------------------------------- 1 | @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 2 | @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."; 3 | 4 | @if length($query) == 1 { 5 | @media screen and ($default-feature: nth($query, 1)) { 6 | $default-grid-columns: $grid-columns; 7 | $grid-columns: $total-columns; 8 | @content; 9 | $grid-columns: $default-grid-columns; 10 | } 11 | } 12 | 13 | @else if length($query) == 2 { 14 | @media screen and (nth($query, 1): nth($query, 2)) { 15 | $default-grid-columns: $grid-columns; 16 | $grid-columns: $total-columns; 17 | @content; 18 | $grid-columns: $default-grid-columns; 19 | } 20 | } 21 | 22 | @else if length($query) == 3 { 23 | @media screen and (nth($query, 1): nth($query, 2)) { 24 | $default-grid-columns: $grid-columns; 25 | $grid-columns: nth($query, 3); 26 | @content; 27 | $grid-columns: $default-grid-columns; 28 | } 29 | } 30 | 31 | @else if length($query) == 4 { 32 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 33 | $default-grid-columns: $grid-columns; 34 | $grid-columns: $total-columns; 35 | @content; 36 | $grid-columns: $default-grid-columns; 37 | } 38 | } 39 | 40 | @else if length($query) == 5 { 41 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 42 | $default-grid-columns: $grid-columns; 43 | $grid-columns: nth($query, 5); 44 | @content; 45 | $grid-columns: $default-grid-columns; 46 | } 47 | } 48 | 49 | @else { 50 | @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; 51 | } 52 | } 53 | 54 | @mixin nth-omega($nth, $display: block, $direction: default) { 55 | @warn "The nth-omega() mixin is deprecated. Please use omega() instead."; 56 | @include omega($nth $display, $direction); 57 | } 58 | -------------------------------------------------------------------------------- /sass/lib/neat/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @mixin grid-column-gradient($values...) { 2 | background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values); 3 | background-image: -webkit-linear-gradient(left, $values); 4 | background-image: -moz-linear-gradient(left, $values); 5 | background-image: -ms-linear-gradient(left, $values); 6 | background-image: -o-linear-gradient(left, $values); 7 | background-image: unquote("linear-gradient(left, #{$values})"); 8 | } 9 | 10 | @if $visual-grid == true or $visual-grid == yes { 11 | body:before { 12 | content: ''; 13 | display: inline-block; 14 | @include grid-column-gradient(gradient-stops($grid-columns)); 15 | height: 100%; 16 | left: 0; 17 | margin: 0 auto; 18 | max-width: $max-width; 19 | opacity: $visual-grid-opacity; 20 | position: fixed; 21 | right: 0; 22 | width: 100%; 23 | pointer-events: none; 24 | 25 | @if $visual-grid-index == back { 26 | z-index: -1; 27 | } 28 | 29 | @else if $visual-grid-index == front { 30 | z-index: 9999; 31 | } 32 | 33 | @each $breakpoint in $visual-grid-breakpoints { 34 | @if $breakpoint != nil { 35 | @include media($breakpoint) { 36 | @include grid-column-gradient(gradient-stops($grid-columns)); 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /sass/lib/neat/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | $column: golden-ratio(1em, 3) !default; // Column width 2 | $gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns 3 | $grid-columns: 12 !default; // Total number of columns in the grid 4 | $max-width: em(1088) !default; // Max-width of the outer container 5 | $border-box-sizing: true !default; // Makes all elements have a border-box layout 6 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 7 | $default-layout-direction: LTR !default; 8 | -------------------------------------------------------------------------------- /sass/lib/neat/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | $visual-grid: false !default; // Display the base grid 2 | $visual-grid-color: #EEE !default; 3 | $visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front) 4 | $visual-grid-opacity: 0.4 !default; 5 | $visual-grid-breakpoints: () !default; 6 | -------------------------------------------------------------------------------- /sass/modules/_batch.scss: -------------------------------------------------------------------------------- 1 | .batch { 2 | background-color: rgba($white, 0.01); 3 | &:nth-child(odd) { 4 | background-color: rgba($white, 0.025); 5 | } 6 | } 7 | 8 | .batch__sidebar { 9 | background-color: rgba($interface_color, 0.025); 10 | border: 1px solid rgba($interface_color, 0.1); 11 | height: 100%; 12 | } 13 | 14 | .batch__header { 15 | @include span-columns(12); 16 | border-bottom: 2px solid rgba($interface_color, 0.05); 17 | } 18 | 19 | .batch__title { 20 | @extend %batch-item-title; 21 | font-style: italic; 22 | color: rgba($font_color, 0.5); 23 | } 24 | 25 | .batch__title-icon { 26 | @extend %batch-icon-mini; 27 | &::before { 28 | background: url('../img/graph-title.svg') center center no-repeat; 29 | } 30 | } 31 | 32 | .batch__add-channel-action { 33 | @extend %batch-icon-mini; 34 | &::before { 35 | background: url('../img/add-channel.svg') center center no-repeat; 36 | } 37 | } 38 | 39 | // List of Data 40 | .batch__data { 41 | @extend %ul-reset; 42 | } 43 | 44 | // List of Channels in a group 45 | .batch__data-group { 46 | @extend %ul-reset; 47 | @include span-columns(12); 48 | @extend %batch-expand-animation; 49 | } 50 | 51 | // If / When Group 52 | // - Title of Group 53 | .batch__data-group-title { 54 | @extend %monospaced-style; 55 | @extend %batch-item-title; 56 | @include span-columns(10); 57 | } 58 | // - Expand Group w/ chevron 59 | .batch__data-group-expand { 60 | @extend %batch-icon-chevron; 61 | @extend %user-select-none; 62 | &:hover { 63 | cursor: pointer; 64 | &::before { 65 | opacity: 1; 66 | } 67 | } 68 | &::before { 69 | opacity: 0.5; 70 | background: url('../img/chevron.svg') center center no-repeat; 71 | } 72 | } 73 | 74 | // Dummy SVG Chart 75 | .batch__chart { 76 | position: relative; 77 | } 78 | 79 | .batch__chart-svg { 80 | position: absolute; 81 | right: 0; 82 | bottom: 0; 83 | width: 100%; 84 | } 85 | 86 | .batch__chart-data-points { 87 | @extend %ul-reset; 88 | position: relative; 89 | height: 100%; 90 | } 91 | 92 | .batch__chart-data-point { 93 | position: absolute; 94 | z-index: $z-index-alpha; 95 | } 96 | 97 | .batch__chart-data-info { 98 | display: block; 99 | width: $alpha; 100 | height: $alpha; 101 | font-size: $baby; 102 | text-align: center; 103 | padding-top: $beta/2; 104 | // position: absolute; 105 | &::before { 106 | content: ''; 107 | display: block; 108 | width: $baby/2; 109 | height: $baby/2; 110 | border-radius: $baby; 111 | position: absolute; 112 | background-color: rgba($white, 1); 113 | bottom: 0; 114 | } 115 | &::after { 116 | content: ''; 117 | display: block; 118 | width: $alpha; 119 | height: $alpha; 120 | background: url('../img/discussion.svg') no-repeat center; 121 | background-size: $beta; 122 | position: absolute; 123 | left: 0; 124 | top: 0; 125 | opacity: 0.1; 126 | } 127 | &:hover { 128 | &::after { 129 | opacity: 0.3; 130 | cursor: pointer; 131 | } 132 | } 133 | } 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /sass/modules/_batches.scss: -------------------------------------------------------------------------------- 1 | .batches { 2 | @extend %ul-reset; 3 | width: 100%; 4 | padding-bottom: $alpha*3; 5 | height: 100%; 6 | overflow-y: scroll; 7 | } -------------------------------------------------------------------------------- /sass/modules/_channel.scss: -------------------------------------------------------------------------------- 1 | .channel { 2 | @extend %monospaced-style; 3 | @include span-columns(12); 4 | padding: $normal 0; 5 | 6 | &:nth-child(odd) { 7 | background-color: rgba($interface_color, 0.025); 8 | } 9 | 10 | &:hover { 11 | cursor: pointer; 12 | background-color: rgba($interface_color, 0.1); 13 | } 14 | 15 | // &:active { 16 | // background-color: rgba($highlight_color, 0.9); 17 | // } 18 | 19 | } 20 | 21 | .channel__dropdown { 22 | @extend %channel-icon-chevron; 23 | @extend %user-select-none; 24 | 25 | &::before { 26 | opacity: 0.2; 27 | background: url('../img/chevron.svg') center center no-repeat; 28 | -webkit-transform: rotate(270deg); 29 | } 30 | 31 | &:hover { 32 | &::before { 33 | opacity: 1; 34 | } 35 | } 36 | } 37 | 38 | .channel__title { 39 | @extend %monospaced-style; 40 | @include shift(.5); 41 | @include span-columns(9); 42 | height: 100%; 43 | vertical-align: middle; 44 | display: block; 45 | } 46 | 47 | .channel__key { 48 | position: relative; 49 | top: .5rem; 50 | right: 1rem; 51 | width: 1rem; 52 | height: 0.2rem; 53 | float: right; 54 | display: inline-block; 55 | border-bottom-width: 2px; 56 | } 57 | 58 | .channel__category { 59 | @include shift(.5); 60 | @include span-columns(9); 61 | opacity: 0.3; 62 | } 63 | 64 | .channel__meta { 65 | @extend %ul-reset; 66 | @include span-columns(12); 67 | @include rem(padding-left, $alpha); 68 | @include rem(padding-top, $baby); 69 | @include rem(padding-bottom, $baby); 70 | @extend %batch-expand-animation; 71 | 72 | } 73 | 74 | .channel__meta-item { 75 | @include pad($baby/4 $normal); 76 | &:nth-child(odd) { 77 | background-color: rgba($white, 0.02); 78 | } 79 | } 80 | 81 | .channel__meta-add { 82 | @extend %small-caps; 83 | font-size: $baby; 84 | opacity: 0.3; 85 | 86 | &:hover { 87 | opacity: 1; 88 | } 89 | } 90 | 91 | .channel__meta-item-new { 92 | @extend .channel__meta-item; 93 | &::before { 94 | @include rem(padding-right, $baby); 95 | content: '+'; 96 | } 97 | } 98 | 99 | %channel__meta-item-new-input { 100 | @include pad($baby/2 0); 101 | opacity: 0.3; 102 | background-color: transparent; 103 | border: none; 104 | outline: 0; 105 | border-bottom: 1px solid rgba($white, 0.5); 106 | color: $white; 107 | &:active, 108 | &:focus { 109 | opacity: 1; 110 | outline: 0; 111 | border-bottom-color: $white; 112 | } 113 | } 114 | 115 | .channel__meta-item-new-tag { 116 | margin-top: $baby; 117 | @include span-columns(12); 118 | @extend %channel__meta-item-new-input; 119 | } 120 | .channel__meta-item-split { 121 | @include span-columns(12); 122 | margin-top: $baby; 123 | } 124 | .channel__meta-item-pair { 125 | @include span-columns(12); 126 | border: 0; 127 | padding: 0; 128 | } 129 | .channel__meta-item-new-key { 130 | @include span-columns(6); 131 | @extend %channel__meta-item-new-input; 132 | } 133 | .channel__meta-item-new-value { 134 | @include span-columns(6); 135 | @extend %channel__meta-item-new-input; 136 | } 137 | 138 | .channel__meta-item-save { 139 | @include span-columns(6); 140 | @extend %button-reset; 141 | margin-top: $baby; 142 | } 143 | 144 | .channel__meta-item-close { 145 | @extend .channel__meta-item-save; 146 | } 147 | 148 | .channel__meta-item-key { 149 | &::after { 150 | opacity: 0.3; 151 | font-weight: 500; 152 | content: " :"; 153 | } 154 | } 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /sass/modules/_data-sets.scss: -------------------------------------------------------------------------------- 1 | // Modules 2 | // - Views 3 | // -- Data Sets 4 | 5 | .data-sets { 6 | @include span-columns(12); 7 | position: fixed; 8 | } 9 | 10 | .data-sets__list { 11 | @extend %ul-reset; 12 | @extend %monospaced-style; 13 | } 14 | 15 | .data-sets__item { 16 | float: left; 17 | display: inline-block; 18 | background-color: rgba($interface_color, 0.025); 19 | color: rgba($font_color, 0.3); 20 | padding: $normal $beta; 21 | 22 | &:hover { 23 | background-color: rgba($interface_color, 0.05); 24 | color: rgba($font_color, 0.7); 25 | cursor: pointer; 26 | } 27 | } 28 | 29 | .data-set { 30 | height: 100%; 31 | width: 100%; 32 | top: $gamma*3; 33 | right: 0; 34 | bottom: 0; 35 | left: 0; 36 | position: relative; 37 | } 38 | 39 | .data-set__current { 40 | @include span-columns(12); 41 | position: absolute; 42 | top: 0; 43 | bottom: $alpha*3; 44 | } 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /sass/modules/_discuss.scss: -------------------------------------------------------------------------------- 1 | .is-discussing { 2 | 3 | &.discuss { 4 | width: 50%; 5 | position: absolute; 6 | right: 0; 7 | top: -$alpha; 8 | height: 100%; 9 | background-color: rgba(darken($background_color, 3%), 0.9); 10 | overflow-x: hidden; 11 | overflow-y: scroll; 12 | padding-bottom: $alpha*3; 13 | z-index: 2; 14 | } 15 | 16 | .discuss__header { 17 | @include pad($normal $gamma*4 $normal $beta); 18 | @include span-columns(12); 19 | } 20 | 21 | .discuss__title { 22 | @include span-columns(5); 23 | // @include rem(font-size, $gamma); 24 | } 25 | 26 | .discuss__notifications { 27 | @include span-columns(7); 28 | @include rem(font-size, $normal); 29 | text-align: right; 30 | } 31 | 32 | .discuss__notifications-value { 33 | opacity: 1; 34 | font-weight: 700; 35 | margin-right: .1em; 36 | &::before { 37 | content: ''; 38 | display: inline-block; 39 | width: .5em; 40 | height: .5em; 41 | margin-right: .4em; 42 | border-radius: .5em; 43 | background-color: $notification_color; 44 | } 45 | } 46 | 47 | .discuss__notifications-unread { 48 | opacity: 0.5; 49 | } 50 | 51 | .discuss__notifications-clear { 52 | @extend %hover-ready; 53 | text-decoration: underline; 54 | margin-left: $normal; 55 | &:hover { 56 | @extend %hover-go; 57 | } 58 | } 59 | 60 | .discuss__feed { 61 | @extend %ul-reset; 62 | @include span-columns(12); 63 | // @include pad($alpha 0); 64 | background-color: rgba(darken($background_color, 4%), 0.9); 65 | top: -2px; 66 | position: relative; 67 | } 68 | 69 | } -------------------------------------------------------------------------------- /sass/modules/_discussion.scss: -------------------------------------------------------------------------------- 1 | .discussion { 2 | // @include span-columns(6); 3 | // @include shift(6); 4 | // height: 100%; 5 | position: absolute; 6 | z-index: 4; 7 | width: $alpha; 8 | height: $alpha; 9 | right: $alpha; 10 | } 11 | 12 | %discussion__tab { 13 | position: absolute; 14 | top: -$alpha; 15 | right: -$alpha; 16 | background-color: rgba($interface_color, 0.03); 17 | width: $alpha; 18 | height: $alpha; 19 | 20 | &::before { 21 | @extend %hover-ready; 22 | position: relative; 23 | display: block; 24 | text-align: center; 25 | top: 50%; 26 | @include vp(transform, translateY(-50%)); 27 | } 28 | 29 | &:hover { 30 | &::before { 31 | @extend %hover-go; 32 | } 33 | } 34 | } 35 | 36 | .discussion__closed { 37 | position: absolute; 38 | width: $alpha; 39 | right: 0; 40 | } 41 | 42 | .discussion__cta-open { 43 | @extend %discussion__tab; 44 | &::before { 45 | content: url('../img/discussion.svg'); 46 | } 47 | } 48 | 49 | .discussion__tab--notification { 50 | display: block; 51 | position: absolute; 52 | right: -$alpha+$baby; 53 | top: -$alpha + $baby; 54 | border-radius: .5rem; 55 | width: .5rem; 56 | height: .5rem; 57 | background-color: $notification_color; 58 | } 59 | 60 | .discussion__interface { 61 | @include span-columns(12); 62 | position: absolute; 63 | right: 0; 64 | // height: 100%; 65 | background-color: rgba(darken($background_color, 5%), 0.9); 66 | } 67 | 68 | .discussion__cta-close { 69 | @extend %discussion__tab; 70 | &::before { 71 | content: url('../img/x.svg'); 72 | } 73 | } 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /sass/modules/_main.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | @include pad(0.5rem); 3 | position: fixed; 4 | top: $alpha*2; 5 | height: 100%; 6 | width: 100%; 7 | } -------------------------------------------------------------------------------- /sass/modules/_nav.scss: -------------------------------------------------------------------------------- 1 | // Modules 2 | // -- Nav 3 | 4 | .nav { 5 | padding: $alpha; 6 | position: fixed; 7 | } 8 | 9 | .nav__locations { 10 | @extend %ul-reset; 11 | display: inline-block; 12 | } 13 | 14 | // Location items 15 | .nav__data-sets { 16 | @extend %nav-items; 17 | &::before { 18 | content: '\e600'; 19 | } 20 | } 21 | 22 | .nav__navigator { 23 | @extend %nav-items; 24 | &::before { 25 | content: '\e601'; 26 | } 27 | } -------------------------------------------------------------------------------- /sass/modules/_navigator.scss: -------------------------------------------------------------------------------- 1 | // Modules 2 | // - Views 3 | // -- Navigator 4 | 5 | .navigator { 6 | @extend %view-layout; 7 | background-color: rgba($interface_color, 0.02); 8 | } 9 | 10 | .navigator__toolbar { 11 | @include span-columns(12); 12 | @include pad($gamma); 13 | background-color: rgba($interface_color, 0.02); 14 | } 15 | 16 | .navigator__content { 17 | @include span-columns(12); 18 | } 19 | 20 | .navigator__search { 21 | @include span-columns(4); 22 | @extend %input-reset; 23 | } 24 | 25 | .navigator__toolbar-actions { 26 | @include span-columns(6); 27 | @include shift(2); 28 | text-align: right; 29 | } 30 | 31 | .navigator__action-custom-data-set { 32 | @extend %navigator-action; 33 | } 34 | .navigator__action-upload-tdm { 35 | @extend %navigator-action; 36 | } 37 | .navigator__action-upload-tdms { 38 | @extend %navigator-action; 39 | } 40 | 41 | .navigator__table { 42 | @include pad($gamma); 43 | @include span-columns(12); 44 | } 45 | 46 | // - Headings 47 | 48 | .navigator__table-heading-title { 49 | @extend %navigator-heading; 50 | @include span-columns(3); 51 | } 52 | 53 | .navigator__table-heading-created { 54 | @extend %navigator-heading; 55 | @include span-columns(1); 56 | } 57 | 58 | .navigator__table-heading-modified { 59 | @extend %navigator-heading; 60 | @include span-columns(1); 61 | } 62 | 63 | .navigator__table-heading-size { 64 | @extend %navigator-heading; 65 | @include span-columns(1); 66 | } 67 | 68 | .navigator__table-heading-length { 69 | @extend %navigator-heading; 70 | @include span-columns(1); 71 | } 72 | 73 | .navigator__table-heading-info { 74 | @extend %navigator-heading; 75 | @include span-columns(4); 76 | } 77 | 78 | .navigator__table-heading-actions { 79 | @extend %navigator-heading; 80 | @include span-columns(1); 81 | } 82 | -------------------------------------------------------------------------------- /sass/modules/_observation.scss: -------------------------------------------------------------------------------- 1 | .observation { 2 | @include pad($gamma $alpha); 3 | @include span-columns(12); 4 | 5 | &:nth-child(even) { 6 | background-color: rgba($white, 0.03); 7 | } 8 | } 9 | 10 | .observation__header { 11 | @include span-columns(12); 12 | @extend %monospaced-style; 13 | 14 | } 15 | 16 | %observation__header--item { 17 | &::before { 18 | @extend %icon-font; 19 | font-size: .6em; 20 | opacity: 0.3; 21 | margin-right: 1em; 22 | } 23 | } 24 | 25 | .observation__header-data-set { 26 | @extend %observation__header--item; 27 | 28 | &::before { 29 | content: '\e600'; 30 | } 31 | 32 | } 33 | 34 | .observation__header-data-point { 35 | @extend %observation__header--item; 36 | &::before { 37 | content: '\e601'; 38 | } 39 | } 40 | 41 | .observation__main { 42 | @include span-columns(12); 43 | @include rem(font-size, $normal); 44 | @include rem(padding-top, $normal); 45 | position: relative; 46 | height: 100%; 47 | } 48 | 49 | .observation__sidebar { 50 | @include span-columns(1.5); 51 | height: 100%; 52 | margin: auto; 53 | } 54 | 55 | .observation__main-info { 56 | @include pad($normal); 57 | @include span-columns(10.5); 58 | height: 100%; 59 | } 60 | 61 | .observation__author-photo { 62 | display: block; 63 | float: left; 64 | width: 100%; 65 | margin: 20% auto; 66 | background: no-repeat center center; 67 | background-size: cover; 68 | 69 | &::before { 70 | content: ''; 71 | display: block; 72 | padding-top: 100%; 73 | } 74 | } 75 | 76 | .observation__author { 77 | @include span-columns(6); 78 | opacity: 0.3; 79 | } 80 | 81 | .observation__created { 82 | @include span-columns(4); 83 | text-align: right; 84 | opacity: 0.3; 85 | } 86 | 87 | .observation__info { 88 | @include span-columns(8); 89 | line-height: 1.4; 90 | } 91 | 92 | .observation__input { 93 | @extend %input-reset; 94 | @include span-columns(12); 95 | } 96 | 97 | .observation__save { 98 | @extend %button-reset; 99 | margin-top: $baby; 100 | } 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /sass/modules/_share.scss: -------------------------------------------------------------------------------- 1 | .share { 2 | @extend %modal; 3 | text-align: center; 4 | } 5 | 6 | .share__action { 7 | @include pad($baby $beta); 8 | @include rem(font-size, $normal); 9 | @include rem(padding-left, $alpha); 10 | display: block; 11 | position: absolute; 12 | z-index: $z-index-neutral; 13 | height: $alpha; 14 | right: $alpha; 15 | top: -$alpha; 16 | background-color: rgba($white, 0.01); 17 | } 18 | 19 | .share__action-cta { 20 | position: relative; 21 | opacity: 0.3; 22 | @include vp(transition, opacity 0.2s ease); 23 | 24 | &::before { 25 | width: $gamma; 26 | height: $normal; 27 | content: ''; 28 | display: inline-block; 29 | background: url('../img/share.svg') no-repeat center; 30 | background-size: $normal; 31 | position: absolute; 32 | left: -$beta; 33 | bottom: .25em; 34 | // top: 0; 35 | // right: 2em; 36 | } 37 | 38 | &:hover { 39 | @include vp(transition, opacity 0.2s ease); 40 | opacity: 1; 41 | cursor: pointer; 42 | } 43 | } 44 | 45 | .share__cancel { 46 | @extend %modal-cancel; 47 | } 48 | 49 | .share__icon { 50 | @include span-columns(12); 51 | @extend %icon-data-set; 52 | text-align: center; 53 | margin: 8% auto; 54 | opacity: 0.2; 55 | 56 | &::before { 57 | font-size: 2em; 58 | } 59 | } 60 | 61 | .share__info { 62 | // text-align: center; 63 | @include span-columns(12); 64 | } 65 | 66 | .share__aside { 67 | @include pad(0 $alpha); 68 | @include span-columns(12); 69 | // text-align: center; 70 | opacity: 0.3; 71 | margin: auto; 72 | } 73 | 74 | .share__link { 75 | @extend %input-reset; 76 | margin: 1em auto; 77 | } 78 | 79 | .share__finished { 80 | display: block; 81 | @extend %navigator-action; 82 | margin: 1em auto; 83 | } 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /sass/modules/_source.scss: -------------------------------------------------------------------------------- 1 | .source { 2 | min-width: 100%; 3 | @include span-columns(12); 4 | font-family: $mono_font_family; 5 | font-size: $normal; 6 | padding: $baby 0; 7 | 8 | &:nth-child(odd) { 9 | background-color: rgba($white, 0.05); 10 | } 11 | 12 | &:hover { 13 | cursor: pointer; 14 | background-color: $highlight_color; 15 | color: $font_color; 16 | } 17 | } 18 | 19 | .source__title { 20 | @include span-columns(3); 21 | } 22 | 23 | .source__created { 24 | @include span-columns(1); 25 | } 26 | 27 | .source__modified { 28 | @include span-columns(1); 29 | } 30 | 31 | .source__size { 32 | @include span-columns(1); 33 | } 34 | 35 | .source__length { 36 | @include span-columns(1); 37 | } 38 | 39 | .source__info { 40 | @include span-columns(4); 41 | } 42 | 43 | .source__actions { 44 | @include span-columns(1); 45 | } 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /sass/modules/_tools.scss: -------------------------------------------------------------------------------- 1 | %tool-block { 2 | @include span-columns(3); 3 | @include pad($gamma); 4 | @include omega; 5 | @include rem(font-size, $normal); 6 | background-color: rgba(darken($background_color, 10%), 0.2); 7 | font-family: $mono_font_family; 8 | } 9 | 10 | .tools { 11 | background-color: rgba(darken($background_color, 3%), 0.8); 12 | // @include pad($baby 0); 13 | @include span-columns(12); 14 | position: fixed; 15 | bottom: 0; 16 | } 17 | 18 | .tools__readout { 19 | @extend %tool-block; 20 | } 21 | 22 | .tools__readout-channel { 23 | @include span-columns(8); 24 | } 25 | 26 | .tools__readout-category { 27 | @include span-columns(8); 28 | color: rgba($font_color, 0.5); 29 | } 30 | 31 | .tools__readout-value { 32 | @include span-columns(4); 33 | @include omega; 34 | } 35 | 36 | .tools__readout-unit { 37 | @include span-columns(4); 38 | color: rgba($font_color, 0.5); 39 | } 40 | 41 | .tools__time { 42 | @extend %tool-block; 43 | @include span-columns(2); 44 | } 45 | 46 | .tools__time-value { 47 | @include span-columns(12); 48 | } 49 | 50 | .tools__time-unit { 51 | @include span-columns(12); 52 | color: rgba($font_color, 0.5); 53 | } -------------------------------------------------------------------------------- /sass/modules/_upload.scss: -------------------------------------------------------------------------------- 1 | .overlay { 2 | @extend %overlay; 3 | } 4 | 5 | .upload { 6 | @extend %modal; 7 | } 8 | 9 | .upload__icon { 10 | width: $gamma; 11 | opacity: 0.3; 12 | } 13 | 14 | .upload__header { 15 | @include span-columns(12); 16 | @include pad($gamma/2); 17 | background-color: rgba($interface_color, 0.05); 18 | } 19 | 20 | .upload__title { 21 | @include pad($gamma/2); 22 | @include span-columns(8); 23 | &::before { 24 | content: ''; 25 | display: inline-block; 26 | position: relative; 27 | width: $gamma; 28 | height: $normal; 29 | background: url('../img/upload.svg') no-repeat center center; 30 | background-size: $normal; 31 | margin: 0 $normal; 32 | opacity: 0.3; 33 | } 34 | } 35 | 36 | .upload__header-actions { 37 | @include span-columns(4); 38 | text-align: right; 39 | } 40 | 41 | .upload__action { 42 | @extend %navigator-action; 43 | } 44 | 45 | .upload__cancel { 46 | @extend %modal-cancel; 47 | } 48 | 49 | .upload__list { 50 | @extend %ul-reset; 51 | @include span-columns(12); 52 | } 53 | 54 | .upload__name { 55 | @include span-columns(6); 56 | @include pad($baby 0); 57 | font-family: $mono_font_family; 58 | } 59 | 60 | .upload__begin { 61 | @extend %navigator-action; 62 | } 63 | 64 | .upload__actions { 65 | @include span-columns(6); 66 | } 67 | 68 | .upload__progress { 69 | @include span-columns(8); 70 | @include shift(4); 71 | } 72 | 73 | .upload__item { 74 | @include span-columns(12); 75 | @include pad($baby $gamma); 76 | @include rem(font-size, $normal); 77 | &:nth-child(even) { 78 | background-color: darken($background_color, 4%); 79 | } 80 | } 81 | 82 | .upload__info { 83 | opacity: 0.7; 84 | } 85 | 86 | .upload__stop-upload { 87 | @extend %input-reset; 88 | padding: 0; 89 | border: 0; 90 | opacity: 0.5; 91 | height: $normal; 92 | float: right; 93 | background-color: transparent; 94 | 95 | &:hover { 96 | border: 0; 97 | cursor: pointer; 98 | opacity: 1; 99 | } 100 | 101 | &:active, 102 | &:focus { 103 | border: 0; 104 | } 105 | 106 | &::before { 107 | content: ''; 108 | display: block; 109 | width: $normal; 110 | height: $normal; 111 | background: url('../img/x.svg') no-repeat center; 112 | background-size: $baby; 113 | } 114 | } 115 | 116 | .upload__uploading { 117 | @include pad($normal 0); 118 | @include span-columns(12); 119 | } 120 | 121 | .upload__ready { 122 | @include span-columns(12); 123 | } 124 | 125 | .upload__loading { 126 | height: $baby; 127 | margin-top: 2px; 128 | @include span-columns(8); 129 | } 130 | 131 | .upload__null { 132 | @include span-columns(12); 133 | @extend %small-caps; 134 | @include rem(font-size, $baby); 135 | text-align: center; 136 | margin: $alpha auto; 137 | opacity: 0.5; 138 | top: $beta*2; 139 | @include vp(transform, translateY(-50%)); 140 | // &::before { 141 | // content: ''; 142 | // display: block; 143 | // width: $gamma; 144 | // height: $gamma; 145 | // margin: $gamma auto; 146 | // opacity: 0.7; 147 | // background: url('../img/upload.svg') no-repeat center; 148 | // background-size: $normal; 149 | // } 150 | } 151 | 152 | .upload__prompt { 153 | @include pad($normal); 154 | // @include rem(margin-top: $normal); 155 | border: 2px dashed rgba($white, 0.3); 156 | } 157 | 158 | .upload__finished { 159 | @extend %navigator-action; 160 | @include span-columns(12); 161 | bottom: 0; 162 | position: absolute; 163 | } 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /sass/modules/_views.scss: -------------------------------------------------------------------------------- 1 | // Modules 2 | // - Views 3 | 4 | .views { 5 | 6 | } -------------------------------------------------------------------------------- /sass/patterns/_animations.scss: -------------------------------------------------------------------------------- 1 | // Placeholders 2 | 3 | %batch-expand-animation { 4 | @include vp(animation, expand .15s $cubic-in); 5 | } 6 | 7 | %batch-retract-animation { 8 | @include vp(animation, retract .12s $cubic-out forwards); 9 | } 10 | 11 | 12 | // Keyframes 13 | 14 | @include keyframes(retract) { 15 | 0% { 16 | opacity: 1; 17 | @include vp(transform, translate3d(0, 0, 0)); 18 | } 19 | 20% { 20 | opacity: 0.2; 21 | } 22 | 50% { 23 | height: 50%; 24 | } 25 | 90% { 26 | @include vp(transform, translate3d(0, -20%, 0)); 27 | } 28 | 100% { 29 | opacity: 0; 30 | height: 0; 31 | } 32 | } 33 | 34 | @include keyframes(expand) { 35 | 0% { 36 | opacity: 0; 37 | @include vp(transform, translate3d(0, -10%, 0)); 38 | } 39 | 20% { 40 | opacity: 0; 41 | height: 80%; 42 | } 43 | 50% { 44 | height: 50%; 45 | } 46 | 100% { 47 | opacity: 1; 48 | @include vp(transform, translate3d(0, 0, 0)); 49 | height: auto; 50 | } 51 | } -------------------------------------------------------------------------------- /sass/patterns/_batch.scss: -------------------------------------------------------------------------------- 1 | %batch-item-title { 2 | font-size: $normal; 3 | padding: .5rem $normal; 4 | } 5 | 6 | %batch-icon-mini { 7 | @include span-columns(1); 8 | &::before { 9 | content: ''; 10 | opacity: 0.5; 11 | background-size: 1.5rem; 12 | height: 2rem; 13 | width: 2rem; 14 | display: block; 15 | } 16 | } 17 | 18 | %batch-icon-chevron { 19 | @extend %batch-icon-mini; 20 | @include vp(transition, transform ease .05s); 21 | @include vp(transform-origin, 90% 75%); 22 | 23 | &::before { 24 | position: relative; 25 | height: 1.5rem; 26 | width: 1.5rem; 27 | top: .375rem; 28 | left: .45rem; 29 | } 30 | } 31 | 32 | %batch-rotate-chevron-1 { 33 | @include vp(transform, rotate(-90deg)); 34 | @include vp(transform-origin, 90% 75%); 35 | } -------------------------------------------------------------------------------- /sass/patterns/_channel.scss: -------------------------------------------------------------------------------- 1 | %channel-icon-chevron { 2 | @extend %batch-icon-chevron; 3 | @include vp(transform, rotate(90deg)); 4 | } 5 | 6 | %channel-rotate-chevron { 7 | @include vp(transform, rotate(0deg)); 8 | @include vp(transform-origin, 90% 75%); 9 | } -------------------------------------------------------------------------------- /sass/patterns/_formatting.scss: -------------------------------------------------------------------------------- 1 | %ul-reset { 2 | margin: 0; 3 | padding: 0; 4 | display: block; 5 | list-style: none; 6 | } 7 | 8 | %user-select-none { 9 | @include vp(user-select, none); 10 | } -------------------------------------------------------------------------------- /sass/patterns/_gradients.scss: -------------------------------------------------------------------------------- 1 | %gradient-1 { 2 | background: rgb(14,23,73); /* Old browsers */ 3 | background: -moz-linear-gradient(45deg, rgba(14,23,73,1) 0%, rgba(11,17,56,1) 0%, rgba(15,45,84,1) 42%, rgba(54,35,63,1) 100%); /* FF3.6+ */ 4 | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(14,23,73,1)), color-stop(0%,rgba(11,17,56,1)), color-stop(42%,rgba(15,45,84,1)), color-stop(100%,rgba(54,35,63,1))); /* Chrome,Safari4+ */ 5 | background: -webkit-linear-gradient(45deg, rgba(14,23,73,1) 0%,rgba(11,17,56,1) 0%,rgba(15,45,84,1) 42%,rgba(54,35,63,1) 100%); /* Chrome10+,Safari5.1+ */ 6 | background: -o-linear-gradient(45deg, rgba(14,23,73,1) 0%,rgba(11,17,56,1) 0%,rgba(15,45,84,1) 42%,rgba(54,35,63,1) 100%); /* Opera 11.10+ */ 7 | background: -ms-linear-gradient(45deg, rgba(14,23,73,1) 0%,rgba(11,17,56,1) 0%,rgba(15,45,84,1) 42%,rgba(54,35,63,1) 100%); /* IE10+ */ 8 | background: linear-gradient(45deg, rgba(14,23,73,1) 0%,rgba(11,17,56,1) 0%,rgba(15,45,84,1) 42%,rgba(54,35,63,1) 100%); /* W3C */ 9 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e1749', endColorstr='#36233f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 10 | } 11 | -------------------------------------------------------------------------------- /sass/patterns/_icons.scss: -------------------------------------------------------------------------------- 1 | %icon-data-set { 2 | &::before { 3 | @extend %icon-font; 4 | content: '\e600'; 5 | } 6 | } -------------------------------------------------------------------------------- /sass/patterns/_input.scss: -------------------------------------------------------------------------------- 1 | %input-reset { 2 | box-shadow: none; 3 | background-color: rgba($interface_color, 0.05); 4 | border: 1px solid rgba($interface_color, 0.1); 5 | padding: $baby $gamma; 6 | font-family: $primary_font_family; 7 | color: $font_color; 8 | font-size: $normal; 9 | outline: none; 10 | 11 | &:hover { 12 | border: 1px solid rgba($interface_color, 0.5); 13 | } 14 | 15 | &:active { 16 | outline: none; 17 | border: 1px solid rgba($highlight_color, 0.8); 18 | } 19 | 20 | &:focus { 21 | outline: none; 22 | border: 1px solid rgba($highlight_color, 0.8); 23 | } 24 | 25 | } 26 | 27 | %button-reset { 28 | @extend %input-reset; 29 | @include pad($baby/2 $baby); 30 | @include rem(font-size, $baby); 31 | 32 | &:hover { 33 | cursor: pointer; 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /sass/patterns/_layout.scss: -------------------------------------------------------------------------------- 1 | %view-layout { 2 | @extend span-columns(10); 3 | @extend shift(1); 4 | height: 32em; 5 | } -------------------------------------------------------------------------------- /sass/patterns/_modals.scss: -------------------------------------------------------------------------------- 1 | %modal-cancel { 2 | @extend %navigator-action; 3 | position: fixed; 4 | top: $alpha; 5 | right: $alpha; 6 | } 7 | 8 | %modal { 9 | max-width: $alpha*10; 10 | height: $alpha*8; 11 | overflow-y: scroll; 12 | margin: auto; 13 | background-color: darken($background_color, 5%); 14 | box-shadow: 0 0 20px rgba($background_color, 1); 15 | top: 20%; 16 | border: 1px solid rgba($highlight_color, 0.3); 17 | position: relative; 18 | } -------------------------------------------------------------------------------- /sass/patterns/_nav.scss: -------------------------------------------------------------------------------- 1 | %nav-items { 2 | display: inline-block; 3 | font-size: $gamma; 4 | margin: 0 $beta 0 $gamma; 5 | color: rgba($white, 0.3); 6 | &::before { 7 | @extend %icon-font; 8 | color: rgba($font_color, 0.3); 9 | font-size: $normal; 10 | position: absolute; 11 | bottom: .2em; 12 | left: -2em; 13 | } 14 | &:hover { 15 | color: $font_color; 16 | cursor: pointer; 17 | } 18 | } -------------------------------------------------------------------------------- /sass/patterns/_navigator.scss: -------------------------------------------------------------------------------- 1 | %navigator-action { 2 | padding: $baby $gamma; 3 | color: $font_color; 4 | background-color: rgba($white, 0.05); 5 | box-shadow: none; 6 | border: none; 7 | 8 | &:hover { 9 | cursor: pointer; 10 | box-shadow: 0 2px $highlight_color; 11 | } 12 | 13 | &:active { 14 | outline: none; 15 | background-color: $highlight_color; 16 | color: $interface_color; 17 | } 18 | 19 | &:focus { 20 | outline: none; 21 | } 22 | 23 | } 24 | 25 | %navigator-heading { 26 | font-size: $normal; 27 | font-weight: 300; 28 | font_color: rgba($font_color, 0.5); 29 | border-bottom: 1px solid rgba($white, 0.1); 30 | padding: $normal 0; 31 | } -------------------------------------------------------------------------------- /sass/patterns/_overlay.scss: -------------------------------------------------------------------------------- 1 | %overlay { 2 | z-index: $z-index-alpha; 3 | position: fixed; 4 | top: 0; 5 | bottom: 0; 6 | left: 0; 7 | right: 0; 8 | background-color: rgba($background_color, 0.8); 9 | height: 100%; 10 | width: 100%; 11 | } -------------------------------------------------------------------------------- /sass/patterns/_transitions.scss: -------------------------------------------------------------------------------- 1 | %hover-ready { 2 | @include vp(user-select, none); 3 | @include vp(transition, opacity .1s ease); 4 | opacity: 0.3; 5 | } 6 | 7 | %hover-go { 8 | @include vp(transition, opacity .1s ease); 9 | opacity: 1; 10 | cursor: pointer; 11 | } -------------------------------------------------------------------------------- /sass/patterns/_typography.scss: -------------------------------------------------------------------------------- 1 | %monospaced-style { 2 | font-family: $mono_font_family; 3 | font-size: $normal; 4 | font-weight: 400; 5 | } 6 | 7 | %small-caps { 8 | text-transform: uppercase; 9 | letter-spacing: 0.1em; 10 | } 11 | 12 | %icon-font { 13 | font-family: 'Sciview'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } -------------------------------------------------------------------------------- /views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Sciview UI 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | --------------------------------------------------------------------------------
TitleCreatedModifiedSizeLengthInfoActions