diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 00000000..959e1696 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,4 @@ +{ + "directory": "bower_components", + "analytics": false +} diff --git a/.buildpacks b/.buildpacks index 26469b47..9741355e 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,2 +1,2 @@ https://github.com/heroku/heroku-buildpack-ruby.git -https://github.com/travis-ci/travis-web-buildpack.git +https://github.com/travis-ci/travis-web-ember-cli-buildpack.git diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..2fe4874a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,33 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = space +indent_size = 2 + +[*.js] +indent_style = space +indent_size = 2 + +[*.hbs] +indent_style = space +indent_size = 2 + +[*.css] +indent_style = space +indent_size = 2 + +[*.html] +indent_style = space +indent_size = 2 + +[*.{diff,md}] +trim_trailing_whitespace = false diff --git a/.ember-cli b/.ember-cli new file mode 100644 index 00000000..ee64cfed --- /dev/null +++ b/.ember-cli @@ -0,0 +1,9 @@ +{ + /** + Ember CLI sends analytics information by default. The data is completely + anonymous, but there are times when you might want to disable this behavior. + + Setting `disableAnalytics` to true will prevent any data from being sent. + */ + "disableAnalytics": false +} diff --git a/.gitignore b/.gitignore index a68127e6..9fbb97bd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,15 @@ -/.bundle -/config/travis.yml -/tmp -.sass-cache -.localeapp/key -/assets/scripts/config/locales.js -.DS_Store -*.sw[op] +# compiled output +dist +tmp -/public/images -/public/scripts -/public/styles/app.css -/public/version -vendor/bundle +# dependencies +node_modules +bower_components + +# misc +.sass-cache +connect.lock +coverage/* +libpeerconnection.log +npm-debug.log +testem.log diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 00000000..08096eff --- /dev/null +++ b/.jshintrc @@ -0,0 +1,32 @@ +{ + "predef": [ + "document", + "window", + "-Promise" + ], + "browser": true, + "boss": true, + "curly": true, + "debug": false, + "devel": true, + "eqeqeq": true, + "evil": true, + "forin": false, + "immed": false, + "laxbreak": false, + "newcap": true, + "noarg": true, + "noempty": false, + "nonew": false, + "nomen": false, + "onevar": false, + "plusplus": false, + "regexp": false, + "undef": true, + "sub": true, + "strict": false, + "white": false, + "eqnull": true, + "esnext": true, + "unused": true +} diff --git a/.travis.yml b/.travis.yml index e2ebc9d7..ca777b12 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,47 +1,27 @@ -language: ruby -rvm: - - 2.1.2 +--- +language: node_js + +addons: + sauce_connect: true sudo: false cache: - bundler: true - -matrix: - fast_finish: true - allow_failures: - - rvm: 2.1.2 - env: 'TEST_SUITE=phantomjs' - - rvm: 2.1.2 - env: "TEST_SUITE=saucelabs BROWSER='firefox::Windows XP'" - -env: - global: - - secure: "RFuCOppyjWHC4XWKtQlgS4zO4B6KVxytdX8+G5jRY3XM+OEGte8VDD88gZLM\nKDpkqMFDbNJAVTsh1kMANCTct2ONi30RTxuJWLtRyK7RE5zCcaGbAkTNZgXo\nOR5OWLEPJZbNfbh17H6J7izTy6yiLR+CsVP1wMgeVusP0eoDhCA=" - - secure: "duqMXPALumXB3e2j/kM2uCaCGwgZsRrU0GCDY+3Zk6a+PK+s0mE9BftcXdxm\n6u87ld2PvCBO0inpe5YeS9LOZsT+OFS4jj+GGTsRI6rmGz+kok0N+ATLTdcj\nu15zhLhUUlhoKW0DZURrDv/iTiC/FKvJ0u5Rft0XbjfTY+0go/M=" - # SAUCE_ACCESS_KEY - - secure: "vf+RnbxcpCZcJYCcJdlT/EbPm9go5BnyyGKHCBwdPqb3+w+k0XyYnUkO5V9pIewIFAKof50i2YlAT8DG9GiUmKrX8z54dqSDlA+R1arMxgZRCHJohLxBjcxHVZe05aVZm/9U7YMOl3DuX88gISG91XC6nr8jnmmp2xGNQR8MkaU=" - # SAUCE_USERNAME - - secure: "tg6TWOS7ZtS4/SXezv4mK482rR+F2MPKCe6PCp+U4oYidm5Jj0NPw/lVog26HSVxxLpayMq35WrBJPwR+7DiNLc+RyBS+yeL8zsLnDlBdGFqSYg6L0j3QK3mVUhQi/ivgvd5NiTcxLROKBie+NJ58HKbenwFFTfvVCy/WjK+dPA=" - - matrix: - - "TEST_SUITE=ruby ARTIFACTS_S3_BUCKET=travis-web-production" - - "TEST_SUITE=phantomjs" - - "TEST_SUITE=saucelabs BROWSER='firefox::Windows XP'" - - "TEST_SUITE=saucelabs BROWSER='chrome::Windows XP'" - -script: "script/ci" + directories: + - node_modules before_install: - - "gem install bundler" -before_script: - - "test $TEST_SUITE = \"ruby\" && gem install travis-artifacts || true" - - "bundle exec rakep" - - "phantomjs --version" -after_script: - - "test $TEST_SUITE = \"ruby\" && test $TRAVIS_PULL_REQUEST = \"false\" && travis-artifacts upload --target-path assets/$TRAVIS_BRANCH --path public/scripts:scripts --path public/styles:styles || true" + - "npm config set spin false" + - "npm install -g npm@^2" + +install: + - npm install -g bower + - npm install + - bower install + +script: + - npm test notifications: - irc: "irc.freenode.org#travis" campfire: secure: "JJezWGD9KJY/LC2aznI3Zyohy31VTIhcTKX7RWR4C/C8YKbW9kZv3xV6Vn11\nSHxJTeZo6st2Bpv6tjlWZ+HCR09kyCNavIChedla3+oHOiuL0D4gSo+gkTNW\nUKYZz9mcQUd9RoQpTeyxvdvX+l7z62/7JwFA7txHOqxbTS8jrjc=" diff --git a/Assetfile b/Assetfile deleted file mode 100644 index 60e700a4..00000000 --- a/Assetfile +++ /dev/null @@ -1,92 +0,0 @@ -$: << 'lib' - -require 'rake-pipeline-web-filters' -require 'travis/assets' -require 'compass' - -Encoding.default_external = Encoding::UTF_8 -Encoding.default_internal = Encoding::UTF_8 - -assets ||= Travis::Assets.new -assets.setup_compass -assets.update_version - -output 'public/scripts' -input assets.scripts do - match '**/*.hbs' do - travis_handlebars :precompile => false # assets.production? - concat 'templates.js' - end - - match '**/*.coffee' do - coffee_script - end - - match 'vendor/**/*.js' do - if assets.production? - reject 'ember.js' - else - reject 'ember.prod.js' - end - safe_concat assets.vendor_order, 'vendor.js' - end - - match '{spec,spec/integration,spec/unit,spec/unit/views}/*.js' do - concat 'spec/specs.js' - end - - match 'spec/support/*.js' do - concat 'spec/support.js' - end - - match 'spec/vendor/*.js' do - concat assets.spec_vendor_order, 'spec/vendor.js' - end - - match 'spec/{vendor,support,specs}.js' do - concat ['spec/vendor.js', 'spec/support.js', 'spec/specs.js'], 'specs.js' - end - - match %r(^(?!vendor|spec).*\.js$) do - modules = proc { |input| input.path.gsub(%r((^app/|lib/|\.js$)), '') } - # why did we use the string strategy for development? makes it impossible to set breakpoints - # minispade(string: assets.development?, rewrite_requires: true, module_id_generator: modules) - minispade(string: false, rewrite_requires: true, module_id_generator: modules) - end - - match %r(^(?!spec).*\.js$) do - paths = ['min/app.js'] - paths.push 'app.js' unless assets.production? - concat ['vendor.js'], paths - end - - if assets.production? - match 'min/app.js' do - strip_debug - # uglify squeeze: true - concat 'app.js' - end - end -end - -output 'public/styles' -input assets.styles do - match '**/*.{scss,sass,css}' do - sass assets.production? ? { style: :compressed } : {} - concat assets.styles_order, ['app.css'] - end -end - -output 'public/images' -input assets.images do - match '**/*' do - copy - end -end - -# output 'public' -# input assets.static do -# match '**/*' do -# copy -# end -# end diff --git a/Brocfile.js b/Brocfile.js new file mode 100644 index 00000000..7aeb4dc2 --- /dev/null +++ b/Brocfile.js @@ -0,0 +1,43 @@ +/* global require, module */ + +var EmberApp = require('ember-cli/lib/broccoli/ember-app'); + +var fingerprint = { + extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg'] + }, + assetsHost; + +if (assetsHost = process.env.ASSETS_HOST) { + if (assetsHost.substr(-1) !== '/') { + assetsHost = assetsHost + '/' + } + fingerprint.prepend = assetsHost +} + +var app = new EmberApp({ + fingerprint: fingerprint +}); + +app.import('bower_components/pusher/dist/pusher.js'); +app.import('bower_components/jquery-timeago/jquery.timeago.js'); +app.import('bower_components/visibilityjs/lib/visibility.core.js'); +app.import('bower_components/visibilityjs/lib/visibility.timers.js'); +app.import('bower_components/JavaScript-MD5/js/md5.js'); +app.import('vendor/ansiparse.js'); +app.import('vendor/log.js'); +app.import('vendor/customerio.js'); +app.import('bower_components/moment/moment.js'); +// Use `app.import` to add additional libraries to the generated +// output files. +// +// If you need to use different assets in different +// environments, specify an object as the first parameter. That +// object's keys should be the environment name and the values +// should be the asset to use in that environment. +// +// If the library that you are including contains AMD or ES6 +// modules that you would like to import into your application +// please specify an object with the list of modules as keys +// along with the exports of each module as its value. + +module.exports = app.toTree(); diff --git a/Gemfile b/Gemfile index 64632540..3a2b8cf1 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,7 @@ source 'http://rubygems.org' ruby '2.1.2' +gem 'travis-web', path: 'waiter' gem 'puma' gem 'rack-ssl', '~> 1.3' gem 'rack-protection', '~> 1.3' @@ -8,15 +9,6 @@ gem 'rack-mobile-detect' gem 'sinatra' gem 'hashr' -gem 'rake-pipeline', github: 'livingsocial/rake-pipeline' -gem 'rake-pipeline-web-filters', github: 'wycats/rake-pipeline-web-filters' -gem 'coffee-script' -gem 'compass' -gem 'tilt' -gem 'uglifier' -gem 'yui-compressor' -gem 'libv8', '~> 3.16.0' - group :development, :test do gem 'rake' end @@ -25,9 +17,6 @@ end group :development do # gem 'debugger' gem 'foreman' - gem 'rerun', '~> 0.10.0' - gem 'guard' - gem 'rb-fsevent', '~> 0.9.1' end group :test do diff --git a/Gemfile.lock b/Gemfile.lock index 72b86129..1f988ccd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,75 +1,21 @@ -GIT - remote: git://github.com/livingsocial/rake-pipeline.git - revision: a75d96fbadcc659a35a0ae59212e0bc60b58cc54 +PATH + remote: waiter specs: - rake-pipeline (0.8.0) - json - rake (~> 10.1.0) - thor - -GIT - remote: git://github.com/wycats/rake-pipeline-web-filters.git - revision: 7bd283aac83d7c46a8908f089033a6087d7cd68f - specs: - rake-pipeline-web-filters (0.6.0) - rack - rake-pipeline (~> 0.6) + travis-web (0.0.1) GEM remote: http://rubygems.org/ specs: backports (3.6.3) - celluloid (0.16.0) - timers (~> 4.0.0) - chunky_png (1.3.1) - coderay (1.1.0) - coffee-script (2.3.0) - coffee-script-source - execjs - coffee-script-source (1.8.0) - compass (1.0.1) - chunky_png (~> 1.2) - compass-core (~> 1.0.1) - compass-import-once (~> 1.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - sass (>= 3.3.13, < 3.5) - compass-core (1.0.1) - multi_json (~> 1.0) - sass (>= 3.3.0, < 3.5) - compass-import-once (1.0.5) - sass (>= 3.2, < 3.5) diff-lcs (1.2.5) dotenv (0.11.1) dotenv-deployment (~> 0.0.2) dotenv-deployment (0.0.2) - execjs (2.2.1) - ffi (1.9.6) foreman (0.75.0) dotenv (~> 0.11.1) thor (~> 0.19.1) - formatador (0.2.5) - guard (2.6.1) - formatador (>= 0.2.4) - listen (~> 2.7) - lumberjack (~> 1.0) - pry (>= 0.9.12) - thor (>= 0.18.1) hashr (0.0.22) - hitimes (1.2.2) - json (1.8.1) - libv8 (3.16.14.7) - listen (2.7.11) - celluloid (>= 0.15.2) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - lumberjack (1.0.9) - method_source (0.8.2) multi_json (1.10.1) - pry (0.10.1) - coderay (~> 1.1.0) - method_source (~> 0.8.1) - slop (~> 3.4) puma (2.9.1) rack (>= 1.1, < 2.0) rack (1.5.2) @@ -82,11 +28,6 @@ GEM rack-test (0.6.2) rack (>= 1.0) rake (10.1.1) - rb-fsevent (0.9.4) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - rerun (0.10.0) - listen (~> 2.7, >= 2.7.3) rspec (2.99.0) rspec-core (~> 2.99.0) rspec-expectations (~> 2.99.0) @@ -95,7 +36,6 @@ GEM rspec-expectations (2.99.2) diff-lcs (>= 1.1.3, < 2.0) rspec-mocks (2.99.2) - sass (3.4.5) sinatra (1.4.5) rack (~> 1.4) rack-protection (~> 1.4) @@ -107,38 +47,21 @@ GEM rack-test sinatra (~> 1.4.0) tilt (~> 1.3) - slop (3.6.0) thor (0.19.1) tilt (1.4.1) - timers (4.0.1) - hitimes - uglifier (2.5.3) - execjs (>= 0.3.0) - json (>= 1.8.0) - yui-compressor (0.12.0) PLATFORMS ruby DEPENDENCIES - coffee-script - compass foreman - guard hashr - libv8 (~> 3.16.0) puma rack-mobile-detect rack-protection (~> 1.3) rack-ssl (~> 1.3) rake - rake-pipeline! - rake-pipeline-web-filters! - rb-fsevent (~> 0.9.1) - rerun (~> 0.10.0) rspec (~> 2.11) sinatra sinatra-contrib - tilt - uglifier - yui-compressor + travis-web! diff --git a/Guardfile b/Guardfile deleted file mode 100644 index 7d9e087e..00000000 --- a/Guardfile +++ /dev/null @@ -1,7 +0,0 @@ -$: << 'lib' - -guard 'assets' do - watch(%r(^Assetfile)) - watch(%r(^assets)) -end - diff --git a/Guardfile.phantom b/Guardfile.phantom deleted file mode 100644 index 504f0dc6..00000000 --- a/Guardfile.phantom +++ /dev/null @@ -1,6 +0,0 @@ -$: << 'lib' - -guard 'specs' do - watch(%r(^public)) -end - diff --git a/Procfile b/Procfile index 8ead007d..5297e6dd 100644 --- a/Procfile +++ b/Procfile @@ -1,3 +1,3 @@ -web: bundle exec rackup -s puma -p $PORT +web: bundle exec rackup -s puma -p $PORT waiter/config.ru assets: rerun -x -p 'assets/**/*' 'bundle exec rakep' #specs: rerun -x -p 'public/**/*' './run_jasmine.coffee public/spec.html' diff --git a/README.md b/README.md index 987da786..72e477a0 100644 --- a/README.md +++ b/README.md @@ -2,56 +2,26 @@ [![Build Status](https://travis-ci.org/travis-ci/travis-web.png?branch=master)](https://travis-ci.org/travis-ci/travis-web) ### Running the app +The app is developed using [http://ember-cli.com](Ember CLI). It requires nodejs +with npm installed. + In order to run the app you need to install dependencies with: - bundle install + bower install + npm install -Then you have to run the server, the easiest way to do this is to -use foreman: +Now you can run the server: - bundle exec foreman start + ember serve -Now you can open [localhost:5000](http://localhost:5000) +And open http://localhost:4200 in the browser. -By default it uses the official API at `https://api.travis-ci.org`, but you -can customize the API server URL using: +### Running tests +To run a test suite execute: - API_ENDPOINT="http://localhost:3000/" bundle exec foreman start + ember test -This will run against API run locally. +You can also start an interactive test runner for easier development: -### Compiling assets manually - - bundle exec rakep - ENV=production bundle exec rakep - -### Running the spec suite - -First, start the app (see above). - - bundle exec foreman start - -To run the Ruby specs, run rspec against the spec/ directory: - - bundle exec rspec spec/ - -To run the Jasmine specs, open the spec page: [localhost:5000/spec.html](http://localhost:5000/spec.html) - -### i18n - -Localization for travis-web is managed via [localeapp](http://localeapp.com). -If you are interested in improving the existing localizations or adding -a new locale, please contact us on irc (#travis) and we will set you up. - -Please do **not** edit the YAML files directly. - -Localization data can be synced with the following rake task: - - bundle exec localeapp:update - -This will publish any new keys in en.yml, as well as any missing keys -from your handlebars templates and pull down the latest localizations. - -*note*: You will need to have the localeapp api key exported to -LOCALEAPP_API_KEY + ember test --serve diff --git a/Rakefile b/Rakefile deleted file mode 100644 index e7afa057..00000000 --- a/Rakefile +++ /dev/null @@ -1,36 +0,0 @@ -$: << 'lib' -namespace :localeapp do - desc "syncs localeapp, yaml and handlebars" - task :update do - require 'localeapp-handlebars_i18n' - Localeapp::HandlebarsI18n.configure($stdout) do |config| - config.hbs_load_path = Dir[File.expand_path '../assets/scripts/app/templates/**/*.hbs', __FILE__] - config.yml_load_path = File.expand_path '../locales/', __FILE__ - config.localeapp_api_key = ENV['LOCALEAPP_API_KEY'] - end - system "localeapp push locales/#{Localeapp::HandlebarsI18n.default_locale}.yml" - Localeapp::HandlebarsI18n.send_missing_translations - system "localeapp pull" - end -end - -namespace :ember do - desc 'update ember' - task :update do - if File.exists?('tmp/ember.js') - system 'cd tmp/ember.js; git fetch origin; git reset --hard origin/master' - else - system 'git clone https://github.com/emberjs/ember.js.git tmp/ember.js' - end - - system 'cd tmp/ember.js; bundle update' - system 'cd tmp/ember.js; rake dist' - system 'cp tmp/ember.js/dist/ember.js assets/javascripts/vendor/ember.js' - end -end - -task :update_emojis do - s = Dir.glob('assets/images/emoji/*.png').map {|png| png.split('/', 4)[3].gsub('.png', '')}.map{|png| "'#{png}'"}.join(", ") - e = "@EmojiDictionary = [#{s}]" - File.open("assets/scripts/config/emoij.coffee", "w") {|f| f.write(e) } -end diff --git a/app/adapters/application.coffee b/app/adapters/application.coffee new file mode 100644 index 00000000..e5d41681 --- /dev/null +++ b/app/adapters/application.coffee @@ -0,0 +1,23 @@ +`import DS from 'ember-data'` +`import config from 'travis/config/environment'` + +Adapter = DS.ActiveModelAdapter.extend + host: config.apiEndpoint + coalesceFindRequests: true + + ajaxOptions: (url, type, options) -> + hash = @_super(url, type, options) + + hash.headers ||= {} + + hash.headers['accept'] = 'application/json; version=2' + + if token = Travis.sessionStorage.getItem('travis.token') + hash.headers['Authorization'] ||= "token #{token}" + + hash + + findMany: (store, type, ids) -> + @ajax(@buildURL(type.typeKey), 'GET', data: { ids: ids }) + +`export default Adapter` diff --git a/app/adapters/env-var.coffee b/app/adapters/env-var.coffee new file mode 100644 index 00000000..751e4488 --- /dev/null +++ b/app/adapters/env-var.coffee @@ -0,0 +1,26 @@ +`import Ember from 'ember'` +`import ApplicationAdapter from 'travis/adapters/application'` + +Adapter = ApplicationAdapter.extend + namespace: 'settings' + + buildURL: (type, id, record) -> + url = @_super.apply this, arguments + + if record && (repoId = Ember.get(record, 'repo.id')) + delimiter = if url.indexOf('?') != -1 then '&' else '?' + url = "#{url}#{delimiter}repository_id=#{repoId}" + + url + + updateRecord: (store, type, record) -> + data = {}; + serializer = store.serializerFor(type.typeKey); + + serializer.serializeIntoHash(data, type, record); + + id = Ember.get(record, 'id'); + + this.ajax(this.buildURL(type.typeKey, id, record), "PATCH", { data: data }) + +`export default Adapter` diff --git a/app/adapters/ssh-key.coffee b/app/adapters/ssh-key.coffee new file mode 100644 index 00000000..f4bad312 --- /dev/null +++ b/app/adapters/ssh-key.coffee @@ -0,0 +1,24 @@ +`import Ember from 'ember'` +`import ApplicationAdapter from 'travis/adapters/application'` + +Adapter = ApplicationAdapter.extend + namespace: 'settings' + + find: (store, type, id, record) -> + @ajax(this.urlPrefix() + '/ssh_key/' + id, 'GET') + + deleteRecord: (store, type, record) -> + id = Ember.get(record, 'id') + + @ajax(this.urlPrefix() + '/ssh_key/' + id, "DELETE"); + + createRecord: (store, type, record) -> + data = {}; + serializer = store.serializerFor(type.typeKey); + serializer.serializeIntoHash(data, type, record, { includeId: true }); + + id = Ember.get(record, 'id') + + this.ajax(this.urlPrefix() + '/ssh_key/' + id, "PATCH", { data: data }) + +`export default Adapter` diff --git a/app/app.coffee b/app/app.coffee new file mode 100644 index 00000000..b789caf7 --- /dev/null +++ b/app/app.coffee @@ -0,0 +1,98 @@ +`import Ember from 'ember'` +`import Resolver from 'ember/resolver'` +`import loadInitializers from 'ember/load-initializers'` +`import config from './config/environment'` + +`import mb from 'travis/helpers/mb'` +`import label from 'travis/helpers/label'` +`import travisField from 'travis/helpers/travis-field'` +`import travisErrors from 'travis/helpers/travis-errors'` +`import tipsy from 'travis/helpers/tipsy'` +#`import input from 'travis/helpers/input'` +`import filterInput from 'travis/helpers/filter-input'` +Ember.Handlebars.registerHelper('label', label) +Ember.Handlebars.registerHelper('travis-field', travisField) +Ember.Handlebars.registerHelper('travis-errors', travisErrors) +Ember.Handlebars.registerHelper('tipsy', tipsy) +#Ember.Handlebars.registerHelper('input', input) +Ember.Handlebars.registerHelper('filter-input', filterInput) +Ember.Handlebars.registerBoundHelper('mb', mb) + +Ember.MODEL_FACTORY_INJECTIONS = true + +App = Ember.Application.extend(Ember.Evented, + LOG_TRANSITIONS: true + LOG_TRANSITIONS_INTERNAL: true + LOG_ACTIVE_GENERATION: true + LOG_MODULE_RESOLVER: true + LOG_VIEW_LOOKUPS: true + #LOG_RESOLVER: true + + modulePrefix: config.modulePrefix + podModulePrefix: config.podModulePrefix + Resolver: Resolver + + lookup: -> + @__container__.lookup.apply @__container__, arguments + + flash: (options) -> + Travis.lookup('controller:flash').loadFlashes([options]) + + toggleSidebar: -> + $('body').toggleClass('maximized') + # TODO gotta force redraws here :/ + element = $('') + $('#top .profile').append(element) + Em.run.later (-> element.remove()), 10 + element = $('') + $('#repo').append(element) + Em.run.later (-> element.remove()), 10 + + ready: -> + location.href = location.href.replace('#!/', '') if location.hash.slice(0, 2) == '#!' + + @on 'user:signed_in', (user) -> + Travis.onUserUpdate(user) + + @on 'user:synced', (user) -> + Travis.onUserUpdate(user) + + currentDate: -> + new Date() + + onUserUpdate: (user) -> + if config.pro + @identifyCustomer(user) + @subscribePusher(user) + @setupCharm(user) + + subscribePusher: (user) -> + channels = user.channels + channels = channels.map (channel) -> + if channel.match /^private-/ + channel + else + "private-#{channel}" + Travis.pusher.subscribeAll(channels) + + setupCharm: (user) -> + $.extend window.__CHARM, + customer: user.login, + customer_id: user.id, + email: user.email + + displayCharm: -> + __CHARM.show() + + identifyCustomer: (user) -> + if _cio && _cio.identify + _cio.identify + id: user.id + email: user.email + name: user.name + created_at: (Date.parse(user.created_at) / 1000) || null + login: user.login +) +loadInitializers(App, config.modulePrefix) + +`export default App` diff --git a/assets/scripts/app/templates/.gitkeep b/app/components/.gitkeep similarity index 100% rename from assets/scripts/app/templates/.gitkeep rename to app/components/.gitkeep diff --git a/assets/scripts/app/components.coffee b/app/components/travis-switch.coffee similarity index 86% rename from assets/scripts/app/components.coffee rename to app/components/travis-switch.coffee index 2ea5726d..a9e98a0c 100644 --- a/assets/scripts/app/components.coffee +++ b/app/components/travis-switch.coffee @@ -1,4 +1,6 @@ -Travis.TravisSwitchComponent = Ember.Component.extend +`import Ember from 'ember'` + +Component = Ember.Component.extend tagName: 'a' classNames: ['travis-switch'] classNameBindings: ['_active:active'] @@ -19,3 +21,5 @@ Travis.TravisSwitchComponent = Ember.Component.extend # allow for bindings to propagate Ember.run.next this, -> @sendAction('action', target) + +`export default Component` diff --git a/config/.gitkeep b/app/controllers/.gitkeep similarity index 100% rename from config/.gitkeep rename to app/controllers/.gitkeep diff --git a/assets/scripts/app/controllers/account.coffee b/app/controllers/account.coffee similarity index 69% rename from assets/scripts/app/controllers/account.coffee rename to app/controllers/account.coffee index 182a2ab6..c4c5af45 100644 --- a/assets/scripts/app/controllers/account.coffee +++ b/app/controllers/account.coffee @@ -1,4 +1,6 @@ -Travis.AccountController = Ember.ObjectController.extend +`import Ember from 'ember'` + +Controller = Ember.ObjectController.extend allHooks: [] needs: ['currentUser'] userBinding: 'controllers.currentUser' @@ -20,7 +22,12 @@ Travis.AccountController = Ember.ObjectController.extend reloadHooks: -> if login = @get('login') - @set('allHooks', Travis.Hook.find(all: true, owner_name: login)) + hooks = @store.find('hook', all: true, owner_name: login) + + hooks.then () -> + hooks.set('isLoaded', true) + + @set('allHooks', hooks) hooks: (-> @reloadHooks() unless hooks = @get('allHooks') @@ -33,9 +40,11 @@ Travis.AccountController = Ember.ObjectController.extend ).property('allHooks.length', 'allHooks') showPrivateReposHint: (-> - Travis.config.show_repos_hint == 'private' + @config.show_repos_hint == 'private' ) .property() showPublicReposHint: (-> - Travis.config.show_repos_hint == 'public' + @config.show_repos_hint == 'public' ) .property() + +`export default Controller` diff --git a/app/controllers/accounts.coffee b/app/controllers/accounts.coffee new file mode 100644 index 00000000..427549ec --- /dev/null +++ b/app/controllers/accounts.coffee @@ -0,0 +1,6 @@ +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend + tab: 'accounts' + +`export default Controller` diff --git a/app/controllers/accounts/info.coffee b/app/controllers/accounts/info.coffee new file mode 100644 index 00000000..8d51d797 --- /dev/null +++ b/app/controllers/accounts/info.coffee @@ -0,0 +1,7 @@ +`import Ember from 'ember'` + +Controller = Ember.Controller.extend + needs: ['currentUser', 'repos'] + userBinding: 'controllers.currentUser' + +`export default Controller` diff --git a/app/controllers/auth.coffee b/app/controllers/auth.coffee new file mode 100644 index 00000000..90babea0 --- /dev/null +++ b/app/controllers/auth.coffee @@ -0,0 +1,5 @@ +`import Ember from 'ember'` + +Controller = Ember.Controller.extend() + +`export default Controller` diff --git a/app/controllers/build.coffee b/app/controllers/build.coffee new file mode 100644 index 00000000..91c14983 --- /dev/null +++ b/app/controllers/build.coffee @@ -0,0 +1,26 @@ +`import Ember from 'ember'` +`import { gravatarImage } from 'travis/utils/urls'` +`import GithubUrlPropertievs from 'travis/mixins/github-url-properties'` + +Controller = Ember.Controller.extend GithubUrlPropertievs, + needs: ['repo'] + repoBinding: 'controllers.repo.repo' + commitBinding: 'build.commit' + currentUserBinding: 'controllers.repo.currentUser' + tabBinding: 'controllers.repo.tab' + + currentItemBinding: 'build' + + loading: (-> + @get('build.isLoading') + ).property('build.isLoading') + + urlCommitterGravatarImage: (-> + gravatarImage(@get('commit.committerEmail'), 40) + ).property('commit.committerEmail') + + urlAuthorGravatarImage: (-> + gravatarImage(@get('commit.authorEmail'), 40) + ).property('commit.authorEmail') + +`export default Controller` diff --git a/app/controllers/builds-item.coffee b/app/controllers/builds-item.coffee new file mode 100644 index 00000000..89fec964 --- /dev/null +++ b/app/controllers/builds-item.coffee @@ -0,0 +1,15 @@ +`import Ember from 'ember'` +`import { colorForState } from 'travis/utils/helpers'` +`import GithubUrlProperties from 'travis/mixins/github-url-properties'` + +Controller = Ember.ObjectController.extend(GithubUrlProperties, + needs: ['builds'] + isPullRequestsListBinding: 'controllers.builds.isPullRequestsList' + buildBinding: 'content' + + color: (-> + colorForState(@get('build.state')) + ).property('build.state') +) + +`export default Controller` diff --git a/assets/scripts/app/controllers/builds.coffee b/app/controllers/builds.coffee similarity index 55% rename from assets/scripts/app/controllers/builds.coffee rename to app/controllers/builds.coffee index 1ebd215e..873d3ebc 100644 --- a/assets/scripts/app/controllers/builds.coffee +++ b/app/controllers/builds.coffee @@ -1,4 +1,6 @@ -Travis.BuildsController = Em.ArrayController.extend +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend isPullRequestsList: false sortAscending: false @@ -14,8 +16,17 @@ Travis.BuildsController = Em.ArrayController.extend showMore: -> id = @get('repo.id') number = @get('lastObject.number') - @get('content').load Travis.Build.olderThanNumber(id, number, @get('tab')) + @get('content').load @olderThanNumber(id, number, @get('tab')) displayShowMoreButton: (-> @get('tab') != 'branches' and parseInt(@get('lastObject.number')) > 1 ).property('tab', 'lastObject.number') + + olderThanNumber: (id, number, type) -> + options = { repository_id: id, after_number: number } + if type? + options.event_type = type.replace(/s$/, '') # poor man's singularize + + @store.find('build', options) + +`export default Controller` diff --git a/app/controllers/caches-by-branch.coffee b/app/controllers/caches-by-branch.coffee new file mode 100644 index 00000000..34f01be2 --- /dev/null +++ b/app/controllers/caches-by-branch.coffee @@ -0,0 +1,25 @@ +`import Ember from 'ember'` +`import Ajax from 'travis/utils/ajax'` + +Controller = Ember.ObjectController.extend + isDeleting: false + needs: ['repo', 'caches'] + repo: Ember.computed.alias('controllers.repo.repo') + + actions: + delete: -> + return if @get('isDeleting') + + if confirm('Are you sure?') + @set('isDeleting', true) + + data = { branch: @get('branch') } + + deletingDone = => @set('isDeleting', false) + + repo = @get('repo') + Ajax.ajax("/repos/#{repo.get('id')}/caches", "DELETE", data: data).then(deletingDone, deletingDone).then => + model = @get('model') + @get('controllers.caches').removeObject(model) + +`export default Controller` diff --git a/app/controllers/caches-item.coffee b/app/controllers/caches-item.coffee new file mode 100644 index 00000000..ef14fea2 --- /dev/null +++ b/app/controllers/caches-item.coffee @@ -0,0 +1,27 @@ +`import Ember from 'ember'` +`import Ajax from 'travis/utils/ajax'` + +Controller = Ember.ObjectController.extend + isDeleting: false + needs: ['repo', 'caches'] + repo: Ember.computed.alias('controllers.repo.repo') + + actions: + delete: -> + return if @get('isDeleting') + + if confirm('Are you sure?') + @set('isDeleting', true) + + data = { branch: @get('branch'), match: @get('slug') } + + deletingDone = => @set('isDeleting', false) + + repo = @get('repo') + Ajax.ajax("/repos/#{repo.get('id')}/caches", "DELETE", data: data).then(deletingDone, deletingDone).then => + model = @get('model') + @get('parent.caches').removeObject(model) + if @get('parent.caches.length') == 0 + @get('controllers.caches').removeObject(@get('parent')) + +`export default Controller` diff --git a/app/controllers/caches.coffee b/app/controllers/caches.coffee new file mode 100644 index 00000000..8c5ad621 --- /dev/null +++ b/app/controllers/caches.coffee @@ -0,0 +1,22 @@ +`import Ember from 'ember'` +`import Ajax from 'travis/utils/ajax'` + +Controller = Ember.ArrayController.extend + isDeleting: false + needs: ['repo'] + repo: Ember.computed.alias('controllers.repo.repo') + + actions: + deleteRepoCache: -> + return if @get('isDeleting') + + if confirm('Are you sure?') + @set('isDeleting', true) + + deletingDone = => @set('isDeleting', false) + + repo = @get('repo') + Ajax.ajax("/repos/#{repo.get('id')}/caches", "DELETE").then(deletingDone, deletingDone).then => + @clear() + +`export default Controller` diff --git a/assets/scripts/app/controllers/current_user.coffee b/app/controllers/current-user.coffee similarity index 83% rename from assets/scripts/app/controllers/current_user.coffee rename to app/controllers/current-user.coffee index 4b8ca9e4..af7231f6 100644 --- a/assets/scripts/app/controllers/current_user.coffee +++ b/app/controllers/current-user.coffee @@ -1,4 +1,4 @@ -Travis.CurrentUserController = Em.ObjectController.extend +Controller = Ember.ObjectController.extend sync: -> @get('model').sync() @@ -9,3 +9,5 @@ Travis.CurrentUserController = Em.ObjectController.extend Ember.run.scheduleOnce 'routerTransitions', this, -> @container.lookup('router:main').send('renderFirstSync') ).observes('isSyncing', 'auth.currentUser') + +`export default Controller` diff --git a/app/controllers/dashboard/repositories.coffee b/app/controllers/dashboard/repositories.coffee new file mode 100644 index 00000000..ad8f40f9 --- /dev/null +++ b/app/controllers/dashboard/repositories.coffee @@ -0,0 +1,29 @@ +`import Ember from 'ember'` + +Controller = Ember.Controller.extend + #queryParams: ['filter'] + filter: null + + filteredRepositories: (-> + filter = @get('filter') + repos = @get('model') + + if Ember.isBlank(filter) + repos + else + repos.filter (item, index) -> + item.slug.match(new RegExp(filter)) + + ).property('filter', 'model') + + updateFilter: () -> + value = @get('_lastFilterValue') + @transitionToRoute queryParams: { filter: value } + @set('filter', value) + + actions: + updateFilter: (value) -> + @set('_lastFilterValue', value) + Ember.run.throttle this, @updateFilter, [], 200, false + +`export default Controller` diff --git a/assets/scripts/app/controllers/env_var.coffee b/app/controllers/env-var.coffee similarity index 68% rename from assets/scripts/app/controllers/env_var.coffee rename to app/controllers/env-var.coffee index c0fe6179..b793b857 100644 --- a/assets/scripts/app/controllers/env_var.coffee +++ b/app/controllers/env-var.coffee @@ -1,6 +1,7 @@ -require 'travis/validations' +`import Ember from 'ember'` +`import Validations from 'travis/utils/validations'` -Travis.EnvVarController = Ember.ObjectController.extend Travis.Validations, +Controller = Ember.ObjectController.extend Validations, isEditing: false isDeleting: false @@ -25,8 +26,7 @@ Travis.EnvVarController = Ember.ObjectController.extend Travis.Validations, return if @get('isDeleting') @set('isDeleting', true) - deletingDone = => @set('isDeleting', false) - @get('model').deleteRecord().then deletingDone, deletingDone + @get('model').destroyRecord() edit: -> @set('isEditing', true) @@ -37,7 +37,6 @@ Travis.EnvVarController = Ember.ObjectController.extend Travis.Validations, save: -> return if @get('isSaving') - @set('isSaving', true) if @isValid() env_var = @get('model') @@ -45,8 +44,5 @@ Travis.EnvVarController = Ember.ObjectController.extend Travis.Validations, # TODO: handle errors env_var.save().then => @set('isEditing', false) - @set('isSaving', false) - , => - @set('isSaving', false) - else - @set('isSaving', false) + +`export default Controller` diff --git a/app/controllers/env-vars.coffee b/app/controllers/env-vars.coffee new file mode 100644 index 00000000..2580ccad --- /dev/null +++ b/app/controllers/env-vars.coffee @@ -0,0 +1,6 @@ +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend + vars: Ember.computed.alias('model') + +`export default Controller` diff --git a/assets/scripts/app/controllers/env_var_new.coffee b/app/controllers/env-vars/new.coffee similarity index 79% rename from assets/scripts/app/controllers/env_var_new.coffee rename to app/controllers/env-vars/new.coffee index 2aac40e2..0317eeb5 100644 --- a/assets/scripts/app/controllers/env_var_new.coffee +++ b/app/controllers/env-vars/new.coffee @@ -1,9 +1,11 @@ -require 'travis/validations' +`import Validations from 'travis/utils/validations'` -Travis.EnvVarsNewController = Travis.Controller.extend Travis.Validations, +Controller = Ember.Controller.extend Validations, needs: ['repo'] repo: Ember.computed.alias('controllers.repo.repo') + isSaving: false + validates: name: ['presence'] @@ -23,7 +25,7 @@ Travis.EnvVarsNewController = Travis.Controller.extend Travis.Validations, @set('isSaving', true) if @isValid() - env_var = Travis.EnvVar.create( + env_var = @store.createRecord('env_var', name: @get('name') value: @get('value') public: @get('public') @@ -39,3 +41,5 @@ Travis.EnvVarsNewController = Travis.Controller.extend Travis.Validations, @set('isSaving', false) else @set('isSaving', false) + +`export default Controller` diff --git a/app/controllers/first-sync.coffee b/app/controllers/first-sync.coffee new file mode 100644 index 00000000..bc9e94a5 --- /dev/null +++ b/app/controllers/first-sync.coffee @@ -0,0 +1,9 @@ +`import Ember from 'ember'` + +Controller = Ember.Controller.extend + needs: ['currentUser'] + user: Ember.computed.alias('controllers.currentUser') + + isSyncing: Ember.computed.alias('user.isSyncing') + +`export default Controller` diff --git a/assets/scripts/app/controllers/flash.coffee b/app/controllers/flash.coffee similarity index 73% rename from assets/scripts/app/controllers/flash.coffee rename to app/controllers/flash.coffee index 8c48feb3..a047ea94 100644 --- a/assets/scripts/app/controllers/flash.coffee +++ b/app/controllers/flash.coffee @@ -1,10 +1,14 @@ -Travis.FlashController = Ember.ArrayController.extend +`import Ember from 'ember'` +`import LimitedArray from 'travis/utils/limited-array'` +`import Broadcast from 'travis/models/broadcast'` + +Controller = Ember.ArrayController.extend needs: ['currentUser'] currentUserBinding: 'controllers.currentUser' init: -> @_super.apply this, arguments - @set('flashes', Travis.LimitedArray.create(limit: 2, content: [])) + @set('flashes', LimitedArray.create(limit: 2, content: [])) model: (-> broadcasts = @get('unseenBroadcasts') @@ -20,7 +24,7 @@ Travis.FlashController = Ember.ArrayController.extend ).property('broadcasts.isLoaded', 'broadcasts.length') broadcasts: (-> - if @get('currentUser.id') then Travis.Broadcast.find() else Ember.A() + if @get('currentUser.id') then @store.find('broadcast') else Ember.A() ).property('currentUser.id') loadFlashes: (msgs) -> @@ -31,7 +35,7 @@ Travis.FlashController = Ember.ArrayController.extend Ember.run.later(this, (-> @get('flashes.content').removeObject(msg)), 15000) close: (msg) -> - if msg instanceof Travis.Broadcast + if msg instanceof Broadcast msg.setSeen() @notifyPropertyChange('unseenBroadcasts') else @@ -40,3 +44,5 @@ Travis.FlashController = Ember.ArrayController.extend actions: close: (msg) -> @close(msg) + +`export default Controller` diff --git a/assets/scripts/app/controllers/job.coffee b/app/controllers/job.coffee similarity index 60% rename from assets/scripts/app/controllers/job.coffee rename to app/controllers/job.coffee index 5705e0d6..f05e44ad 100644 --- a/assets/scripts/app/controllers/job.coffee +++ b/app/controllers/job.coffee @@ -1,4 +1,7 @@ -Travis.JobController = Em.Controller.extend +`import Ember from 'ember'` +`import { githubCommit } from 'travis/utils/urls'` + +Controller = Ember.Controller.extend needs: ['repo'] repoBinding: 'controllers.repo.repo' @@ -10,5 +13,7 @@ Travis.JobController = Em.Controller.extend currentItemBinding: 'job' urlGithubCommit: (-> - Travis.Urls.githubCommit(@get('repo.slug'), @get('commit.sha')) + githubCommit(@get('repo.slug'), @get('commit.sha')) ).property('repo.slug', 'commit.sha') + +`export default Controller` diff --git a/app/controllers/main/error.coffee b/app/controllers/main/error.coffee new file mode 100644 index 00000000..90babea0 --- /dev/null +++ b/app/controllers/main/error.coffee @@ -0,0 +1,5 @@ +`import Ember from 'ember'` + +Controller = Ember.Controller.extend() + +`export default Controller` diff --git a/assets/scripts/app/controllers/profile.coffee b/app/controllers/profile.coffee similarity index 64% rename from assets/scripts/app/controllers/profile.coffee rename to app/controllers/profile.coffee index 298f3700..4686516a 100644 --- a/assets/scripts/app/controllers/profile.coffee +++ b/app/controllers/profile.coffee @@ -1,4 +1,6 @@ -Travis.ProfileController = Travis.Controller.extend +`import Ember from 'ember'` + +Controller = Ember.Controller.extend name: 'profile' needs: ['currentUser', 'accounts', 'account'] @@ -6,7 +8,7 @@ Travis.ProfileController = Travis.Controller.extend accountBinding: 'controllers.account' activate: (action, params) -> - this["view#{$.camelize(action)}"]() + this["view_#{action}".camelize()]() viewHooks: -> @connectTab('hooks') @@ -16,14 +18,11 @@ Travis.ProfileController = Travis.Controller.extend @connectTab('user') connectTab: (tab) -> - if tab == 'user' - view = 'AccountsInfoView' - else - view = "#{$.camelize(tab)}View" - viewClass = Travis[view] @set('tab', tab) billingUrl: (-> id = if @get('account.type') == 'user' then 'user' else @get('account.login') - "#{Travis.config.billing_endpoint}/subscriptions/#{id}" + "#{@get('config').billingEndpoint}/subscriptions/#{id}" ).property('account.login', 'account.type') + +`export default Controller` diff --git a/app/controllers/queue.coffee b/app/controllers/queue.coffee new file mode 100644 index 00000000..cabd5b7f --- /dev/null +++ b/app/controllers/queue.coffee @@ -0,0 +1,9 @@ +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend + content: (-> + @store.filter 'job', {}, (job) -> + ['created', 'queued'].indexOf(job.get('state')) != -1 + ).property() + +`export default Controller` diff --git a/assets/scripts/app/controllers/repo.coffee b/app/controllers/repo.coffee similarity index 84% rename from assets/scripts/app/controllers/repo.coffee rename to app/controllers/repo.coffee index a2d73bf5..e8b616ec 100644 --- a/assets/scripts/app/controllers/repo.coffee +++ b/app/controllers/repo.coffee @@ -1,4 +1,7 @@ -Travis.RepoController = Travis.Controller.extend +`import Ember from 'ember'` +`import { githubRepo } from 'travis/utils/urls'` + +Controller = Ember.Controller.extend needs: ['repos', 'currentUser', 'build', 'request', 'job'] currentUserBinding: 'controllers.currentUser' @@ -12,7 +15,7 @@ Travis.RepoController = Travis.Controller.extend init: -> @_super.apply this, arguments if !Ember.testing - Visibility.every Travis.INTERVALS.updateTimes, @updateTimes.bind(this) + Visibility.every @config.intervals.updateTimes, @updateTimes.bind(this) updateTimes: -> Ember.run this, -> @@ -30,7 +33,7 @@ Travis.RepoController = Travis.Controller.extend activate: (action) -> @stopObservingLastBuild() - this["view#{$.camelize(action)}"]() + this["view_#{action}".camelize()]() viewIndex: -> @observeLastBuild() @@ -68,7 +71,7 @@ Travis.RepoController = Travis.Controller.extend @connectTab('settings') lastBuildDidChange: -> - Ember.run.scheduleOnce('data', this, @_lastBuildDidChange); + Ember.run.scheduleOnce('actions', this, @_lastBuildDidChange); _lastBuildDidChange: -> build = @get('repo.lastBuild') @@ -88,5 +91,7 @@ Travis.RepoController = Travis.Controller.extend @set('tab', tab) urlGithub: (-> - Travis.Urls.githubRepo(@get('repo.slug')) + githubRepo(@get('repo.slug')) ).property('repo.slug') + +`export default Controller` diff --git a/assets/scripts/app/controllers/repos.coffee b/app/controllers/repos.coffee similarity index 81% rename from assets/scripts/app/controllers/repos.coffee rename to app/controllers/repos.coffee index c9583a13..98ee9538 100644 --- a/assets/scripts/app/controllers/repos.coffee +++ b/app/controllers/repos.coffee @@ -1,6 +1,8 @@ -require 'travis/limited_array' +`import Ember from 'ember'` +`import limit from 'travis/utils/computed-limit'` +`import Repo from 'travis/models/repo'` -Travis.ReposController = Ember.ArrayController.extend +Controller = Ember.ArrayController.extend actions: activate: (name) -> @activate(name) @@ -27,14 +29,14 @@ Travis.ReposController = Ember.ArrayController.extend init: -> @_super.apply this, arguments if !Ember.testing - Visibility.every Travis.INTERVALS.updateTimes, @updateTimes.bind(this) + Visibility.every @config.intervals.updateTimes, @updateTimes.bind(this) recentRepos: (-> Ember.ArrayProxy.extend( isLoadedBinding: 'repos.isLoaded' - repos: Travis.Repo.withLastBuild() + repos: Repo.withLastBuild(@store) sorted: Ember.computed.sort('repos', 'sortedReposKeys') - content: Ember.computed.limit('sorted', 'limit') + content: limit('sorted', 'limit') sortedReposKeys: ['sortOrder:asc'] limit: 30 ).create() @@ -47,7 +49,7 @@ Travis.ReposController = Ember.ArrayController.extend activate: (tab, params) -> @set('sortProperties', ['sortOrder']) @set('tab', tab) - this["view#{$.camelize(tab)}"](params) + this["view_#{tab}".camelize()](params) viewRecent: -> @set('content', @get('recentRepos')) @@ -57,14 +59,14 @@ Travis.ReposController = Ember.ArrayController.extend userRepos: (-> if login = @get('currentUser.login') - Travis.Repo.accessibleBy(login) + Repo.accessibleBy(@store, login) else [] ).property('currentUser.login') viewSearch: (phrase) -> @set('search', phrase) - @set('content', Travis.Repo.search(phrase)) + @set('content', Repo.search(@store, phrase)) searchObserver: (-> search = @get('search') @@ -88,3 +90,5 @@ Travis.ReposController = Ember.ArrayController.extend else 'Could not find any repos' ).property('tab') + +`export default Controller` diff --git a/assets/scripts/app/controllers/request.coffee b/app/controllers/request.coffee similarity index 75% rename from assets/scripts/app/controllers/request.coffee rename to app/controllers/request.coffee index 0714c884..3d70cda0 100644 --- a/assets/scripts/app/controllers/request.coffee +++ b/app/controllers/request.coffee @@ -1,4 +1,6 @@ -Travis.RequestController = Ember.ObjectController.extend +`import Ember from 'ember'` + +Controller = Ember.ObjectController.extend requestClass: (-> if @get('content.isAccepted') 'accepted' @@ -22,10 +24,10 @@ Travis.RequestController = Ember.ObjectController.extend message: (-> message = @get('model.message') - if Travis.config.pro && message == "private repository" + if @config.pro && message == "private repository" '' else message ).property('model.message') - +`export default Controller` diff --git a/assets/scripts/app/controllers/requests.coffee b/app/controllers/requests.coffee similarity index 64% rename from assets/scripts/app/controllers/requests.coffee rename to app/controllers/requests.coffee index 860ca276..759b7268 100644 --- a/assets/scripts/app/controllers/requests.coffee +++ b/app/controllers/requests.coffee @@ -1,4 +1,6 @@ -Travis.RequestsController = Ember.ArrayController.extend +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend needs: ['repo'] repo: Ember.computed.alias('controllers.repo.repo') @@ -6,3 +8,5 @@ Travis.RequestsController = Ember.ArrayController.extend slug = @get('repo.slug') "https://lint.travis-ci.org/#{slug}" ).property('repo.slug') + +`export default Controller` diff --git a/app/controllers/running-jobs.coffee b/app/controllers/running-jobs.coffee new file mode 100644 index 00000000..44ca18fc --- /dev/null +++ b/app/controllers/running-jobs.coffee @@ -0,0 +1,9 @@ +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend + content: (-> + @store.filter 'job', { state: 'started' }, (job) -> + ['started', 'received'].indexOf(job.get('state')) != -1 + ).property() + +`export default Controller` diff --git a/assets/scripts/app/controllers/settings.coffee b/app/controllers/settings/index.coffee similarity index 87% rename from assets/scripts/app/controllers/settings.coffee rename to app/controllers/settings/index.coffee index d090beea..40656ffa 100644 --- a/assets/scripts/app/controllers/settings.coffee +++ b/app/controllers/settings/index.coffee @@ -1,4 +1,6 @@ -Travis.SettingsIndexController = Em.ObjectController.extend +`import Ember from 'ember'` + +Controller = Ember.ObjectController.extend settings: Ember.computed.alias('model.settings') settingsChanged: (-> @@ -16,3 +18,5 @@ Travis.SettingsIndexController = Em.ObjectController.extend save: -> @get('model').saveSettings(@get('settings')).then null, -> Travis.flash(error: 'There was an error while saving settings. Please try again.') + +`export default Controller` diff --git a/app/controllers/sidebar.coffee b/app/controllers/sidebar.coffee new file mode 100644 index 00000000..47336d56 --- /dev/null +++ b/app/controllers/sidebar.coffee @@ -0,0 +1,19 @@ +`import Ember from 'ember'` + +Controller = Ember.ArrayController.extend + init: -> + @_super.apply this, arguments + @tickables = [] + + tips: [ + "Did you know that you can parallelize tests on Travis CI? Learn more" + "Did you know that you can split a build into several smaller pieces? Learn more" + "Did you know that you can skip a build? Learn more" + ] + + tip: (-> + if tips = @get('tips') + tips[Math.floor(Math.random()*tips.length)] + ).property().volatile() + +`export default Controller` diff --git a/app/controllers/ssh-key.coffee b/app/controllers/ssh-key.coffee new file mode 100644 index 00000000..152ba3d9 --- /dev/null +++ b/app/controllers/ssh-key.coffee @@ -0,0 +1,67 @@ +`import Ember from 'ember'` +`import Validations from 'travis/utils/validations'` + +Controller = Ember.ObjectController.extend Validations, + isEditing: false + isSaving: false + isDeleting: false + defaultKey: null + + needs: ['repo'] + repo: Ember.computed.alias('controllers.repo.repo') + + validates: + value: ['presence'] + + reset: -> + @set('isEditing', false) + + actions: + add: -> + id = @get('repo.id') + model = @store.recordForId('sshKey', id) + if model.get('currentState.stateName') == 'root.empty' + @store.dematerializeRecord(model) + + model = @store.createRecord('sshKey', id: id) + @set('model', model) + @set('isEditing', true) + + save: -> + return if @get('isSaving') + @set('isSaving', true) + + if @isValid() + @get('model').save().then => + @set('isEditing', false) + @set('isSaving', false) + , (error) => + @set('isSaving', false) + if error.errors + @addErrorsFromResponse(error.errors) + else + @set('isSaving', false) + + delete: -> + return if @get('isDeleting') + @set('isDeleting', true) + + deletingDone = => @set('isDeleting', false) + + @get('model').deleteRecord() + @get('model').save().then(deletingDone, deletingDone).then => + @set('model', null) + + cancel: -> + if model = @get('model') + if model.get('currentState.stateName') == 'root.empty' || + model.get('currentState.stateName').indexOf('root.loaded.created') != -1 + @store.dematerializeRecord(model) + + @set('model', null) + @set('isEditing', false) + + edit: -> + @set('isEditing', true) + +`export default Controller` diff --git a/app/controllers/top.coffee b/app/controllers/top.coffee new file mode 100644 index 00000000..614d18ea --- /dev/null +++ b/app/controllers/top.coffee @@ -0,0 +1,21 @@ +`import Ember from 'ember'` + +Controller = Ember.Controller.extend + needs: ['currentUser'] + userBinding: 'controllers.currentUser' + + userName: (-> + @get('user.name') || @get('user.login') + ).property('user.login', 'user.name') + + gravatarUrl: (-> + "#{location.protocol}//www.gravatar.com/avatar/#{@get('user.gravatarId')}?s=48&d=mm" + ).property('user.gravatarId') + + actions: { + toggleBurgerMenu: -> + @toggleProperty('is-open') + return false + } + +`export default Controller` diff --git a/assets/scripts/app/controllers/annotations.coffee b/app/helpers/.gitkeep similarity index 100% rename from assets/scripts/app/controllers/annotations.coffee rename to app/helpers/.gitkeep diff --git a/app/helpers/capitalize.coffee b/app/helpers/capitalize.coffee new file mode 100644 index 00000000..aacda844 --- /dev/null +++ b/app/helpers/capitalize.coffee @@ -0,0 +1,10 @@ +`import { safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (value, options) -> + if value? + safe $.capitalize(value) + else + '' + +`export default helper` diff --git a/app/helpers/filter-input.coffee b/app/helpers/filter-input.coffee new file mode 100644 index 00000000..89c47bd7 --- /dev/null +++ b/app/helpers/filter-input.coffee @@ -0,0 +1,18 @@ +`import Ember from 'ember'` + +TextField = Ember.TextField.extend + keyUp: (event) -> + @sendAction('action', @get('_value'), event) + + _elementValueDidChange: -> + @set('_value', @$().val()); + +fn = (options) -> + Ember.assert('You can only pass attributes to the `input` helper, not arguments', arguments.length < 2) + + onEvent = options.hash.on + delete options.hash.on + options.hash.onEvent = onEvent || 'enter' + return Ember.Handlebars.helpers.view.call(this, TextField, options) + +`export default fn` diff --git a/app/helpers/format-commit.coffee b/app/helpers/format-commit.coffee new file mode 100644 index 00000000..aaf63643 --- /dev/null +++ b/app/helpers/format-commit.coffee @@ -0,0 +1,6 @@ +`import { safe, formatCommit as formatCommitHelper } from 'travis/utils/helpers'` + +helper = Ember.Handlebars.makeBoundHelper (commit) -> + safe formatCommitHelper(commit.get('sha'), commit.get('branch')) if commit + +`export default helper` diff --git a/app/helpers/format-config.coffee b/app/helpers/format-config.coffee new file mode 100644 index 00000000..6ab44df1 --- /dev/null +++ b/app/helpers/format-config.coffee @@ -0,0 +1,6 @@ +`import { safe, formatConfig as formatConfigHelper } from 'travis/utils/helpers'` + +formatConfig = (config, options) -> + safe formatConfigHelper(config) + +`export default helper` diff --git a/app/helpers/format-duration.coffee b/app/helpers/format-duration.coffee new file mode 100644 index 00000000..2e5b6e12 --- /dev/null +++ b/app/helpers/format-duration.coffee @@ -0,0 +1,7 @@ +`import { timeInWords, safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (duration, options) -> + safe timeInWords(duration) + +`export default helper` diff --git a/app/helpers/format-message.coffee b/app/helpers/format-message.coffee new file mode 100644 index 00000000..720c6b56 --- /dev/null +++ b/app/helpers/format-message.coffee @@ -0,0 +1,7 @@ +`import { formatMessage as _formatMessage, safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (message, options) -> + safe _formatMessage(message, options.hash) + +`export default helper` diff --git a/app/helpers/format-sha.coffee b/app/helpers/format-sha.coffee new file mode 100644 index 00000000..30f6e444 --- /dev/null +++ b/app/helpers/format-sha.coffee @@ -0,0 +1,7 @@ +`import { formatSha as _formatSha, safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (sha) -> + safe _formatSha(sha) + +`export default helper` diff --git a/app/helpers/format-time.coffee b/app/helpers/format-time.coffee new file mode 100644 index 00000000..19d21b1a --- /dev/null +++ b/app/helpers/format-time.coffee @@ -0,0 +1,7 @@ +`import { timeAgoInWords, safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (value, options) -> + safe timeAgoInWords(value) || '-' + +`export default helper` diff --git a/app/helpers/github-commit-link.coffee b/app/helpers/github-commit-link.coffee new file mode 100644 index 00000000..1e48044f --- /dev/null +++ b/app/helpers/github-commit-link.coffee @@ -0,0 +1,12 @@ +`import { formatCommit, safe } from 'travis/utils/helpers'` +`import { githubCommit as githubCommitUrl } from 'travis/utils/urls'` + +helper = Ember.Handlebars.makeBoundHelper (slug, commitSha) -> + return '' unless commitSha + sha = Handlebars.Utils.escapeExpression formatCommit(commitSha) + return sha unless slug + url = Handlebars.Utils.escapeExpression githubCommitUrl(slug, sha) + + safe '' + sha + '' + +`export default helper` diff --git a/app/helpers/humanize-state.coffee b/app/helpers/humanize-state.coffee new file mode 100644 index 00000000..ad01c870 --- /dev/null +++ b/app/helpers/humanize-state.coffee @@ -0,0 +1,10 @@ +`import { safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (state) -> + if state == 'received' + 'booting' + else + state + +`export default helper` diff --git a/app/helpers/input.coffee b/app/helpers/input.coffee new file mode 100644 index 00000000..dc817a07 --- /dev/null +++ b/app/helpers/input.coffee @@ -0,0 +1,30 @@ +`import Ember from 'ember'` + +originalInputHelper = Ember.Handlebars.helpers.input + +input = (options) -> + # for now I can match label only with the property name + # passed here matches the label + name = (options.hash.value || options.hash.checked) + id = options.hash.id + + # generate id only if it's not given + if name && !name.match(/\./) && !id + labels = @get('_labels') + unless labels + labels = Ember.Object.create() + @set('_labels', labels) + + # for now I support only label + input in their own context + id = labels.get(name) + unless id + id = "#{name}-#{Math.round(Math.random() * 1000000)}" + labels.set(name, id) + + options.hash.id = id + options.hashTypes.id = 'STRING' + options.hashContexts.id = this + + originalInputHelper.call(this, options) + +`export default input` diff --git a/app/helpers/label.coffee b/app/helpers/label.coffee new file mode 100644 index 00000000..5d733fd5 --- /dev/null +++ b/app/helpers/label.coffee @@ -0,0 +1,34 @@ +`import Ember from 'ember'` + +LabelView = Ember.View.extend( + tagName: 'label' + + attributeBindings: ['for', 'accesskey', 'form'] + classNameBindings: ['class'] +) + +label = (options) -> + view = LabelView + + name = options.hash.for + if name + labels = @get('_labels') + unless labels + labels = Ember.Object.create() + @set('_labels', labels) + + # for now I support only label + input in their own context + id = labels.get(name) + unless id + id = "#{name}-#{Math.round(Math.random() * 1000000)}" + labels.set(name, id) + + options.hash.for = id + options.hashTypes.for = 'STRING' + options.hashContexts.for = this + if options.hash.content + view = view.extend(templateName: 'helpers/label') + + Ember.Handlebars.helpers.view.call(this, view, options) + +`export default label` diff --git a/app/helpers/mb.coffee b/app/helpers/mb.coffee new file mode 100644 index 00000000..59fd38d7 --- /dev/null +++ b/app/helpers/mb.coffee @@ -0,0 +1,7 @@ +`import Ember from "ember"` + +fn = (size) -> + if size + (size / 1024 / 1024).toFixed(2) + +`export default fn` diff --git a/app/helpers/short-compare-shas.coffee b/app/helpers/short-compare-shas.coffee new file mode 100644 index 00000000..606dc491 --- /dev/null +++ b/app/helpers/short-compare-shas.coffee @@ -0,0 +1,12 @@ +`import { pathFrom } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (url, options) -> + path = pathFrom(url) + if path.indexOf('...') >= 0 + shas = path.split('...') + "#{shas[0][0..6]}..#{shas[1][0..6]}" + else + path + +`export default helper` diff --git a/app/helpers/tipsy.coffee b/app/helpers/tipsy.coffee new file mode 100644 index 00000000..08c58e38 --- /dev/null +++ b/app/helpers/tipsy.coffee @@ -0,0 +1,7 @@ +`import { safe } from 'travis/utils/helpers'` +`import Ember from "ember"` + +helper = Ember.Handlebars.makeBoundHelper (text, tip) -> + safe '' + text + '' + +`export default helper` diff --git a/app/helpers/travis-errors.coffee b/app/helpers/travis-errors.coffee new file mode 100644 index 00000000..030cb535 --- /dev/null +++ b/app/helpers/travis-errors.coffee @@ -0,0 +1,23 @@ +`import Ember from 'ember'` + +ErrorsView = Ember.View.extend + tagName: 'span' + templateName: 'helpers/travis-errors' + classNames: ['error'] + classNameBindings: ['codes', 'show'] + codes: (-> + @get('errors').mapBy('code') + ).property('@errors', 'errors.length') + show: Ember.computed.notEmpty('errors.[]') + +fn = (name, options) -> + errors = @get('errors').for(name) + window[name + 'Errors'] = errors + view = ErrorsView.create( + controller: this + errors: errors + ) + + Ember.Handlebars.helpers.view.call(this, view, options) + +`export default fn` diff --git a/app/helpers/travis-field.coffee b/app/helpers/travis-field.coffee new file mode 100644 index 00000000..c29bb3ea --- /dev/null +++ b/app/helpers/travis-field.coffee @@ -0,0 +1,23 @@ +`import Ember from 'ember'` + +FormFieldRowView = Ember.View.extend + invalid: Ember.computed.notEmpty('errors.[]') + classNameBindings: ['invalid'] + classNames: 'field' + +fn = (name, options) -> + errors = @get('errors').for(name) + template = options.fn + delete options.fn + + view = FormFieldRowView.create( + controller: this + template: template + errors: errors + name: name + classNameBindings: ['name'] + ) + + Ember.Handlebars.helpers.view.call(this, view, options) + +`export default fn` diff --git a/app/index.html b/app/index.html new file mode 100644 index 00000000..7d63a71d --- /dev/null +++ b/app/index.html @@ -0,0 +1,26 @@ + + + + + + {{title}} + + + + {{content-for 'head'}} + + + + + + {{content-for 'head-footer'}} + + + {{content-for 'body'}} + + + + + {{content-for 'body-footer'}} + + diff --git a/app/initializers/app.coffee b/app/initializers/app.coffee new file mode 100644 index 00000000..dfb5ae06 --- /dev/null +++ b/app/initializers/app.coffee @@ -0,0 +1,10 @@ +initialize = (container, app) -> + if typeof window != 'undefined' + window.Travis = app + +Initializer = + name: 'app' + initialize: initialize + +`export {initialize}` +`export default Initializer` diff --git a/app/initializers/auth.coffee b/app/initializers/auth.coffee new file mode 100644 index 00000000..befb2174 --- /dev/null +++ b/app/initializers/auth.coffee @@ -0,0 +1,19 @@ +`import Auth from 'travis/utils/auth'` +`import TestAuth from 'travis/utils/test-auth'` + +initialize = (container, app) -> + app.register 'auth:main', if Ember.testing then TestAuth else Auth + + app.inject('route', 'auth', 'auth:main') + app.inject('controller', 'auth', 'auth:main') + app.inject('application', 'auth', 'auth:main') + + app.inject('auth', 'store', 'store:main') + +AuthInitializer = + name: 'auth' + after: 'ember-data' + initialize: initialize + +`export {initialize}` +`export default AuthInitializer` diff --git a/app/initializers/charm.coffee b/app/initializers/charm.coffee new file mode 100644 index 00000000..d3b2fd02 --- /dev/null +++ b/app/initializers/charm.coffee @@ -0,0 +1,16 @@ +`import config from 'travis/config/environment'` + +initialize = (container, app) -> + if config.charmKey + window.__CHARM = + key: config.charmKey + url: "https://charmscout.herokuapp.com/feedback" + + $('head').append $('') + +Initializer = + name: 'charm' + initialize: initialize + +`export {initialize}` +`export default Initializer` diff --git a/app/initializers/config.coffee b/app/initializers/config.coffee new file mode 100644 index 00000000..f10eb95d --- /dev/null +++ b/app/initializers/config.coffee @@ -0,0 +1,14 @@ +`import config from 'travis/config/environment'` + +initialize = (container, application) -> + application.register 'config:main', config, { instantiate: false } + + application.inject('controller', 'config', 'config:main') + application.inject('route', 'config', 'config:main') + +ConfigInitializer = + name: 'config' + initialize: initialize + +`export {initialize}` +`export default ConfigInitializer` diff --git a/app/initializers/google-analytics.coffee b/app/initializers/google-analytics.coffee new file mode 100644 index 00000000..3ed8725f --- /dev/null +++ b/app/initializers/google-analytics.coffee @@ -0,0 +1,20 @@ +`import config from 'travis/config/environment'` + +initialize = (container) -> + if config.gaCode + window._gaq = [] + _gaq.push(['_setAccount', config.gaCode]) + + ga = document.createElement('script') + ga.type = 'text/javascript' + ga.async = true + ga.src = 'https://ssl.google-analytics.com/ga.js' + s = document.getElementsByTagName('script')[0] + s.parentNode.insertBefore(ga, s) + +GAInitializer = + name: 'google-analytics' + initialize: initialize + +`export {initialize}` +`export default GAInitializer` diff --git a/app/initializers/location.coffee b/app/initializers/location.coffee new file mode 100644 index 00000000..1177e5dd --- /dev/null +++ b/app/initializers/location.coffee @@ -0,0 +1,11 @@ +`import TravisLocation from 'travis/utils/location'` + +initialize = (container, application) -> + application.register 'location:travis', TravisLocation + +Initializer = + name: 'location' + initialize: initialize + +`export { initialize }` +`export default Initializer` diff --git a/app/initializers/pusher.coffee b/app/initializers/pusher.coffee new file mode 100644 index 00000000..3505c271 --- /dev/null +++ b/app/initializers/pusher.coffee @@ -0,0 +1,21 @@ +`import config from 'travis/config/environment'` +`import TravisPusher from 'travis/utils/pusher'` + +initialize = (container, application) -> + if config.pusher.key + application.pusher = new TravisPusher(config.pusher) + + application.register 'pusher:main', application.pusher, { instantiate: false } + + application.inject('route', 'pusher', 'pusher:main') + + application.pusher.store = container.lookup('store:main') + + +PusherInitializer = + name: 'pusher' + after: 'ember-data' + initialize: initialize + +`export {initialize}` +`export default PusherInitializer` diff --git a/app/initializers/services.coffee b/app/initializers/services.coffee new file mode 100644 index 00000000..cb283735 --- /dev/null +++ b/app/initializers/services.coffee @@ -0,0 +1,19 @@ +`import Slider from 'travis/utils/slider'` +`import Tailing from 'travis/utils/tailing'` +`import ToTop from 'travis/utils/to-top'` +`import config from 'travis/config/environment'` + +initialize = (container, application) -> + application.slider = new Slider(application.storage) + application.tailing = new Tailing($(window), '#tail', '#log') + application.toTop = new ToTop($(window), '.to-top', '#log-container') + + application.register 'slider:main', application.slider, { instantiate: false } + application.inject('controller', 'slider', 'slider:main') + +Initializer = + name: 'services' + initialize: initialize + +`export {initialize}` +`export default Initializer` diff --git a/app/initializers/storage.coffee b/app/initializers/storage.coffee new file mode 100644 index 00000000..8b8a04ad --- /dev/null +++ b/app/initializers/storage.coffee @@ -0,0 +1,58 @@ +`import Ember from 'ember'` + +Storage = Em.Object.extend + init: -> + @set('storage', {}) + key: (key) -> + "__#{key.replace('.', '__')}" + getItem: (k) -> + return @get("storage.#{@key(k)}") + setItem: (k,v) -> + @set("storage.#{@key(k)}", v) + removeItem: (k) -> + @setItem(k, null) + clear: -> + @set('storage', {}) + +sessionStorage = (-> + storage = null + try + # firefox will not throw error on access for sessionStorage var, + # you need to actually get something from session + sessionStorage.getItem('foo') + storage = sessionStorage + catch err + storage = Storage.create() + + storage +)() + +storage = (-> + storage = null + try + storage = window.localStorage || throw('no storage') + catch err + storage = Storage.create() + + storage +)() + +initialize = (container, application) -> + application.register 'storage:main', storage, { instantiate: false } + application.register 'sessionStorage:main', sessionStorage, { instantiate: false } + + application.inject('auth', 'storage', 'storage:main') + application.inject('auth', 'sessionStorage', 'sessionStorage:main') + + # I still use Travis.storage in some places which are not that easy to + # refactor + application.storage = storage + application.sessionStorage = sessionStorage + +StorageInitializer = + name: 'storage' + before: 'services' + initialize: initialize + +`export {initialize}` +`export default StorageInitializer` diff --git a/app/initializers/stylesheets-manager.coffee b/app/initializers/stylesheets-manager.coffee new file mode 100644 index 00000000..6b49760a --- /dev/null +++ b/app/initializers/stylesheets-manager.coffee @@ -0,0 +1,18 @@ +stylesheetsManager = Ember.Object.create + enable: (id) -> + $("##{id}").removeAttr('disabled') + + disable: (id) -> + $("##{id}").attr('disabled', 'disabled') + +initialize = (container, application) -> + application.register 'stylesheetsManager:main', stylesheetsManager, { instantiate: false } + + application.inject('route', 'stylesheetsManager', 'stylesheetsManager:main') + +StylesheetsManagerInitializer = + name: 'inject-stylesheets-manager' + initialize: initialize + +`export {initialize}` +`export default StylesheetsManagerInitializer` diff --git a/app/mixins/github-url-properties.coffee b/app/mixins/github-url-properties.coffee new file mode 100644 index 00000000..76bc191c --- /dev/null +++ b/app/mixins/github-url-properties.coffee @@ -0,0 +1,12 @@ +`import { githubCommit, githubPullRequest } from 'travis/utils/urls'` + +mixin = Ember.Mixin.create + urlGithubCommit: (-> + githubCommit(@get('repo.slug'), @get('commit.sha')) + ).property('repo.slug', 'commit.sha') + + urlGithubPullRequest: (-> + githubPullRequest(@get('repo.slug'), @get('build.pullRequestNumber')) + ).property('repo.slug', 'build.pullRequestNumber') + +`export default mixin` diff --git a/app/models/.gitkeep b/app/models/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/app/models/account.coffee b/app/models/account.coffee new file mode 100644 index 00000000..8f371962 --- /dev/null +++ b/app/models/account.coffee @@ -0,0 +1,12 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` + +Account = Model.extend + name: DS.attr() + type: DS.attr() + reposCount: DS.attr('number') + subscribed: DS.attr('boolean') + education: DS.attr('boolean') + loginBinding: 'id' + +`export default Account` diff --git a/app/models/annotation.coffee b/app/models/annotation.coffee new file mode 100644 index 00000000..000bd85d --- /dev/null +++ b/app/models/annotation.coffee @@ -0,0 +1,13 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` + +Annotation = Model.extend + jobId: DS.attr('number') + description: DS.attr() + url: DS.attr() + status: DS.attr() + providerName: DS.attr() + + job: DS.belongsTo('job') + +`export default Annotation` diff --git a/app/models/branch.coffee b/app/models/branch.coffee new file mode 100644 index 00000000..72aaea3d --- /dev/null +++ b/app/models/branch.coffee @@ -0,0 +1,26 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` + +Branch = Model.extend + repositoryId: DS.attr('number') + commitId: DS.attr('number') + state: DS.attr() + number: DS.attr('number') + branch: DS.attr() + message: DS.attr() + result: DS.attr('number') + duration: DS.attr('number') + startedAt: DS.attr() + finishedAt: DS.attr() + + commit: DS.belongsTo('commit') + + repo: (-> + @store.find('repo', @get('repositoryId')) if @get('repositoryId') + ).property('repositoryId') + + updateTimes: -> + @notifyPropertyChange 'started_at' + @notifyPropertyChange 'finished_at' + +`export default Branch` diff --git a/assets/scripts/app/models/broadcast.coffee b/app/models/broadcast.coffee similarity index 63% rename from assets/scripts/app/models/broadcast.coffee rename to app/models/broadcast.coffee index 9f712631..80c6c963 100644 --- a/assets/scripts/app/models/broadcast.coffee +++ b/app/models/broadcast.coffee @@ -1,27 +1,29 @@ -require 'travis/model' +`import Ember from 'ember'` +`import Model from 'travis/models/model'` -@Travis.Broadcast = Travis.Model.extend - message: Ember.attr('string') +Broadcast = Model.extend + message: DS.attr() toObject: -> { type: 'broadcast', id: @get('id'), message: @get('message') } isSeen: (-> - @get('id') in Travis.Broadcast.seen + @get('id') in Broadcast.get('seen') ).property() setSeen: -> - Travis.Broadcast.seen.pushObject(@get('id')) - Travis.storage.setItem('travis.seen_broadcasts', JSON.stringify(Travis.Broadcast.seen)) + Broadcast.get('seen').pushObject(@get('id')) + Travis.storage.setItem('travis.seen_broadcasts', JSON.stringify(Broadcast.get('seen'))) @notifyPropertyChange('isSeen') -@Travis.Broadcast.reopenClass +Broadcast.reopenClass seen: (-> seenBroadcasts = Travis.storage.getItem('travis.seen_broadcasts') seenBroadcasts = JSON.parse(seenBroadcasts) if seenBroadcasts? Ember.A(seenBroadcasts || []) - )() + ).property() # TODO fix or monkey-patch the adapter's url and key lookup/generation crap # url: 'users/broadcasts' +`export default Broadcast` diff --git a/assets/scripts/app/models/build.coffee b/app/models/build.coffee similarity index 50% rename from assets/scripts/app/models/build.coffee rename to app/models/build.coffee index a83fcf91..46f4c8a8 100644 --- a/assets/scripts/app/models/build.coffee +++ b/app/models/build.coffee @@ -1,32 +1,32 @@ -require 'travis/model' +`import { durationFrom, configKeys, compact } from 'travis/utils/helpers'` +`import Ajax from 'travis/utils/ajax'` +`import configKeysMap from 'travis/utils/keys-map'` +`import Ember from 'ember'` +`import Model from 'travis/models/model'` +`import DurationCalculations from 'travis/utils/duration-calculations'` -@Travis.Build = Travis.Model.extend Travis.DurationCalculations, - repositoryId: Ember.attr('number') - commitId: Ember.attr('number') +Build = Model.extend DurationCalculations, + state: DS.attr() + number: DS.attr('number') + branch: DS.attr('string') + message: DS.attr('string') + _duration: DS.attr('number') + _config: DS.attr('object') + _startedAt: DS.attr() + _finishedAt: DS.attr() + pullRequest: DS.attr('boolean') + pullRequestTitle: DS.attr() + pullRequestNumber: DS.attr('number') - state: Ember.attr('string') - number: Ember.attr(Number) - branch: Ember.attr('string') - message: Ember.attr('string') - _duration: Ember.attr(Number, key: 'duration') - _config: Ember.attr('object', key: 'config') - _startedAt: Ember.attr('string', key: 'started_at') - _finishedAt: Ember.attr('string', key: 'finished_at') - pullRequest: Ember.attr('boolean') - pullRequestTitle: Ember.attr('string') - pullRequestNumber: Ember.attr(Number) - # TODO add eventType to the api for api build requests - # eventType: Ember.attr('string') - - repo: Ember.belongsTo('Travis.Repo', key: 'repository_id') - commit: Ember.belongsTo('Travis.Commit') - jobs: Ember.hasMany('Travis.Job') + repo: DS.belongsTo('repo', async: true) + commit: DS.belongsTo('commit', async: true) + jobs: DS.hasMany('job', async: true) config: (-> console.log('config') if config = @get('_config') - Travis.Helpers.compact(config) - else + compact(config) + else if @get('currentState.stateName') != 'root.loading' return if @get('isFetchingConfig') @set 'isFetchingConfig', true @@ -76,7 +76,7 @@ require 'travis/model' keys = [] @get('jobs').forEach (job) -> - Travis.Helpers.configKeys(job.get('config')).forEach (key) -> + configKeys(job.get('config')).forEach (key) -> keys.pushObject key unless keys.contains key keys @@ -85,7 +85,7 @@ require 'travis/model' configKeys: (-> keys = @get('rawConfigKeys') headers = ['Job', 'Duration', 'Finished'] - $.map(headers.concat(keys), (key) -> if Travis.CONFIG_KEYS_MAP.hasOwnProperty(key) then Travis.CONFIG_KEYS_MAP[key] else key) + $.map(headers.concat(keys), (key) -> if configKeysMap.hasOwnProperty(key) then configKeysMap[key] else key) ).property('rawConfigKeys.length') canCancel: (-> @@ -93,29 +93,15 @@ require 'travis/model' ).property('isFinished', 'jobs.@each.canCancel') cancel: (-> - Travis.ajax.post "/builds/#{@get('id')}/cancel" + Ajax.post "/builds/#{@get('id')}/cancel" ) requeue: -> - Travis.ajax.post "/builds/#{@get('id')}/restart" + Ajax.post "/builds/#{@get('id')}/restart" formattedFinishedAt: (-> if finishedAt = @get('finishedAt') moment(finishedAt).format('lll') ).property('finishedAt') -@Travis.Build.reopenClass - byRepoId: (id, parameters) -> - @find($.extend(parameters || {}, repository_id: id)) - - branches: (options) -> - @find repository_id: options.repoId, branches: true - - olderThanNumber: (id, build_number, type) -> - console.log type - # TODO fix this api and use some kind of pagination scheme - options = { repository_id: id, after_number: build_number } - if type? - options.event_type = type.replace(/s$/, '') # poor man's singularize - - @find(options) +`export default Build` diff --git a/app/models/commit.coffee b/app/models/commit.coffee new file mode 100644 index 00000000..387c7b0d --- /dev/null +++ b/app/models/commit.coffee @@ -0,0 +1,35 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` +`import Build from 'travis/models/build'` + +Commit = Model.extend + sha: DS.attr() + branch: DS.attr() + message: DS.attr() + compareUrl: DS.attr() + authorName: DS.attr() + authorEmail: DS.attr() + committerName: DS.attr() + committerEmail: DS.attr() + committedAt: DS.attr() + + build: DS.belongsTo('build') + + subject: ( -> + @get('message').split("\n", 1)[0] + ).property('message') + + body: ( -> + message = @get('message') + if message.indexOf("\n") > 0 + message.substr(message.indexOf("\n") + 1).trim() + else + "" + ).property('message') + + authorIsCommitter: ( -> + @get('authorName') == @get('committerName') and + @get('authorEmail') == @get('committerEmail') + ).property('authorName', 'authorEmail', 'committerName', 'committerEmail') + +`export default Commit` diff --git a/app/models/env-var.coffee b/app/models/env-var.coffee new file mode 100644 index 00000000..3d383347 --- /dev/null +++ b/app/models/env-var.coffee @@ -0,0 +1,11 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` + +EnvVar = Model.extend + name: DS.attr() + value: DS.attr() + public: DS.attr('boolean') + + repo: DS.belongsTo('repo', async: true) + +`export default EnvVar` diff --git a/app/models/hook.coffee b/app/models/hook.coffee new file mode 100644 index 00000000..8f83f3e2 --- /dev/null +++ b/app/models/hook.coffee @@ -0,0 +1,34 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` +`import config from 'travis/config/environment'` + +Hook = Model.extend + name: DS.attr() + ownerName: DS.attr() + description: DS.attr() + active: DS.attr('boolean') + admin: DS.attr('boolean') + private: DS.attr('boolean') + + account: (-> + @get('slug').split('/')[0] + ).property('slug') + + slug: (-> + "#{@get('ownerName')}/#{@get('name')}" + ).property('ownerName', 'name') + + urlGithub: (-> + "#{config.sourceEndpoint}/#{@get('slug')}" + ).property() + + urlGithubAdmin: (-> + "#{config.sourceEndpoint}/#{@get('slug')}/settings/hooks#travis_minibucket" + ).property() + + toggle: -> + return if @get('isSaving') + @set 'active', !@get('active') + @save() + +`export default Hook` diff --git a/assets/scripts/app/models/job.coffee b/app/models/job.coffee similarity index 54% rename from assets/scripts/app/models/job.coffee rename to app/models/job.coffee index eb847c1c..fadea741 100644 --- a/assets/scripts/app/models/job.coffee +++ b/app/models/job.coffee @@ -1,30 +1,36 @@ -require 'travis/model' +`import { durationFrom, configKeys, compact } from 'travis/utils/helpers'` +`import Ajax from 'travis/utils/ajax'` +`import configKeysMap from 'travis/utils/keys-map'` +`import Ember from 'ember'` +`import Model from 'travis/models/model'` +`import Log from 'travis/models/log'` +`import DurationCalculations from 'travis/utils/duration-calculations'` -@Travis.Job = Travis.Model.extend Travis.DurationCalculations, - repoId: Ember.attr('string', key: 'repository_id') - buildId: Ember.attr('string') - commitId: Ember.attr('string') - logId: Ember.attr('string') +Job = Model.extend DurationCalculations, + logId: DS.attr() - queue: Ember.attr('string') - state: Ember.attr('string') - number: Ember.attr('string') - _startedAt: Ember.attr('string', key: 'started_at') - _finishedAt: Ember.attr('string', key: 'finished_at') - allowFailure: Ember.attr('boolean') + queue: DS.attr() + state: DS.attr() + number: DS.attr() + _startedAt: DS.attr() + _finishedAt: DS.attr() + allowFailure: DS.attr('boolean') + tags: DS.attr() - repositorySlug: Ember.attr('string') - repo: Ember.belongsTo('Travis.Repo', key: 'repository_id') - build: Ember.belongsTo('Travis.Build') - commit: Ember.belongsTo('Travis.Commit') + repositoryPrivate: DS.attr() - annotations: Ember.hasMany('Travis.Annotation') + repositorySlug: DS.attr() + repo: DS.belongsTo('repo', async: true) + build: DS.belongsTo('build', async: true) + commit: DS.belongsTo('commit', async: true) - _config: Ember.attr('object', key: 'config') + annotations: DS.hasMany('annotation') + + _config: DS.attr('object') log: ( -> @set('isLogAccessed', true) - Travis.Log.create(job: this) + Log.create(job: this) ).property() startedAt: (-> @@ -43,8 +49,8 @@ require 'travis/model' config: (-> if config = @get('_config') - Travis.Helpers.compact(config) - else + compact(config) + else if @get('currentState.stateName') != 'root.loading' return if @get('isFetchingConfig') @set 'isFetchingConfig', true @@ -86,11 +92,11 @@ require 'travis/model' ).property('state') cancel: (-> - Travis.ajax.post "/jobs/#{@get('id')}/cancel" + Ajax.post "/jobs/#{@get('id')}/cancel" ) removeLog: -> - Travis.ajax.patch("/jobs/#{@get('id')}/log").then => + Ajax.patch("/jobs/#{@get('id')}/log").then => @reloadLog() reloadLog: -> @@ -98,7 +104,7 @@ require 'travis/model' @get('log').fetch() requeue: -> - Travis.ajax.post "/jobs/#{@get('id')}/restart" + Ajax.post "/jobs/#{@get('id')}/restart" appendLog: (part) -> @get('log').append part @@ -119,10 +125,6 @@ require 'travis/model' @unsubscribe() if @get('state') == 'finished' && Travis.pusher ).observes('state') - isFinished: (-> - @get('state') in ['passed', 'failed', 'errored', 'canceled'] - ).property('state') - # TODO: such formattings should be done in controller, but in order # to use it there easily, I would have to refactor job and build # controllers @@ -139,33 +141,4 @@ require 'travis/model' "#{@get('repo.slug')} ##{@get('number')}" ).property() -@Travis.Job.reopenClass - queued: -> - filtered = Ember.FilteredRecordArray.create( - modelClass: Travis.Job - filterFunction: (job) -> - ['created', 'queued'].indexOf(job.get('state')) != -1 - filterProperties: ['state', 'queue'] - ) - - @fetch().then (array) -> - filtered.updateFilter() - filtered.set('isLoaded', true) - - filtered - - running: -> - filtered = Ember.FilteredRecordArray.create( - modelClass: Travis.Job - filterFunction: (job) -> - ['started', 'received'].indexOf(job.get('state')) != -1 - filterProperties: ['state'] - ) - - @fetch(state: 'started').then (array) -> - filtered.updateFilter() - filtered.set('isLoaded', true) - - filtered - - +`export default Job` diff --git a/assets/scripts/app/models/log.coffee b/app/models/log.coffee similarity index 81% rename from assets/scripts/app/models/log.coffee rename to app/models/log.coffee index 08fb1973..b72551a0 100644 --- a/assets/scripts/app/models/log.coffee +++ b/app/models/log.coffee @@ -1,7 +1,42 @@ -require 'travis/model' -require 'travis/log_chunks' +`import Model from 'travis/models/model'` +`import Ajax from 'travis/utils/ajax'` +`import Job from 'travis/models/job'` +`import Ember from 'ember'` +`import config from 'travis/config/environment'` -@Travis.Log = Em.Object.extend +Request = Ember.Object.extend + HEADERS: + accept: 'application/json; chunked=true; version=2, text/plain; version=2' + + run: -> + Ajax.ajax "/jobs/#{@id}/log?cors_hax=true", 'GET', + dataType: 'text' + headers: @HEADERS + success: (body, status, xhr) => Ember.run(this, -> @handle(body, status, xhr)) + + handle: (body, status, xhr) -> + if config.pro + @log.set('token', xhr.getResponseHeader('X-Log-Access-Token')) + + if xhr.status == 204 + $.ajax(url: @redirectTo(xhr), type: 'GET', success: @handlers.text) + else if @isJson(xhr, body) + @handlers.json(body) + else + @handlers.text(body) + + redirectTo: (xhr) -> + # Firefox can't see the Location header on the xhr response due to the wrong + # status code 204. Should be some redirect code but that doesn't work with CORS. + xhr.getResponseHeader('Location') + + isJson: (xhr, body) -> + # Firefox can't see the Content-Type header on the xhr response due to the wrong + # status code 204. Should be some redirect code but that doesn't work with CORS. + type = xhr.getResponseHeader('Content-Type') || '' + type.indexOf('json') > -1 + +Log = Ember.Object.extend version: 0 # used to refresh log on requeue isLoaded: false length: 0 @@ -13,7 +48,7 @@ require 'travis/log_chunks' data['part_numbers'] = partNumbers if partNumbers data['after'] = after if after - Travis.ajax.ajax "/jobs/#{@get('job.id')}/log", 'GET', + Ajax.ajax "/jobs/#{@get('job.id')}/log", 'GET', dataType: 'json' headers: accept: 'application/json; chunked=true; version=2' @@ -25,7 +60,7 @@ require 'travis/log_chunks' @append part parts: (-> - #if Travis.config.pusher_log_fallback + #if config.pusher_log_fallback # Travis.LogChunks.create(content: [], missingPartsCallback: => @fetchMissingParts.apply(this, arguments)) #else Ember.ArrayProxy.create(content: []) @@ -44,7 +79,7 @@ require 'travis/log_chunks' @set('removed', true) @loadParts(json['log']['parts']) text: (text) => @loadText(text) - Travis.Log.Request.create(id: id, handlers: handlers).run() if id = @get('job.id') + Request.create(id: id, handlers: handlers, log: this).run() if id = @get('job.id') clear: -> @clearParts() @@ -64,34 +99,4 @@ require 'travis/log_chunks' @append(number: 1, content: text, final: true) @set('isLoaded', true) -Travis.Log.Request = Em.Object.extend - HEADERS: - accept: 'application/json; chunked=true; version=2, text/plain; version=2' - - run: -> - Travis.ajax.ajax "/jobs/#{@id}/log?cors_hax=true", 'GET', - dataType: 'text' - headers: @HEADERS - success: (body, status, xhr) => Ember.run(this, -> @handle(body, status, xhr)) - - handle: (body, status, xhr) -> - if Travis.config.pro - Travis.Job.find(@get('id')).get('log').set('token', xhr.getResponseHeader('X-Log-Access-Token')) - - if xhr.status == 204 - $.ajax(url: @redirectTo(xhr), type: 'GET', success: @handlers.text) - else if @isJson(xhr, body) - @handlers.json(body) - else - @handlers.text(body) - - redirectTo: (xhr) -> - # Firefox can't see the Location header on the xhr response due to the wrong - # status code 204. Should be some redirect code but that doesn't work with CORS. - xhr.getResponseHeader('Location') - - isJson: (xhr, body) -> - # Firefox can't see the Content-Type header on the xhr response due to the wrong - # status code 204. Should be some redirect code but that doesn't work with CORS. - type = xhr.getResponseHeader('Content-Type') || '' - type.indexOf('json') > -1 +`export default Log` diff --git a/app/models/model.coffee b/app/models/model.coffee new file mode 100644 index 00000000..4bf89a2b --- /dev/null +++ b/app/models/model.coffee @@ -0,0 +1,3 @@ +`import DS from 'ember-data';` + +`export default DS.Model.extend();` diff --git a/app/models/repo.coffee b/app/models/repo.coffee new file mode 100644 index 00000000..fdfe7ebf --- /dev/null +++ b/app/models/repo.coffee @@ -0,0 +1,192 @@ +`import ExpandableRecordArray from 'travis/utils/expandable-record-array'` +`import Model from 'travis/models/model'` +`import Ajax from 'travis/utils/ajax'` +# TODO: Investigate for some weird reason if I use durationFrom here not durationFromHelper, +# the function stops being visible inside computed properties. +`import { durationFrom as durationFromHelper } from 'travis/utils/helpers'` +`import Build from 'travis/models/build'` + +Repo = Model.extend + slug: DS.attr() + description: DS.attr() + private: DS.attr('boolean') + lastBuildNumber: DS.attr('number') + lastBuildState: DS.attr() + lastBuildStartedAt: DS.attr() + lastBuildFinishedAt: DS.attr() + githubLanguage: DS.attr() + _lastBuildDuration: DS.attr('number') + lastBuildLanguage: DS.attr() + active: DS.attr() + lastBuildId: DS.attr('number') + lastBuildHash: (-> + { + id: @get('lastBuildId') + number: @get('lastBuildNumber') + repo: this + } + ).property('lastBuildId', 'lastBuildNumber') + + lastBuild: (-> + if id = @get('lastBuildId') + @store.find('build', id) + @store.recordForId('build', id) + ).property('lastBuildId') + + withLastBuild: -> + @filter( (repo) -> repo.get('lastBuildId') ) + + sshKey: (-> + @store.find('ssh_key', @get('id')) + @store.recordForId('ssh_key', @get('id')) + ) + + envVars: (-> + id = @get('id') + @store.filter('env_var', { repository_id: id }, (v) -> + v.get('repo.id') == id + ) + ).property() + + builds: (-> + id = @get('id') + builds = @store.filter('build', event_type: 'push', repository_id: id, (b) -> + b.get('repo.id') == id && b.get('eventType') == 'push' + ) + + # TODO: move to controller + array = ExpandableRecordArray.create + type: 'build' + content: Ember.A([]) + + array.load(builds) + array.observe(builds) + + array + ).property() + + pullRequests: (-> + id = @get('id') + builds = @store.filter('build', event_type: 'pull_request', repository_id: id, (b) -> + b.get('repo.id') == id && b.get('eventType') == 'pull_request' + ) + + # TODO: move to controller + array = ExpandableRecordArray.create + type: 'build' + content: Ember.A([]) + + array.load(builds) + + id = @get('id') + array.observe(builds) + + array + ).property() + + branches: (-> + builds = @store.find 'build', repository_id: @get('id'), branches: true + + builds.then -> + builds.set 'isLoaded', true + + builds + ).property() + + owner: (-> + (@get('slug') || '').split('/')[0] + ).property('slug') + + name: (-> + (@get('slug') || '').split('/')[1] + ).property('slug') + + lastBuildDuration: (-> + duration = @get('_lastBuildDuration') + duration = durationFromHelper(@get('lastBuildStartedAt'), @get('lastBuildFinishedAt')) unless duration + duration + ).property('_lastBuildDuration', 'lastBuildStartedAt', 'lastBuildFinishedAt') + + sortOrder: (-> + # cuz sortAscending seems buggy when set to false + if lastBuildFinishedAt = @get('lastBuildFinishedAt') + - new Date(lastBuildFinishedAt).getTime() + else + - new Date('9999').getTime() - parseInt(@get('lastBuildId')) + ).property('lastBuildFinishedAt', 'lastBuildId') + + stats: (-> + if @get('slug') + @get('_stats') || $.get("https://api.github.com/repos/#{@get('slug')}", (data) => + @set('_stats', data) + @notifyPropertyChange 'stats' + ) && {} + ).property('slug') + + updateTimes: -> + @notifyPropertyChange 'lastBuildDuration' + + regenerateKey: (options) -> + Ajax.ajax '/repos/' + @get('id') + '/key', 'post', options + + fetchSettings: -> + Ajax.ajax('/repos/' + @get('id') + '/settings', 'get', forceAuth: true).then (data) -> + data['settings'] + + saveSettings: (settings) -> + Ajax.ajax('/repos/' + @get('id') + '/settings', 'patch', data: { settings: settings }) + +Repo.reopenClass + recent: -> + @find() + + accessibleBy: (store, login) -> + repos = store.find('repo', { member: login, orderBy: 'name' }) + + repos.then () -> + repos.set('isLoaded', true) + + repos + + search: (store, query) -> + promise = store.find('repo', search: query, orderBy: 'name') + result = Ember.ArrayProxy.create(content: []) + + promise.then -> + result.pushObjects(promise.get('content').toArray()) + result.set('isLoaded', true) + + result + + withLastBuild: (store) -> + repos = store.filter('repo', {}, (build) -> + build.get('lastBuildId') + ) + + repos.then () -> + repos.set('isLoaded', true) + + repos + + bySlug: (store, slug) -> + # first check if there is a repo with a given slug already ordered + repos = store.all('repo').filterBy('slug', slug) + if repos.get('length') > 0 + repos + else + store.find('repo', { slug: slug }) + + fetchBySlug: (store, slug) -> + repos = @bySlug(store, slug) + if repos.get('length') > 0 + repos.get('firstObject') + else + repos.then (repos) -> + error = new Error('repo not found') + error.slug = slug + Ember.get(repos, 'firstObject') || throw(error) + + # buildURL: (slug) -> + # if slug then slug else 'repos' + +`export default Repo` diff --git a/app/models/request.coffee b/app/models/request.coffee new file mode 100644 index 00000000..ba6b804f --- /dev/null +++ b/app/models/request.coffee @@ -0,0 +1,32 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` + +Request = Model.extend + created_at: DS.attr() + event_type: DS.attr() + result: DS.attr() + message: DS.attr() + headCommit: DS.attr() + baseCommit: DS.attr() + branchName: DS.attr() + tagName: DS.attr() + pullRequest: DS.attr('boolean') + pullRequestTitle: DS.attr() + pullRequestNumber: DS.attr('number') + + repo: DS.belongsTo('repo', async: true) + commit: DS.belongsTo('commit', async: true) + build: DS.belongsTo('build', async: true) + + isAccepted: (-> + # For some reason some of the requests have a null result beside the fact that + # the build was created. We need to look into it, but for now we can just assume + # that if build was created, the request was accepted + @get('result') == 'accepted' || @get('build.id') + ).property('result') + + isPullRequest: (-> + @get('event_type') == 'pull_request' + ).property('event_type') + +`export default Request` diff --git a/app/models/ssh-key.coffee b/app/models/ssh-key.coffee new file mode 100644 index 00000000..896712a3 --- /dev/null +++ b/app/models/ssh-key.coffee @@ -0,0 +1,9 @@ +`import Ember from 'ember'` +`import Model from 'travis/models/model'` + +SshKey = Model.extend + value: DS.attr() + description: DS.attr() + fingerprint: DS.attr() + +`export default SshKey` diff --git a/assets/scripts/app/models/user.coffee b/app/models/user.coffee similarity index 61% rename from assets/scripts/app/models/user.coffee rename to app/models/user.coffee index d6467085..86c3f537 100644 --- a/assets/scripts/app/models/user.coffee +++ b/app/models/user.coffee @@ -1,24 +1,21 @@ -require 'travis/ajax' -require 'travis/model' +`import Ember from 'ember'` +`import Model from 'travis/models/model'` +`import Ajax from 'travis/utils/ajax'` +`import config from 'travis/config/environment'` -@Travis.User = Travis.Model.extend - _name: Ember.attr('string', key: 'name') - email: Ember.attr('string') - login: Ember.attr('string') - token: Ember.attr('string') - gravatarId: Ember.attr('string') - isSyncing: Ember.attr('boolean') - syncedAt: Ember.attr('string') - repoCount: Ember.attr('number') +User = Model.extend + name: DS.attr() + email: DS.attr() + login: DS.attr() + token: DS.attr() + gravatarId: DS.attr() + isSyncing: DS.attr('boolean') + syncedAt: DS.attr() + repoCount: DS.attr('number') - # This is the only way I found to override the attribue created with Ember.attr - name: Ember.computed( (key, value) -> - if arguments.length == 1 - @get('_name') || @get('login') - else - @set('_name', value) - value - ).property('login', '_name') + fullName: (-> + @get('name') || @get('login') + ).property('name', 'login') isSyncingDidChange: (-> Ember.run.next this, -> @@ -26,11 +23,11 @@ require 'travis/model' ).observes('isSyncing') urlGithub: (-> - "#{Travis.config.source_endpoint}/#{@get('login')}" + "#{config.sourceEndpoint}/#{@get('login')}" ).property() _rawPermissions: (-> - Travis.ajax.get('/users/permissions') + Ajax.get('/users/permissions') ).property() permissions: (-> @@ -63,12 +60,12 @@ require 'travis/model' sync: -> self = this - Travis.ajax.post('/users/sync', {}, -> + Ajax.post('/users/sync', {}, -> self.setWithSession('isSyncing', true) ) poll: -> - Travis.ajax.get '/users', (data) => + Ajax.get '/users', (data) => if data.user.is_syncing self = this setTimeout -> @@ -79,11 +76,12 @@ require 'travis/model' @setWithSession('syncedAt', data.user.synced_at) Travis.trigger('user:synced', data.user) - # need to pass any param to trigger findQuery - Travis.Account.find(foo: '') + @store.findQuery('account', {}) setWithSession: (name, value) -> @set(name, value) user = JSON.parse(Travis.sessionStorage.getItem('travis.user')) - user[$.underscore(name)] = @get(name) + user[name.underscore()] = @get(name) Travis.sessionStorage.setItem('travis.user', JSON.stringify(user)) + +`export default User` diff --git a/app/router.coffee b/app/router.coffee new file mode 100644 index 00000000..e57388a1 --- /dev/null +++ b/app/router.coffee @@ -0,0 +1,58 @@ +`import Ember from 'ember'` +`import config from './config/environment'` +`import Location from 'travis/utils/location'` + +Router = Ember.Router.extend + # TODO: we should use TravisLocation here + location: if Ember.testing then 'none' else 'travis' + + handleURL: (url) -> + url = url.replace(/#.*?$/, '') + @_super(url) + + didTransition: -> + @_super.apply @, arguments + + if config.gaCode + _gaq.push ['_trackPageview', location.pathname] + +Router.map -> + @resource 'dashboard', -> + @route 'repositories', path: '/' + + @resource 'main', path: '/', -> + @resource 'getting_started' + @route 'recent' + @route 'repositories' + @route 'my_repositories' + @route 'search', path: '/search/:phrase' + @resource 'repo', path: '/:owner/:name', -> + @route 'index', path: '/' + @resource 'build', path: '/builds/:build_id' + @resource 'job', path: '/jobs/:job_id' + @resource 'builds', path: '/builds' + @resource 'pullRequests', path: '/pull_requests' + @resource 'branches', path: '/branches' + @resource 'requests', path: '/requests' + @resource 'caches', path: '/caches' if config.endpoints.caches + @resource 'request', path: '/requests/:request_id' + + @resource 'settings', -> + @route 'index', path: '/' + @resource 'env_vars', -> + @route 'new' + @resource 'ssh_key' if config.endpoints.sshKey + + @route 'first_sync' + @route 'insufficient_oauth_permissions' + @route 'auth', path: '/auth' + + @resource 'profile', path: '/profile', -> + @resource 'accounts', path: '/', -> + @resource 'account', path: '/:login' + @route 'info', path: '/info' + + @route 'maintenance', path: "/maintenance" + @route 'error404', path: "/*path" + +`export default Router` diff --git a/app/routes/.gitkeep b/app/routes/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/app/routes/abstract-builds.coffee b/app/routes/abstract-builds.coffee new file mode 100644 index 00000000..53e5bbd6 --- /dev/null +++ b/app/routes/abstract-builds.coffee @@ -0,0 +1,24 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + renderTemplate: -> + @render 'builds' + + setupController: -> + @controllerFor('repo').activate(@get('contentType')) + @contentDidChange() + @controllerFor('repo').addObserver(@get('path'), this, 'contentDidChange') + + deactivate: -> + @controllerFor('repo').removeObserver(@get('path'), this, 'contentDidChange') + + contentDidChange: -> + path = @get('path') + @controllerFor('builds').set('model', @controllerFor('repo').get(path)) + + path: (-> + type = @get('contentType') + "repo.#{type.camelize()}" + ).property('contentType') + +`export default Route` diff --git a/app/routes/account.coffee b/app/routes/account.coffee new file mode 100644 index 00000000..140f219e --- /dev/null +++ b/app/routes/account.coffee @@ -0,0 +1,18 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + setupController: (controller, account) -> + @_super.apply this, arguments + + @controllerFor('profile').activate 'hooks' + + model: (params) -> + @modelFor('accounts').find (account) -> account.get('login') == params.login + + serialize: (account) -> + if account && account.get + { login: account.get('login') } + else + {} + +`export default Route` diff --git a/app/routes/accounts.coffee b/app/routes/accounts.coffee new file mode 100644 index 00000000..cda2db79 --- /dev/null +++ b/app/routes/accounts.coffee @@ -0,0 +1,12 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + model: -> + @store.find('account', { all: true }) + + renderTemplate: -> + @_super.apply(this, arguments) + @render 'profile_accounts', outlet: 'left', into: 'profile' + + +`export default Route` diff --git a/app/routes/accounts/index.coffee b/app/routes/accounts/index.coffee new file mode 100644 index 00000000..7cb2c715 --- /dev/null +++ b/app/routes/accounts/index.coffee @@ -0,0 +1,12 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + redirect: -> + # TODO: setting accounts model in ProfileRoute is wrong, but + # at this stage it's better than what we had before + accounts = @modelFor('accounts') + login = @controllerFor('currentUser').get('login') + account = accounts.find (account) -> account.get('login') == login + @replaceWith 'account', account + +`export default Route` diff --git a/app/routes/accounts/info.coffee b/app/routes/accounts/info.coffee new file mode 100644 index 00000000..9d20ea46 --- /dev/null +++ b/app/routes/accounts/info.coffee @@ -0,0 +1,12 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + setupController: -> + user = @controllerFor('currentUser').get('model') + @controllerFor('account').set('model', user) + @controllerFor('profile').activate 'user' + + renderTemplate: -> + @render 'accounts_info' + +`export default Route` diff --git a/app/routes/application.coffee b/app/routes/application.coffee new file mode 100644 index 00000000..0ce223ba --- /dev/null +++ b/app/routes/application.coffee @@ -0,0 +1,46 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + needsAuth: false + + renderTemplate: -> + if @get('config').pro + $('body').addClass('pro') + + @_super.apply(this, arguments) + + activate: -> + @get('stylesheetsManager').disable('dashboard') + + actions: + redirectToGettingStarted: -> + # do nothing, we handle it only in index path + + renderDefaultTemplate: -> + @renderDefaultTemplate() if @renderDefaultTemplate + + error: (error) -> + if error == 'needs-auth' + authController = @container.lookup('controller:auth') + authController.set('redirected', true) + @transitionTo('auth') + else + return true + + renderFirstSync: -> + @transitionTo 'first_sync' + + afterSignIn: -> + if transition = @auth.get('afterSignInTransition') + @auth.set('afterSignInTransition', null) + transition.retry() + else + @transitionTo('main') + + afterSignOut: -> + if @get('config').pro + @transitionTo('auth') + else + @transitionTo('main') + +`export default Route` diff --git a/app/routes/auth.coffee b/app/routes/auth.coffee new file mode 100644 index 00000000..d50a84b7 --- /dev/null +++ b/app/routes/auth.coffee @@ -0,0 +1,23 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + needsAuth: false + + renderTemplate: -> + $('body').attr('id', 'auth') + + @render 'auth.signin' + + deactivate: -> + @controllerFor('auth').set('redirected', false) + + actions: + afterSignIn: -> + @transitionTo('main') + return true + + redirect: -> + if @signedIn() + @transitionTo('main') + +`export default Route` diff --git a/app/routes/basic.coffee b/app/routes/basic.coffee new file mode 100644 index 00000000..e6c5af54 --- /dev/null +++ b/app/routes/basic.coffee @@ -0,0 +1,22 @@ +`import config from 'travis/config/environment'` +`import Ember from 'ember'` + +Route = Ember.Route.extend + beforeModel: (transition) -> + @auth.autoSignIn() unless @signedIn() + + if !@signedIn() && @get('needsAuth') + @auth.set('afterSignInTransition', transition) + Ember.RSVP.reject("needs-auth") + else + @_super.apply(this, arguments) + + signedIn: -> + @controllerFor('currentUser').get('model') + + needsAuth: (-> + # on pro, we need to auth on every route + config.pro + ).property() + +`export default Route` diff --git a/app/routes/branches.coffee b/app/routes/branches.coffee new file mode 100644 index 00000000..c58239b4 --- /dev/null +++ b/app/routes/branches.coffee @@ -0,0 +1,5 @@ +`import AbstractBuildsRoute from 'travis/routes/abstract-builds'` + +Route = AbstractBuildsRoute.extend(contentType: 'branches') + +`export default Route` diff --git a/app/routes/build.coffee b/app/routes/build.coffee new file mode 100644 index 00000000..3c236a80 --- /dev/null +++ b/app/routes/build.coffee @@ -0,0 +1,25 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + serialize: (model, params) -> + id = if model.get then model.get('id') else model + + { build_id: id } + + setupController: (controller, model) -> + if model && !model.get + model = @store.recordForId('build', model) + @store.find('build', model) + + repo = @controllerFor('repo') + @controllerFor('build').set('build', model) + repo.activate('build') + + model: (params) -> + @store.find('build', params.build_id) + + deactivate: -> + @controllerFor('job').set('job', null) + @controllerFor('build').set('build', null) + +`export default Route` diff --git a/app/routes/builds.coffee b/app/routes/builds.coffee new file mode 100644 index 00000000..5bc035eb --- /dev/null +++ b/app/routes/builds.coffee @@ -0,0 +1,5 @@ +`import AbstractBuildsRoute from 'travis/routes/abstract-builds'` + +Route = AbstractBuildsRoute.extend(contentType: 'builds') + +`export default Route` diff --git a/app/routes/caches.coffee b/app/routes/caches.coffee new file mode 100644 index 00000000..6d7c0ded --- /dev/null +++ b/app/routes/caches.coffee @@ -0,0 +1,31 @@ +`import Ember from 'ember'` +`import TravisRoute from 'travis/routes/basic'` +`import Ajax from 'travis/utils/ajax'` + +Route = TravisRoute.extend + needsAuth: true + setupController: -> + @_super.apply this, arguments + @controllerFor('repo').activate('caches') + + model: -> + repo = @modelFor('repo') + Ajax.get("/repos/#{repo.get('id')}/caches").then( (data) -> + groups = {} + data["caches"].forEach (cacheData) -> + branch = cacheData["branch"] + group = groups[branch] + unless group + group = groups[branch] = Ember.Object.create(branch: branch, caches: []) + cache = Ember.Object.create(cacheData) + cache.set('parent', group) + group.get('caches').pushObject(cache) + + result = [] + for branch, caches of groups + result.push caches + + result + ) + +`export default Route` diff --git a/app/routes/dashboard.coffee b/app/routes/dashboard.coffee new file mode 100644 index 00000000..8ca483cf --- /dev/null +++ b/app/routes/dashboard.coffee @@ -0,0 +1,13 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + needsAuth: true + # activate: -> + # @get('stylesheetsManager').disable('main') + # @get('stylesheetsManager').enable('dashboard') + + # deactivate: -> + # @get('stylesheetsManager').enable('main') + # @get('stylesheetsManager').disable('dashboard') + +`export default Route` diff --git a/app/routes/dashboard/repositories.coffee b/app/routes/dashboard/repositories.coffee new file mode 100644 index 00000000..e679cf18 --- /dev/null +++ b/app/routes/dashboard/repositories.coffee @@ -0,0 +1,21 @@ +`import Ember from 'ember'` +`import TravisRoute from 'travis/routes/basic'` +`import config from 'travis/config/environment'` + +Route = TravisRoute.extend + queryParams: + filter: { replace: true } + model: -> + apiEndpoint = config.apiEndpoint + $.ajax(apiEndpoint + '/v3/repos?repository.active=true', { + headers: { + Authorization: 'token ' + @auth.token() + } + }).then (response) -> + response.repositories.sortBy('last_build.finished_at').filter( (repo) -> + repo.last_build + ).map( (repo) -> + Ember.Object.create(repo) + ) + +`export default Route` diff --git a/app/routes/env-vars.coffee b/app/routes/env-vars.coffee new file mode 100644 index 00000000..10d0acc6 --- /dev/null +++ b/app/routes/env-vars.coffee @@ -0,0 +1,8 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + model: (params) -> + repo = @modelFor('repo') + repo.get('envVars.promise') + +`export default Route` diff --git a/app/routes/first-sync.coffee b/app/routes/first-sync.coffee new file mode 100644 index 00000000..bb3699f3 --- /dev/null +++ b/app/routes/first-sync.coffee @@ -0,0 +1,33 @@ +`import SimpleLayoutRoute from 'travis/routes/simple-layout'` + +Route = SimpleLayoutRoute.extend + activate: -> + controller = @controllerFor('firstSync') + controller.addObserver('isSyncing', this, @isSyncingDidChange) + + deactivate: -> + controller = @controllerFor('firstSync') + controller.removeObserver('controller.isSyncing', this, @isSyncingDidChange) + + isSyncingDidChange: -> + controller = @controllerFor('firstSync') + + if !controller.get('isSyncing') + self = this + Ember.run.later this, -> + @store.find('repo', member: @get('controller.user.login')).then( (repos) -> + if repos.get('length') + self.transitionTo('main') + else + self.transitionTo('profile') + ).then(null, (e) -> + console.log('There was a problem while redirecting from first sync', e) + ) + , @get('config').syncingPageRedirectionTime + + actions: + redirectToGettingStarted: -> + # do nothing, we are showing first sync, so it's normal that there is + # no owned repos + +`export default Route` diff --git a/app/routes/getting-started.coffee b/app/routes/getting-started.coffee new file mode 100644 index 00000000..52b7cc75 --- /dev/null +++ b/app/routes/getting-started.coffee @@ -0,0 +1,5 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend() + +`export default Route` diff --git a/app/routes/insufficient-oauth-permissions.coffee b/app/routes/insufficient-oauth-permissions.coffee new file mode 100644 index 00000000..760fa8cd --- /dev/null +++ b/app/routes/insufficient-oauth-permissions.coffee @@ -0,0 +1,9 @@ +`import SimpleLayoutRoute from 'travis/routes/simple-layout'` + +Route = SimpleLayoutRoute.extend + setupController: (controller) -> + @_super.apply this, arguments + existingUser = document.location.hash.match(/#existing[_-]user/) + controller.set('existingUser', existingUser) + +`export default Route` diff --git a/app/routes/job.coffee b/app/routes/job.coffee new file mode 100644 index 00000000..2d425772 --- /dev/null +++ b/app/routes/job.coffee @@ -0,0 +1,29 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + serialize: (model, params) -> + id = if model.get then model.get('id') else model + + { job_id: id } + + setupController: (controller, model) -> + if model && !model.get + model = @store.recordForId('job', model) + @store.find('job', model) + + repo = @controllerFor('repo') + @controllerFor('job').set('job', model) + repo.activate('job') + + if build = model.get('build') + build = @store.recordForId('build', build.get('id')) + @controllerFor('build').set('build', build) + + model: (params) -> + @store.find('job', params.job_id) + + deactivate: -> + @controllerFor('build').set('build', null) + @controllerFor('job').set('job', null) + +`export default Route` diff --git a/app/routes/main-tab.coffee b/app/routes/main-tab.coffee new file mode 100644 index 00000000..d35a328a --- /dev/null +++ b/app/routes/main-tab.coffee @@ -0,0 +1,28 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + renderTemplate: -> + @render 'repo' + @render 'build', into: 'repo' + + setupController: -> + @_super.apply this, arguments + + @controllerFor('repo').activate('index') + @controllerFor('repos').activate(@get('reposTabName')) + + @currentRepoDidChange() + @controllerFor('repos').addObserver('firstObject', this, 'currentRepoDidChange') + + deactivate: -> + @controllerFor('repos').removeObserver('firstObject', this, 'currentRepoDidChange') + + currentRepoDidChange: -> + if repo = @controllerFor('repos').get('firstObject') + @controllerFor('repo').set('repo', repo) + + actions: + redirectToGettingStarted: -> + @transitionTo('getting_started') + +`export default Route` diff --git a/app/routes/main.coffee b/app/routes/main.coffee new file mode 100644 index 00000000..3b9c8e60 --- /dev/null +++ b/app/routes/main.coffee @@ -0,0 +1,25 @@ +#require 'pusher' +#channels = Travis.Pusher.CHANNELS + +`import TravisRoute from 'travis/routes/basic'` +`import config from 'travis/config/environment'` + +Route = TravisRoute.extend + renderTemplate: -> + $('body').attr('id', 'home') + + @_super.apply this, arguments + + @render 'repos', outlet: 'left', into: 'main' + + setupController: (controller)-> + # TODO: this is redundant with repositories and recent routes + toActivate = if @signedIn() then 'owned' else 'recent' + @container.lookup('controller:repos').activate(toActivate) + + activate: -> + # subscribe to pusher only if we're at a main route + unless config.pro + @get('pusher').subscribeAll(['common']) + +`export default Route` diff --git a/app/routes/main/index.coffee b/app/routes/main/index.coffee new file mode 100644 index 00000000..4ebea1c0 --- /dev/null +++ b/app/routes/main/index.coffee @@ -0,0 +1,8 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + redirect: -> + target = if @signedIn() then 'repositories' else 'recent' + @transitionTo("main.#{target}") + +`export default Route` diff --git a/app/routes/main/my-repositories.coffee b/app/routes/main/my-repositories.coffee new file mode 100644 index 00000000..51bb3987 --- /dev/null +++ b/app/routes/main/my-repositories.coffee @@ -0,0 +1,7 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + redirect: -> + @transitionTo("main.repositories") + +`export default Route` diff --git a/app/routes/main/recent.coffee b/app/routes/main/recent.coffee new file mode 100644 index 00000000..8f1739ce --- /dev/null +++ b/app/routes/main/recent.coffee @@ -0,0 +1,13 @@ +`import TravisRoute from 'travis/routes/basic'` +`import MainTabRoute from 'travis/routes/main-tab'` + +Route = MainTabRoute.extend + reposTabName: 'recent' + + activate: -> + @store.set('isRecentTabOpen', true) + + deactivate: -> + @store.set('isRecentTabOpen', false) + +`export default Route` diff --git a/app/routes/main/repositories.coffee b/app/routes/main/repositories.coffee new file mode 100644 index 00000000..ed35b505 --- /dev/null +++ b/app/routes/main/repositories.coffee @@ -0,0 +1,9 @@ +`import MainTabRoute from 'travis/routes/main-tab'` + +Route = MainTabRoute.extend + needsAuth: true + reposTabName: 'owned' + afterModel: -> + @controllerFor('repos').possiblyRedirectToGettingStartedPage() + +`export default Route` diff --git a/app/routes/main/search.coffee b/app/routes/main/search.coffee new file mode 100644 index 00000000..b2623693 --- /dev/null +++ b/app/routes/main/search.coffee @@ -0,0 +1,24 @@ +`import MainTabRoute from 'travis/routes/main-tab'` + +Route = MainTabRoute.extend + renderTemplate: -> + @render 'repo' + @render 'build', into: 'repo' + + setupController: (controller, searchPhrase) -> + # TODO: this method is almost the same as _super, refactor this + @controllerFor('repo').activate('index') + @controllerFor('repos').activate('search', searchPhrase) + + @currentRepoDidChange() + @controllerFor('repos').addObserver('firstObject', this, 'currentRepoDidChange') + + model: (params) -> + params.phrase + + deactivate: -> + @_super.apply(this, arguments) + + @controllerFor('repos').set('search', undefined) + +`export default Route` diff --git a/app/routes/not-found.coffee b/app/routes/not-found.coffee new file mode 100644 index 00000000..4ebc5df8 --- /dev/null +++ b/app/routes/not-found.coffee @@ -0,0 +1,9 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + renderTemplate: -> + $('body').attr('id', 'not-found') + + @render 'not_found' + +`export default Route` diff --git a/app/routes/profile.coffee b/app/routes/profile.coffee new file mode 100644 index 00000000..3381f3bb --- /dev/null +++ b/app/routes/profile.coffee @@ -0,0 +1,14 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + needsAuth: true + + setupController: (controller, model) -> + @controllerFor('accounts').set('model', model) + + renderTemplate: -> + $('body').attr('id', 'profile') + @_super.apply(this, arguments) + @render 'loading', outlet: 'left', into: 'profile' + +`export default Route` diff --git a/app/routes/pull-requests.coffee b/app/routes/pull-requests.coffee new file mode 100644 index 00000000..121aa633 --- /dev/null +++ b/app/routes/pull-requests.coffee @@ -0,0 +1,16 @@ +`import AbstractBuildsRoute from 'travis/routes/abstract-builds'` + +Route = AbstractBuildsRoute.extend( + contentType: 'pull_requests' + + # TODO: it would be better to have separate controller for branches and PRs list + setupController: (controller, model) -> + @_super(controller, model) + + this.controllerFor('builds').set('isPullRequestsList', true) + + deactivate: -> + this.controllerFor('builds').set('isPullRequestsList', false) +) + +`export default Route` diff --git a/app/routes/repo.coffee b/app/routes/repo.coffee new file mode 100644 index 00000000..550b5f23 --- /dev/null +++ b/app/routes/repo.coffee @@ -0,0 +1,37 @@ +`import TravisRoute from 'travis/routes/basic'` +`import Repo from 'travis/models/repo'` + +Route = TravisRoute.extend + renderTemplate: -> + @render 'repo', into: 'main' + + setupController: (controller, model) -> + # TODO: if repo is just a data hash with id and slug load it + # as incomplete record + model = @store.find('repo', model.id) if model && !model.get + controller.set('repo', model) + + serialize: (repo) -> + slug = if repo.get then repo.get('slug') else repo.slug + [owner, name] = slug.split('/') + { owner: owner, name: name } + + model: (params) -> + slug = "#{params.owner}/#{params.name}" + Repo.fetchBySlug(@store, slug) + + resetController: -> + @controllerFor('repo').deactivate() + + actions: + error: (error) -> + # if error throwed has a slug (ie. it was probably repo not found) + # set the slug on main.error controller to allow to properly + # display the repo information + if error.slug + this.controllerFor('main.error').set('slug', error.slug) + + # bubble to the top + return true + +`export default Route` diff --git a/app/routes/repo/index.coffee b/app/routes/repo/index.coffee new file mode 100644 index 00000000..348425cf --- /dev/null +++ b/app/routes/repo/index.coffee @@ -0,0 +1,19 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + setupController: (controller, model) -> + @_super.apply this, arguments + @controllerFor('repo').activate('current') + + renderTemplate: -> + if @modelFor('repo').get('lastBuildId') + @render 'build' + else + @render 'builds/not_found' + + deactivate: -> + repo = @controllerFor('repo') + @controllerFor('build').set('build', null) + @controllerFor('job').set('job', null) + +`export default Route` diff --git a/app/routes/request.coffee b/app/routes/request.coffee new file mode 100644 index 00000000..3017c198 --- /dev/null +++ b/app/routes/request.coffee @@ -0,0 +1,11 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + setupController: -> + @_super.apply this, arguments + @controllerFor('repo').activate('request') + + model: (params) -> + @store.find 'request', params.request_id + +`export default Route` diff --git a/app/routes/requests.coffee b/app/routes/requests.coffee new file mode 100644 index 00000000..511f9161 --- /dev/null +++ b/app/routes/requests.coffee @@ -0,0 +1,12 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + setupController: -> + @_super.apply this, arguments + + @controllerFor('repo').activate('requests') + + model: -> + @store.find 'request', repository_id: @modelFor('repo').get('id') + +`export default Route` diff --git a/app/routes/settings.coffee b/app/routes/settings.coffee new file mode 100644 index 00000000..aeaae42c --- /dev/null +++ b/app/routes/settings.coffee @@ -0,0 +1,8 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + needsAuth: true + setupController: (controller, model) -> + @controllerFor('repo').activate('settings') + +`export default Route` diff --git a/app/routes/settings/index.coffee b/app/routes/settings/index.coffee new file mode 100644 index 00000000..34a8802c --- /dev/null +++ b/app/routes/settings/index.coffee @@ -0,0 +1,9 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + model: -> + repo = @modelFor('repo') + repo.fetchSettings().then (settings) -> + repo.set('settings', settings) + +`export default Route` diff --git a/app/routes/simple-layout.coffee b/app/routes/simple-layout.coffee new file mode 100644 index 00000000..95540a86 --- /dev/null +++ b/app/routes/simple-layout.coffee @@ -0,0 +1,13 @@ +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + setupController: -> + $('body').attr('id', 'simple') + toActivate = if @signedIn() then 'owned' else 'recent' + @container.lookup('controller:repos').activate(toActivate) + @_super.apply(this, arguments) + + renderTemplate: -> + @_super.apply(this, arguments) + +`export default Route` diff --git a/app/routes/ssh-key.coffee b/app/routes/ssh-key.coffee new file mode 100644 index 00000000..8274d512 --- /dev/null +++ b/app/routes/ssh-key.coffee @@ -0,0 +1,34 @@ +`import Ember from 'ember'` +`import Ajax from 'travis/utils/ajax'` +`import TravisRoute from 'travis/routes/basic'` + +Route = TravisRoute.extend + model: (params) -> + repo = @modelFor('repo') + self = this + @store.find('sshKey', repo.get('id')).then ( (result) -> result unless result.get('isNew') ), (xhr) -> + if xhr.status == 404 + # if there is no model, just return null. I'm not sure if this is the + # best answer, maybe we should just redirect to different route, like + # ssh_key.new or ssh_key.no_key + return null + + afterModel: (model, transition) -> + repo = @modelFor('repo') + Ajax.get "/repositories/#{repo.get('id')}/key", (data) => + @defaultKey = Ember.Object.create(fingerprint: data.fingerprint) + + setupController: (controller, model) -> + controller.reset() + @_super.apply this, arguments + + if @defaultKey + controller.set('defaultKey', @defaultKey) + @defaultKey = null + + deactivate: -> + @_super.apply(this, arguments) + + @controllerFor('ssh_key').send('cancel') + +`export default Route` diff --git a/app/serializers/account.coffee b/app/serializers/account.coffee new file mode 100644 index 00000000..e219627d --- /dev/null +++ b/app/serializers/account.coffee @@ -0,0 +1,7 @@ +`import Ember from 'ember'` +`import ApplicationSerializer from 'travis/serializers/application'` + +Serializer = ApplicationSerializer.extend + primaryKey: 'login' + +`export default Serializer` diff --git a/app/serializers/application.coffee b/app/serializers/application.coffee new file mode 100644 index 00000000..b1916d37 --- /dev/null +++ b/app/serializers/application.coffee @@ -0,0 +1,7 @@ +`import DS from 'ember-data'` + +Serializer = DS.ActiveModelSerializer.extend + defaultSerializer: 'application' + serializer: 'application' + +`export default Serializer` diff --git a/app/serializers/build.coffee b/app/serializers/build.coffee new file mode 100644 index 00000000..c663c045 --- /dev/null +++ b/app/serializers/build.coffee @@ -0,0 +1,19 @@ +`import Ember from 'ember'` +`import ApplicationSerializer from 'travis/serializers/application'` + +Serializer = ApplicationSerializer.extend + attrs: { + repo: { key: 'repository_id' } + _config: { key: 'config' } + _finishedAt: { key: 'finished_at' } + _startedAt: { key: 'started_at' } + _duration: { key: 'duration' } + } + + extractSingle: (store, primaryType, rawPayload, recordId) -> + if commit = rawPayload.commit + rawPayload.commits = [commit] + + @_super(store, primaryType, rawPayload, recordId) + +`export default Serializer` diff --git a/app/serializers/env-var.coffee b/app/serializers/env-var.coffee new file mode 100644 index 00000000..859d7156 --- /dev/null +++ b/app/serializers/env-var.coffee @@ -0,0 +1,9 @@ +`import Ember from 'ember'` +`import ApplicationSerializer from 'travis/serializers/application'` + +Serializer = ApplicationSerializer.extend + attrs: { + repo: { key: 'repository_id' } + } + +`export default Serializer` diff --git a/app/serializers/job.coffee b/app/serializers/job.coffee new file mode 100644 index 00000000..cb30d176 --- /dev/null +++ b/app/serializers/job.coffee @@ -0,0 +1,18 @@ +`import Ember from 'ember'` +`import ApplicationSerializer from 'travis/serializers/application'` + +Serializer = ApplicationSerializer.extend + attrs: { + repo: { key: 'repository_id' } + _config: { key: 'config' } + _finishedAt: { key: 'finished_at' } + _startedAt: { key: 'started_at' } + } + + extractSingle: (store, primaryType, rawPayload, recordId) -> + if commit = rawPayload.commit + rawPayload.commits = [commit] + + @_super(store, primaryType, rawPayload, recordId) + +`export default Serializer` diff --git a/app/serializers/repo.coffee b/app/serializers/repo.coffee new file mode 100644 index 00000000..ebdb0287 --- /dev/null +++ b/app/serializers/repo.coffee @@ -0,0 +1,9 @@ +`import Ember from 'ember'` +`import ApplicationSerializer from 'travis/serializers/application'` + +Serializer = ApplicationSerializer.extend + attrs: { + _lastBuildDuration: { key: 'last_build_duration' } + } + +`export default Serializer` diff --git a/app/serializers/request.coffee b/app/serializers/request.coffee new file mode 100644 index 00000000..0f019e16 --- /dev/null +++ b/app/serializers/request.coffee @@ -0,0 +1,11 @@ +`import Ember from 'ember'` +`import ApplicationSerializer from 'travis/serializers/application'` + +Serializer = ApplicationSerializer.extend + attrs: { + branchName: { key: 'branch' } + tagName: { key: 'tag' } + repo: { key: 'repository_id' } + } + +`export default Serializer` diff --git a/app/store.coffee b/app/store.coffee new file mode 100644 index 00000000..a3eba84f --- /dev/null +++ b/app/store.coffee @@ -0,0 +1,72 @@ +`import DS from 'ember-data'` +`import config from 'travis/config/environment'` + +Store = DS.Store.extend + defaultAdapter: 'application' + adapter: 'application' + + receivePusherEvent: (event, data) -> + [name, type] = event.split(':') + + auth = @container.lookup('auth:main') + if !@get('isRecentTabOpen') && event != 'job:log' && auth.get('signedIn') && + !config.pro && !config.enterprise + # if recent repos hasn't been opened yet, we can safely + # drop any events that doesn't belong to repos owned by + # the logged in user and that aren't related to any + # repositories that are already opened + + permissions = auth.get('permissions') + if name == 'job' + id = data.job.repository_id + else if name == 'build' + id = data.repository.id + + return if !@hasRecordForId('repo', id) && !permissions.contains(id) + + if name == 'job' && data.job?.commit + @pushPayload(commits: [data.job.commit]) + + if name == 'build' && data.build?.commit + # TODO: commit should be a sideload record on build, not mixed with it + build = data.build + commit = { + id: build.commit_id + author_email: build.author_email + author_name: build.author_name + branch: build.branch + committed_at: build.committed_at + committer_email: build.committer_email + committer_name: build.committer_name + compare_url: build.compare_url + message: build.message + sha: build.commit + } + delete(data.build.commit) + + @pushPayload(commits: [commit]) + + if event == 'job:log' + data = data.job + job = @recordForId('job', data.id) + job.appendLog(number: parseInt(data.number), content: data._log, final: data.final) + else if data[name] + @_loadOne(name, data) + else + throw "can't load data for #{name}" unless type + + _loadOne: (type, json) -> + payload = {} + payload[type.pluralize()] = [json[type]] + @pushPayload(payload) + + # we get other types of records only in a few situations and + # it's not always needed to update data, so I'm specyfing which + # things I want to update here: + if type == 'build' && (json.repository || json.repo) + data = json.repository || json.repo + @pushPayload(repos: [data]) + + + +`export default Store` diff --git a/app/styles/app.scss b/app/styles/app.scss new file mode 100644 index 00000000..0fe06a53 --- /dev/null +++ b/app/styles/app.scss @@ -0,0 +1,53 @@ +@import "app/_mixins/colors"; +@import "app/_mixins/fonts"; +@import "app/_mixins/vars"; +@import "app/foundation/scss/foundation/_settings"; +@import "app/foundation/scss/foundation/components/_grid"; + +@import "app/_mixins/mixins"; + +@import "app/ansi"; +@import "app/auth"; +@import "app/button"; +@import "app/caches"; +@import "app/charm"; +@import "app/components/loader"; +@import "app/components/tiles"; +@import "app/components/travis-switch"; +@import "app/flash"; +@import "app/forms"; +@import "app/getting_started"; +@import "app/github"; + +@import "app/left/list"; +@import "app/left"; +@import "app/loading"; +@import "app/main/annotations"; +@import "app/main/list"; +@import "app/main/log"; +@import "app/main/repository"; +@import "app/main/sponsors"; +@import "app/main/summary"; +@import "app/main/tools"; +@import "app/main"; +@import "app/maximize"; +@import "app/misc"; +@import "app/popup"; +@import "app/pro"; +@import "app/profile/hooks"; +@import "app/profile"; +@import "app/requests"; +@import "app/right/lists"; +@import "app/right/sponsors"; +@import "app/right"; +@import "app/settings"; +@import "app/stats"; +@import "app/status"; +@import "app/tabs"; +@import "app/tipsy"; + +@import "app/layout"; +@import "app/layouts/dashboard"; +@import "app/layouts/error"; +@import "app/layouts/footer"; +@import "app/top"; \ No newline at end of file diff --git a/assets/styles/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass similarity index 100% rename from assets/styles/_mixins/colors.sass rename to app/styles/app/_mixins/colors.sass diff --git a/assets/styles/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass similarity index 100% rename from assets/styles/_mixins/fonts.sass rename to app/styles/app/_mixins/fonts.sass diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass new file mode 100644 index 00000000..f84b3b0e --- /dev/null +++ b/app/styles/app/_mixins/mixins.sass @@ -0,0 +1,27 @@ + +@mixin popup + display: none + position: fixed + z-index: 100 + background-color: #fff + border: 10px solid rgba(114, 131, 139, 0.6) + background-clip: padding-box + border-radius 4px + + +@mixin clearfix + &:before, + &:after + content: "" + display: table + &:after + clear: both + +@mixin resetul + margin: 0 + padding: 0 + list-style: none + +@mixin border-bottom-radius($radius) + border-bottom-left-radius: $radius + border-bottom-right-radius: $radius \ No newline at end of file diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass new file mode 100644 index 00000000..77d019eb --- /dev/null +++ b/app/styles/app/_mixins/vars.sass @@ -0,0 +1,51 @@ + +$blue-grey: #404650 +$blue-grey-light: #d8e2e6 +$light-gray: #e9e9e7 + +$logo-red: #dc4136 + +$topbar-bg: $blue-grey +$topbar-bg-darker: #31363d + +$main-repo-link-color: #50555b +$main-repo-hover-color: #607a84 + +$travis-lint-color: #9b9d9e +$travis-lint-bg: #fafafa + +$left-bg: $light-gray +$right-bg: $light-gray + +// dashboard +$pass-color: #3ba85d +$fail-color: #d04729 +$error-color: #999999 +$start-color: #848032 +$start-bg-color: #D2CA24 + +$dashboard-text-color: #9d9fa1 + +//wrapper +$wrapper-bg-color: #f4f3ea + +// footer +$footer-color: $blue-grey +$footer-bg-color: #e0e0e0 +$footer-h3-color: #8f9ba2 +$footer-h3-corder-color: #ccd0d5 + +// error pages +// 404 +$error-hill-grey: #bbcac6 +$error-heading-color: #357389 +$error-copy-color: $dashboard-text-color +$error-bg-gradient: rgba(204,235,247,1) +// maintenance +$maintenance-grass: #8cad7d + + +// tabs +$tab-nav-inactive-bg: #f8f8f8 +$tab-nav-inactive-bg-hover: $white +$tab-active-bg: $blue-grey-light \ No newline at end of file diff --git a/assets/styles/ansi.sass b/app/styles/app/ansi.sass similarity index 98% rename from assets/styles/ansi.sass rename to app/styles/app/ansi.sass index 01a92bad..6d027648 100644 --- a/assets/styles/ansi.sass +++ b/app/styles/app/ansi.sass @@ -1,5 +1,3 @@ -@import "_mixins/all" - // ansi styles, see javascripts/lib/deansi.js .ansi .bold diff --git a/assets/styles/app.sass b/app/styles/app/app.sass similarity index 69% rename from assets/styles/app.sass rename to app/styles/app/app.sass index a44c2c77..794b3ea4 100644 --- a/assets/styles/app.sass +++ b/app/styles/app/app.sass @@ -1,13 +1,6 @@ -@import "_mixins/all" html, body - font-family: 'Source Sans Pro', Helvetica, sans-serif - font-size: $font-size-small - line-height: $line-height - margin: 0 - padding: 0 height: 100% - color: $color-text a color: $color-link diff --git a/assets/styles/auth.sass b/app/styles/app/auth.sass similarity index 90% rename from assets/styles/auth.sass rename to app/styles/app/auth.sass index 6d611a9d..c12cb26b 100644 --- a/assets/styles/auth.sass +++ b/app/styles/app/auth.sass @@ -1,17 +1,13 @@ -@import "_mixins/all" #auth #main margin: 0 auto padding: 100px 50px 0 50px height: 100px - - -webkit-flex: none - flex: none - width: 300px + width: 400px min-width: auto max-height: 400px - @include border-radius(8px) + border-radius: 8px h2 color: #919191 @@ -24,6 +20,7 @@ color: #337389 text-align: center margin: 0 + line-height: 1 p text-align: center @@ -56,7 +53,7 @@ width: 850px margin: 0 auto padding-top: 30px - font-family: 'Source Sans Pro', Helvetica, sans-serif + // font-family: 'Source Sans Pro', Helvetica, sans-serif font-size: 17px line-height: 26px text-align: center diff --git a/assets/styles/app/button.sass b/app/styles/app/button.sass similarity index 97% rename from assets/styles/app/button.sass rename to app/styles/app/button.sass index 8350a14e..20416969 100644 --- a/assets/styles/app/button.sass +++ b/app/styles/app/button.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" .button position: relative diff --git a/assets/styles/caches.sass b/app/styles/app/caches.sass similarity index 100% rename from assets/styles/caches.sass rename to app/styles/app/caches.sass diff --git a/app/styles/app/charm.sass b/app/styles/app/charm.sass new file mode 100644 index 00000000..3f8ccdde --- /dev/null +++ b/app/styles/app/charm.sass @@ -0,0 +1,7 @@ + +.feedback-button + display: none + +.pro + .feedback-button + display: inline-block diff --git a/app/styles/app/components/loader.sass b/app/styles/app/components/loader.sass new file mode 100644 index 00000000..951987ae --- /dev/null +++ b/app/styles/app/components/loader.sass @@ -0,0 +1,77 @@ + + +#loader-container-large + margin-top: 2em + height : 70px + text-align : center + +#loader-container-large .load-text + font-size : 25px + line-height : 30px + font-weight : 300 + margin-top : 20px + font-weight: 400 + +.loader-large + width : 60px + height : 60px + position : relative + margin : 0 auto + +#loader-container-medium + height : 40px + margin-top : 15px + text-align : center + +#loader-container-medium .load-text + vertical-align : 10px + display : inline-block + +.loader-medium + width : 30px + height : 30px + position : relative + display : inline-block + margin : 0 auto + margin-right : 10px + +#loader-container-small + height : 20px + margin-top : 22px + text-align : center + +#loader-container-small .load-text + vertical-align : 3px + display : inline-block + +.loader-small + width : 15px + height : 15px + position : relative + display : inline-block + margin : 0 auto + margin-right : 5px + +.load-circle1, .load-circle2 + width : 100% + height : 100% + border-radius : 50% + opacity : 0.7 + position : absolute + top : 0 + left : 0 + animation : bounce 1.5s infinite ease-in-out + +.load-circle1 + background-color : #347389 + +.load-circle2 + background-color : #bdc5c5 + animation-delay : -0.5s + +@keyframes bounce + 0%, 100% + transform : scale(0.0) + 60% + transform: scale(1.0) + diff --git a/app/styles/app/components/tiles.sass b/app/styles/app/components/tiles.sass new file mode 100644 index 00000000..7d499f1f --- /dev/null +++ b/app/styles/app/components/tiles.sass @@ -0,0 +1,139 @@ +/* + * tile component as seen on dashboard + */ + +.tiles + background : #f4f3ea + padding : 30px 0 10px 0 + .columns + .columns:last-child + float: left + +.tile + position: relative + margin-bottom : 20px + padding : 0 10px 0 0 + min-height : 125px + background : $white + color : $dashboard-text-color + font-size : 14px + border-radius : 4px + overflow: hidden + + &:after + content: "" + display: block + position: absolute + top: 0 + right: 0 + bottom: 0 + width: 3em + background: linear-gradient(90deg, rgba($white, .2), $white 50%, $white) + + .duration, .finished + margin-top : 8px + background-repeat: no-repeat + background-position: 0 1px + background-size : 11px 11px + text-indent : 15px + + .duration + background-image: url('/images/dashboard/time.svg') + line-height : 13px + + .finished + background-image: url('/images/dashboard/cal.svg') + line-height : 14px + + .build-status + margin: 5px 0 0 + + .build-information + padding: 8px 0 6px 45px + + .org + margin : 0 + + .repo + font-size : 20px + display : inline-block + margin : 0 + max-width : 250px + white-space : nowrap + line-height : 20px + text-overflow : ellipsis + + .star-feature + position : absolute + top : 0 + right : 0 + background : url('/images/dashboard/star-on.svg') no-repeat 7px 10px + background-size : 20px 20px + + .build-bar + position: absolute + background: + repeat: no-repeat + position: 7px 10px + size: 20px 20px + min-height : 100% + width : 33px + border-radius : 4px 0 0 4px + +.repo a:hover, +.build-status a:hover, +.repo a:active, +.build-status a:active + text-decoration: underline +.repo a:focus, +.build-status a:focus + outline: 1px dotted + +.passed + .build-bar + background: + color: $pass-color + image: url('/images/dashboard/status-passed.svg') + .org, + .repo a, + .build-status a + color: $pass-color + +.failed + .build-bar + background: + color: $fail-color + image: url('/images/dashboard/status-failed.svg') + .org, + .repo a, + .build-status a + color: $fail-color + +.started + .build-bar + background: + color: $start-bg-color + image: url('/images/dashboard/status-pending.svg') + .org, + .repo a, + .build-status a + color: $start-color + + +.errored + .build-bar + background: + color: $error-color + image: url('/images/dashboard/status-errored.svg') + .org, + .repo a, + .build-status a + color: $error-color + +.if_private + display : inline-block + background : url('/images/dashboard/private-icon.svg') no-repeat 0 0 + background-size : contain + height : 12px + width : 9px + margin-left : 5px + text-indent : -9999px diff --git a/assets/styles/components/travis-switch.sass b/app/styles/app/components/travis-switch.sass similarity index 86% rename from assets/styles/components/travis-switch.sass rename to app/styles/app/components/travis-switch.sass index c93ddc64..c78f814f 100644 --- a/assets/styles/components/travis-switch.sass +++ b/app/styles/app/components/travis-switch.sass @@ -1,6 +1,11 @@ .settings-row margin-top: 20px +.settings-row, +.short-settings-element + & > * + box-sizing: content-box + a.travis-switch margin: 0 10px 0 0 @@ -8,6 +13,7 @@ p.settings-row line-height: 30px .travis-switch + box-sizing: content-box position: relative display: inline-block float: left @@ -26,8 +32,8 @@ p.settings-row &:before content: "" position: absolute - top: 1px - left: 1px + top: 2px + left: 2px width: 3.5em height: 1.9em background: #e9e9e7 @@ -42,7 +48,7 @@ p.settings-row text-align: left &:before left: auto - right: 1px + right: 2px border: 1px solid #9cafb5 span.on diff --git a/assets/styles/app/flash.sass b/app/styles/app/flash.sass similarity index 96% rename from assets/styles/app/flash.sass rename to app/styles/app/flash.sass index 677502e0..5f8bb172 100644 --- a/assets/styles/app/flash.sass +++ b/app/styles/app/flash.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" .flash color: #fff diff --git a/assets/styles/forms.scss b/app/styles/app/forms.scss similarity index 91% rename from assets/styles/forms.scss rename to app/styles/app/forms.scss index 5b25d75f..8d48d411 100644 --- a/assets/styles/forms.scss +++ b/app/styles/app/forms.scss @@ -1,5 +1,3 @@ -@import "compass"; - .pro { form.subscription-form { display: inline-block; @@ -106,7 +104,7 @@ input, textarea { border: 1px solid #ddd; font-size: 13px; - @include border-radius(1px); + border-radius: 1px } input { margin-top: 4px; @@ -183,14 +181,14 @@ color: white; text-shadow: 2px 2px 0 #666; cursor: hand; - @include border-radius(6px); + border-radius: 6px; background-color: #19A509; - @include background-image(linear-gradient(#3f9c33 0%, #348629 100%)); + background-image: linear-gradient(#3f9c33, #348629); &:hover { - @include background-image(linear-gradient(#1CBE0A 0%, #158F07 100%)); + background-image: linear-gradient(#1CBE0A, #158F07); } &[disabled] { - @include background-image(linear-gradient(#ddd 0%, #ccc 100%)); + background-image: linear-gradient(#ddd, #ccc); color: #f6f6f6; text-shadow: 2px 2px 0 #aaa; } diff --git a/app/styles/app/foundation/scss/foundation.scss b/app/styles/app/foundation/scss/foundation.scss new file mode 100644 index 00000000..7399cef9 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation.scss @@ -0,0 +1,46 @@ +@charset "UTF-8"; +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +// Make sure the charset is set appropriately + + +// Behold, here are all the Foundation components. + @import "foundation/components/grid"; + // @import "foundation/components/accordion"; + // @import "foundation/components/alert-boxes"; + // @import "foundation/components/block-grid"; + // @import "foundation/components/breadcrumbs"; + // @import "foundation/components/button-groups"; + // @import "foundation/components/buttons"; + // @import "foundation/components/clearing"; + // @import "foundation/components/dropdown"; + // @import "foundation/components/dropdown-buttons"; + // @import "foundation/components/flex-video"; + // @import "foundation/components/forms"; + // @import "foundation/components/icon-bar"; + // @import "foundation/components/inline-lists"; + // @import "foundation/components/joyride"; + // @import "foundation/components/keystrokes"; + // @import "foundation/components/labels"; + // @import "foundation/components/magellan"; + // @import "foundation/components/orbit"; + // @import "foundation/components/pagination"; + // @import "foundation/components/panels"; + // @import "foundation/components/pricing-tables"; + // @import "foundation/components/progress-bars"; + // @import "foundation/components/range-slider"; + // @import "foundation/components/reveal"; + // @import "foundation/components/side-nav"; + // @import "foundation/components/split-buttons"; + // @import "foundation/components/sub-nav"; + // @import "foundation/components/switches"; + // @import "foundation/components/tables"; + // @import "foundation/components/tabs"; + // @import "foundation/components/thumbs"; + // @import "foundation/components/tooltips"; + // @import "foundation/components/top-bar"; + // @import "foundation/components/type"; + // @import "foundation/components/offcanvas"; + // @import "foundation/components/visibility"; diff --git a/app/styles/app/foundation/scss/foundation/_functions.scss b/app/styles/app/foundation/scss/foundation/_functions.scss new file mode 100644 index 00000000..10bcb794 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/_functions.scss @@ -0,0 +1,146 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +// This is the default html and body font-size for the base rem value. +$rem-base: 16px !default; + +// IMPORT ONCE +// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. +$modules: () !default; +@mixin exports($name) { + // Import from global scope + $modules: $modules !global; + // Check if a module is already on the list + $module_index: index($modules, $name); + @if (($module_index == null) or ($module_index == false)) { + $modules: append($modules, $name) !global; + @content; + } +} + +// +// @functions +// + + +// RANGES +// We use these functions to define ranges for various things, like media queries. +@function lower-bound($range){ + @if length($range) <= 0 { + @return 0; + } + @return nth($range,1); +} + +@function upper-bound($range) { + @if length($range) < 2 { + @return 999999999999; + } + @return nth($range, 2); +} + +// STRIP UNIT +// It strips the unit of measure and returns it +@function strip-unit($num) { + @return $num / ($num * 0 + 1); +} + +// TEXT INPUT TYPES + +@function text-inputs( $types: all, $selector: input ) { + + $return: (); + + $all-text-input-types: + text + password + date + datetime + datetime-local + month + week + email + number + search + tel + time + url + color + textarea; + + @if $types == all { $types: $all-text-input-types; } + + @each $type in $types { + @if $type == textarea { + @if $selector == input { + $return: append($return, unquote('#{$type}'), comma) + } @else { + $return: append($return, unquote('#{$type}#{$selector}'), comma) + } + } @else { + $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma) + } + } + + @return $return; + +} + +// CONVERT TO REM +@function convert-to-rem($value, $base-value: $rem-base) { + $value: strip-unit($value) / strip-unit($base-value) * 1rem; + @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0 + @return $value; +} + +@function data($attr) { + @if $namespace { + @return '[data-' + $namespace + '-' + $attr + ']'; + } + + @return '[data-' + $attr + ']'; +} + +// REM CALC + +// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's. +// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported: +// +// rem-calc(10 20 30px 40); +// +// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets +// +// rem-calc((10, 20, 30, 40px)); +// +// Optionally call with a different base (eg: 8px) to calculate rem. +// +// rem-calc(16px 32px 48px, 8px); +// +// If you require to comma separate your list +// +// rem-calc((16px, 32px, 48), 8px); + +@function rem-calc($values, $base-value: $rem-base) { + $max: length($values); + + @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); } + + $remValues: (); + @for $i from 1 through $max { + $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value)); + } + @return $remValues; +} + +// OLD EM CALC +// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() +@function emCalc($values){ + @return rem-calc($values); +} + +// OLD EM CALC +// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() +@function em-calc($values){ + @return rem-calc($values); +} diff --git a/app/styles/app/foundation/scss/foundation/_settings.scss b/app/styles/app/foundation/scss/foundation/_settings.scss new file mode 100644 index 00000000..164dc26a --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/_settings.scss @@ -0,0 +1,1445 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +// + +// Table of Contents +// Foundation Settings +// +// a. Base +// b. Grid +// c. Global +// d. Media Query Ranges +// e. Typography +// 01. Accordion +// 02. Alert Boxes +// 03. Block Grid +// 04. Breadcrumbs +// 05. Buttons +// 06. Button Groups +// 07. Clearing +// 08. Dropdown +// 09. Dropdown Buttons +// 10. Flex Video +// 11. Forms +// 12. Icon Bar +// 13. Inline Lists +// 14. Joyride +// 15. Keystrokes +// 16. Labels +// 17. Magellan +// 18. Off-canvas +// 19. Orbit +// 20. Pagination +// 21. Panels +// 22. Pricing Tables +// 23. Progress Bar +// 24. Range Slider +// 25. Reveal +// 26. Side Nav +// 27. Split Buttons +// 28. Sub Nav +// 29. Switch +// 30. Tables +// 31. Tabs +// 32. Thumbnails +// 33. Tooltips +// 34. Top Bar +// 36. Visibility Classes + +// a. Base +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// This is the default html and body font-size for the base rem value. +// $rem-base: 16px; + +// Allows the use of rem-calc() or lower-bound() in your settings +@import "_functions"; + +// The default font-size is set to 100% of the browser style sheet (usually 16px) +// for compatibility with browser-based text zoom or user-set defaults. + +// Since the typical default browser font-size is 16px, that makes the calculation for grid size. +// If you want your base font-size to be different and not have it affect the grid breakpoints, +// set $rem-base to $base-font-size and make sure $base-font-size is a px value. +$base-font-size: $font-size-small; + +// The $base-font-size is 100% while $base-line-height is 150% +$base-line-height: $line-height; + +// We use this to control whether or not CSS classes come through in the gem files. +$include-html-classes: true; +// $include-print-styles: true; +$include-html-global-classes: $include-html-classes; + +// b. Grid +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-grid-classes: $include-html-classes; +// $include-xl-html-grid-classes: false; + +$row-width: 100%; +// $total-columns: 12; +// $column-gutter: rem-calc(30); + +// c. Global +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// We use these to define default font stacks +$font-family-sans-serif: 'Source Sans Pro', Helvetica, sans-serif; +$font-family-serif: 'Source Sans Pro', Helvetica, sans-serif; +$font-family-monospace: 'Source Sans Pro', Helvetica, sans-serif; + +// We use these to define default font weights +$font-weight-normal: normal !default; +// $font-weight-bold: bold !default; + +// $white : #FFFFFF; +// $ghost : #FAFAFA; +// $snow : #F9F9F9; +// $vapor : #F6F6F6; +// $white-smoke : #F5F5F5; +// $silver : #EFEFEF; +// $smoke : #EEEEEE; +// $gainsboro : #DDDDDD; +// $iron : #CCCCCC; +// $base : #AAAAAA; +// $aluminum : #999999; +// $jumbo : #888888; +// $monsoon : #777777; +// $steel : #666666; +// $charcoal : #555555; +// $tuatara : #444444; +// $oil : #333333; +// $jet : #222222; +// $black : #000000; + +// We use these as default colors throughout +// $primary-color: #008CBA; +// $secondary-color: #e7e7e7; +// $alert-color: #f04124; +// $success-color: #43AC6A; +// $warning-color: #f08a24; +// $info-color: #a0d3e8; + +// We use these to control various global styles +// $body-bg: $white; +$body-font-color: $color-text; +// $body-font-family: $font-family-sans-serif; +// $body-font-weight: $font-weight-normal; +// $body-font-style: normal; + +// We use this to control font-smoothing +// $font-smoothing: antialiased; + +// We use these to control text direction settings +// $text-direction: ltr; +// $opposite-direction: right; +// $default-float: left; +// $last-child-float: $opposite-direction; + +// We use these to make sure border radius matches unless we want it different. +// $global-radius: 3px; +// $global-rounded: 1000px; + +// We use these to control inset shadow shiny edges and depressions. +// $shiny-edge-size: 0 1px 0; +// $shiny-edge-color: rgba($white, .5); +// $shiny-edge-active-color: rgba($black, .2); + +// d. Media Query Ranges +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$small-range: (0em, 40em); +$medium-range: (40.063em, 64em); +$large-range: (64.063em, 90em); +$xlarge-range: (90.063em, 120em); +$xxlarge-range: (120.063em, 99999999em); + +$screen: "only screen"; + +$landscape: "#{$screen} and (orientation: landscape)"; +$portrait: "#{$screen} and (orientation: portrait)"; + +$small-up: $screen; +$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; + +$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; +$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; + +$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; +$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; + +$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; +$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; + +$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; +$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; + +// Legacy +$small: $medium-up; +$medium: $medium-up; +$large: $large-up; + +// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet +// $cursor-crosshair-value: crosshair; +// $cursor-default-value: default; +// $cursor-pointer-value: pointer; +// $cursor-help-value: help; +// $cursor-text-value: text; + +// e. Typography +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-type-classes: $include-html-classes; + +// We use these to control header font styles +// $header-font-family: $body-font-family; +// $header-font-weight: $font-weight-normal; +// $header-font-style: normal; +// $header-font-color: $jet; +// $header-line-height: 1.4; +// $header-top-margin: .2rem; +// $header-bottom-margin: .5rem; +// $header-text-rendering: optimizeLegibility; + +// We use these to control header font sizes +// $h1-font-size: rem-calc(44); +// $h2-font-size: rem-calc(37); +// $h3-font-size: rem-calc(27); +// $h4-font-size: rem-calc(23); +// $h5-font-size: rem-calc(18); +// $h6-font-size: 1rem; + +// We use these to control header size reduction on small screens +// $h1-font-reduction: rem-calc(10) !default; +// $h2-font-reduction: rem-calc(10) !default; +// $h3-font-reduction: rem-calc(5) !default; +// $h4-font-reduction: rem-calc(5) !default; +// $h5-font-reduction: 0 !default; +// $h6-font-reduction: 0 !default; + +// These control how subheaders are styled. +// $subheader-line-height: 1.4; +// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); +// $subheader-font-weight: $font-weight-normal; +// $subheader-top-margin: .2rem; +// $subheader-bottom-margin: .5rem; + +// A general styling +// $small-font-size: 60%; +// $small-font-color: scale-color($header-font-color, $lightness: 35%); + +// We use these to style paragraphs +// $paragraph-font-family: inherit; +// $paragraph-font-weight: $font-weight-normal; +// $paragraph-font-size: 1rem; +// $paragraph-line-height: 1.6; +// $paragraph-margin-bottom: rem-calc(20); +// $paragraph-aside-font-size: rem-calc(14); +// $paragraph-aside-line-height: 1.35; +// $paragraph-aside-font-style: italic; +// $paragraph-text-rendering: optimizeLegibility; + +// We use these to style tags +// $code-color: $oil; +// $code-font-family: $font-family-monospace; +// $code-font-weight: $font-weight-normal; +// $code-background-color: scale-color($secondary-color, $lightness: 70%); +// $code-border-size: 1px; +// $code-border-style: solid; +// $code-border-color: scale-color($code-background-color, $lightness: -10%); +// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); + +// We use these to style anchors +// $anchor-text-decoration: none; +// $anchor-text-decoration-hover: none; +// $anchor-font-color: $primary-color; +// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%); + +// We use these to style the
element +// $hr-border-width: 1px; +// $hr-border-style: solid; +// $hr-border-color: $gainsboro; +// $hr-margin: rem-calc(20); + +// We use these to style lists +// $list-font-family: $paragraph-font-family; +// $list-font-size: $paragraph-font-size; +// $list-line-height: $paragraph-line-height; +// $list-margin-bottom: $paragraph-margin-bottom; +// $list-style-position: outside; +// $list-side-margin: 1.1rem; +// $list-ordered-side-margin: 1.4rem; +// $list-side-margin-no-bullet: 0; +// $list-nested-margin: rem-calc(20); +// $definition-list-header-weight: $font-weight-bold; +// $definition-list-header-margin-bottom: .3rem; +// $definition-list-margin-bottom: rem-calc(12); + +// We use these to style blockquotes +// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); +// $blockquote-padding: rem-calc(9 20 0 19); +// $blockquote-border: 1px solid $gainsboro; +// $blockquote-cite-font-size: rem-calc(13); +// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); +// $blockquote-cite-link-color: $blockquote-cite-font-color; + +// Acronym styles +// $acronym-underline: 1px dotted $gainsboro; + +// We use these to control padding and margin +// $microformat-padding: rem-calc(10 12); +// $microformat-margin: rem-calc(0 0 20 0); + +// We use these to control the border styles +// $microformat-border-width: 1px; +// $microformat-border-style: solid; +// $microformat-border-color: $gainsboro; + +// We use these to control full name font styles +// $microformat-fullname-font-weight: $font-weight-bold; +// $microformat-fullname-font-size: rem-calc(15); + +// We use this to control the summary font styles +// $microformat-summary-font-weight: $font-weight-bold; + +// We use this to control abbr padding +// $microformat-abbr-padding: rem-calc(0 1); + +// We use this to control abbr font styles +// $microformat-abbr-font-weight: $font-weight-bold; +// $microformat-abbr-font-decoration: none; + +// 01. Accordion +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-accordion-classes: $include-html-classes; + +// $accordion-navigation-padding: rem-calc(16); +// $accordion-navigation-bg-color: $silver; +// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); +// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); +// $accordion-navigation-font-color: $jet; +// $accordion-navigation-font-size: rem-calc(16); +// $accordion-navigation-font-family: $body-font-family; + +// $accordion-content-padding: ($column-gutter/2); +// $accordion-content-active-bg-color: $white; + +// 02. Alert Boxes +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-alert-classes: $include-html-classes; + +// We use this to control alert padding. +// $alert-padding-top: rem-calc(14); +// $alert-padding-default-float: $alert-padding-top; +// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); +// $alert-padding-bottom: $alert-padding-top; + +// We use these to control text style. +// $alert-font-weight: $font-weight-normal; +// $alert-font-size: rem-calc(13); +// $alert-font-color: $white; +// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); + +// We use this for close hover effect. +// $alert-function-factor: -14%; + +// We use these to control border styles. +// $alert-border-style: solid; +// $alert-border-width: 1px; +// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); +// $alert-bottom-margin: rem-calc(20); + +// We use these to style the close buttons +// $alert-close-color: $oil; +// $alert-close-top: 50%; +// $alert-close-position: rem-calc(4); +// $alert-close-font-size: rem-calc(22); +// $alert-close-opacity: 0.3; +// $alert-close-opacity-hover: 0.5; +// $alert-close-padding: 9px 6px 4px; + +// We use this to control border radius +// $alert-radius: $global-radius; + +// We use this to control transition effects +// $alert-transition-speed: 300ms; +// $alert-transition-ease: ease-out; + +// 03. Block Grid +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-block-grid-classes: $include-html-classes; +// $include-xl-html-block-grid-classes: false; + +// We use this to control the maximum number of block grid elements per row +// $block-grid-elements: 12; +// $block-grid-default-spacing: rem-calc(20); +// $align-block-grid-to-grid: false; + +// Enables media queries for block-grid classes. Set to false if writing semantic HTML. +// $block-grid-media-queries: true; + +// 04. Breadcrumbs +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-nav-classes: $include-html-classes; + +// We use this to set the background color for the breadcrumb container. +// $crumb-bg: scale-color($secondary-color, $lightness: 55%); + +// We use these to set the padding around the breadcrumbs. +// $crumb-padding: rem-calc(9 14 9); +// $crumb-side-padding: rem-calc(12); + +// We use these to control border styles. +// $crumb-function-factor: -10%; +// $crumb-border-size: 1px; +// $crumb-border-style: solid; +// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); +// $crumb-radius: $global-radius; + +// We use these to set various text styles for breadcrumbs. +// $crumb-font-size: rem-calc(11); +// $crumb-font-color: $primary-color; +// $crumb-font-color-current: $oil; +// $crumb-font-color-unavailable: $aluminum; +// $crumb-font-transform: uppercase; +// $crumb-link-decor: underline; + +// We use these to control the slash between breadcrumbs +// $crumb-slash-color: $base; +// $crumb-slash: "/"; + +// 05. Buttons +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-button-classes: $include-html-classes; + +// We use these to build padding for buttons. +// $button-tny: rem-calc(10); +// $button-sml: rem-calc(14); +// $button-med: rem-calc(16); +// $button-lrg: rem-calc(18); + +// We use this to control the display property. +// $button-display: inline-block; +// $button-margin-bottom: rem-calc(20); + +// We use these to control button text styles. +// $button-font-family: $body-font-family; +// $button-font-color: $white; +// $button-font-color-alt: $oil; +// $button-font-tny: rem-calc(11); +// $button-font-sml: rem-calc(13); +// $button-font-med: rem-calc(16); +// $button-font-lrg: rem-calc(20); +// $button-font-weight: $font-weight-normal; +// $button-font-align: center; + +// We use these to control various hover effects. +// $button-function-factor: -20%; + +// We use these to control button border and hover styles. +// $button-border-width: 0px; +// $button-border-style: solid; +// $button-bg-color: $primary-color; +// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor); +// $button-border-color: $button-bg-hover; +// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor); +// $secondary-button-border-color: $secondary-button-bg-hover; +// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor); +// $success-button-border-color: $success-button-bg-hover; +// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor); +// $alert-button-border-color: $alert-button-bg-hover; + +// We use this to set the default radius used throughout the core. +// $button-radius: $global-radius; +// $button-round: $global-rounded; + +// We use this to set default opacity and cursor for disabled buttons. +// $button-disabled-opacity: 0.7; +// $button-disabled-cursor: $cursor-default-value; + +// 06. Button Groups +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-button-classes: $include-html-classes; + +// Sets the margin for the right side by default, and the left margin if right-to-left direction is used +// $button-bar-margin-opposite: rem-calc(10); +// $button-group-border-width: 1px; + +// 07. Clearing +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-clearing-classes: $include-html-classes; + +// We use these to set the background colors for parts of Clearing. +// $clearing-bg: $oil; +// $clearing-caption-bg: $clearing-bg; +// $clearing-carousel-bg: rgba(51,51,51,0.8); +// $clearing-img-bg: $clearing-bg; + +// We use these to style the close button +// $clearing-close-color: $iron; +// $clearing-close-size: 30px; + +// We use these to style the arrows +// $clearing-arrow-size: 12px; +// $clearing-arrow-color: $clearing-close-color; + +// We use these to style captions +// $clearing-caption-font-color: $iron; +// $clearing-caption-font-size: 0.875em; +// $clearing-caption-padding: 10px 30px 20px; + +// We use these to make the image and carousel height and style +// $clearing-active-img-height: 85%; +// $clearing-carousel-height: 120px; +// $clearing-carousel-thumb-width: 120px; +// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); + +// 08. Dropdown +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-dropdown-classes: $include-html-classes; + +// We use these to controls height and width styles. +// $f-dropdown-max-width: 200px; +// $f-dropdown-height: auto; +// $f-dropdown-max-height: none; + +// Used for bottom position +// $f-dropdown-margin-top: 2px; + +// Used for right position +// $f-dropdown-margin-left: $f-dropdown-margin-top; + +// Used for left position +// $f-dropdown-margin-right: $f-dropdown-margin-top; + +// Used for top position +// $f-dropdown-margin-bottom: $f-dropdown-margin-top; + +// We use this to control the background color +// $f-dropdown-bg: $white; + +// We use this to set the border styles for dropdowns. +// $f-dropdown-border-style: solid; +// $f-dropdown-border-width: 1px; +// $f-dropdown-border-color: scale-color($white, $lightness: -20%); + +// We use these to style the triangle pip. +// $f-dropdown-triangle-size: 6px; +// $f-dropdown-triangle-color: $white; +// $f-dropdown-triangle-side-offset: 10px; + +// We use these to control styles for the list elements. +// $f-dropdown-list-style: none; +// $f-dropdown-font-color: $charcoal; +// $f-dropdown-font-size: rem-calc(14); +// $f-dropdown-list-padding: rem-calc(5, 10); +// $f-dropdown-line-height: rem-calc(18); +// $f-dropdown-list-hover-bg: $smoke; +// $dropdown-mobile-default-float: 0; + +// We use this to control the styles for when the dropdown has custom content. +// $f-dropdown-content-padding: rem-calc(20); + +// Default radius for dropdown. +// $f-dropdown-radius: $global-radius; + + +// 09. Dropdown Buttons +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-button-classes: $include-html-classes; + +// We use these to set the color of the pip in dropdown buttons +// $dropdown-button-pip-color: $white; +// $dropdown-button-pip-color-alt: $oil; + +// $button-pip-tny: rem-calc(6); +// $button-pip-sml: rem-calc(7); +// $button-pip-med: rem-calc(9); +// $button-pip-lrg: rem-calc(11); + +// We use these to style tiny dropdown buttons +// $dropdown-button-padding-tny: $button-pip-tny * 7; +// $dropdown-button-pip-size-tny: $button-pip-tny; +// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; +// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1); + +// We use these to style small dropdown buttons +// $dropdown-button-padding-sml: $button-pip-sml * 7; +// $dropdown-button-pip-size-sml: $button-pip-sml; +// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; +// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1); + +// We use these to style medium dropdown buttons +// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); +// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); +// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; +// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2); + +// We use these to style large dropdown buttons +// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); +// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); +// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; +// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3); + +// 10. Flex Video +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-media-classes: $include-html-classes; + +// We use these to control video container padding and margins +// $flex-video-padding-top: rem-calc(25); +// $flex-video-padding-bottom: 67.5%; +// $flex-video-margin-bottom: rem-calc(16); + +// We use this to control widescreen bottom padding +// $flex-video-widescreen-padding-bottom: 56.34%; + +// 11. Forms +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-form-classes: $include-html-classes; + +// We use this to set the base for lots of form spacing and positioning styles +// $form-spacing: rem-calc(16); + +// We use these to style the labels in different ways +// $form-label-pointer: pointer; +// $form-label-font-size: rem-calc(14); +// $form-label-font-weight: $font-weight-normal; +// $form-label-line-height: 1.5; +// $form-label-font-color: scale-color($black, $lightness: 30%); +// $form-label-small-transform: capitalize; +// $form-label-bottom-margin: 0; +// $input-font-family: inherit; +// $input-font-color: rgba(0,0,0,0.75); +// $input-font-size: rem-calc(14); +// $input-bg-color: $white; +// $input-focus-bg-color: scale-color($white, $lightness: -2%); +// $input-border-color: scale-color($white, $lightness: -20%); +// $input-focus-border-color: scale-color($white, $lightness: -40%); +// $input-border-style: solid; +// $input-border-width: 1px; +// $input-border-radius: $global-radius; +// $input-disabled-bg: $gainsboro; +// $input-disabled-cursor: $cursor-default-value; +// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + +// We use these to style the fieldset border and spacing. +// $fieldset-border-style: solid; +// $fieldset-border-width: 1px; +// $fieldset-border-color: $gainsboro; +// $fieldset-padding: rem-calc(20); +// $fieldset-margin: rem-calc(18 0); + +// We use these to style the legends when you use them +// $legend-bg: $white; +// $legend-font-weight: $font-weight-bold; +// $legend-padding: rem-calc(0 3); + +// We use these to style the prefix and postfix input elements +// $input-prefix-bg: scale-color($white, $lightness: -5%); +// $input-prefix-border-color: scale-color($white, $lightness: -20%); +// $input-prefix-border-size: 1px; +// $input-prefix-border-type: solid; +// $input-prefix-overflow: hidden; +// $input-prefix-font-color: $oil; +// $input-prefix-font-color-alt: $white; + +// We use this setting to turn on/off HTML5 number spinners (the up/down arrows) +// $input-number-spinners: true; + +// We use these to style the error states for inputs and labels +// $input-error-message-padding: rem-calc(6 9 9); +// $input-error-message-top: -1px; +// $input-error-message-font-size: rem-calc(12); +// $input-error-message-font-weight: $font-weight-normal; +// $input-error-message-font-style: italic; +// $input-error-message-font-color: $white; +// $input-error-message-bg-color: $alert-color; +// $input-error-message-font-color-alt: $oil; + +// We use this to style the glowing effect of inputs when focused +// $input-include-glowing-effect: true; +// $glowing-effect-fade-time: 0.45s; +// $glowing-effect-color: $input-focus-border-color; + +// Select variables +// $select-bg-color: $ghost; +// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%); + +// 12. Icon Bar +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// We use these to style the icon-bar and items +// $include-html-icon-bar-classes: $include-html-classes; +// $icon-bar-bg: $oil; +// $icon-bar-font-color: $white; +// $icon-bar-font-color-hover: $icon-bar-font-color; +// $icon-bar-font-size: 1rem; +// $icon-bar-hover-color: $primary-color; +// $icon-bar-icon-color: $white; +// $icon-bar-icon-color-hover: $icon-bar-icon-color; +// $icon-bar-icon-size: 1.875rem; +// $icon-bar-image-width: 1.875rem; +// $icon-bar-image-height: 1.875rem; +// $icon-bar-active-color: $primary-color; +// $icon-bar-item-padding: 1.25rem; + +// 13. Inline Lists +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-inline-list-classes: $include-html-classes; + +// We use this to control the margins and padding of the inline list. +// $inline-list-top-margin: 0; +// $inline-list-opposite-margin: 0; +// $inline-list-bottom-margin: rem-calc(17); +// $inline-list-default-float-margin: rem-calc(-22); +// $inline-list-default-float-list-margin: rem-calc(22); + +// $inline-list-padding: 0; + +// We use this to control the overflow of the inline list. +// $inline-list-overflow: hidden; + +// We use this to control the list items +// $inline-list-display: block; + +// We use this to control any elements within list items +// $inline-list-children-display: block; + +// 14. Joyride +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-joyride-classes: $include-html-classes; + +// Controlling default Joyride styles +// $joyride-tip-bg: $oil; +// $joyride-tip-default-width: 300px; +// $joyride-tip-padding: rem-calc(18 20 24); +// $joyride-tip-border: solid 1px $charcoal; +// $joyride-tip-radius: 4px; +// $joyride-tip-position-offset: 22px; + +// Here, we're setting the tip font styles +// $joyride-tip-font-color: $white; +// $joyride-tip-font-size: rem-calc(14); +// $joyride-tip-header-weight: $font-weight-bold; + +// This changes the nub size +// $joyride-tip-nub-size: 10px; + +// This adjusts the styles for the timer when its enabled +// $joyride-tip-timer-width: 50px; +// $joyride-tip-timer-height: 3px; +// $joyride-tip-timer-color: $steel; + +// This changes up the styles for the close button +// $joyride-tip-close-color: $monsoon; +// $joyride-tip-close-size: 24px; +// $joyride-tip-close-weight: $font-weight-normal; + +// When Joyride is filling the screen, we use this style for the bg +// $joyride-screenfill: rgba(0,0,0,0.5); + +// 15. Keystrokes +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-keystroke-classes: $include-html-classes; + +// We use these to control text styles. +// $keystroke-font: "Consolas", "Menlo", "Courier", monospace; +// $keystroke-font-size: inherit; +// $keystroke-font-color: $jet; +// $keystroke-font-color-alt: $white; +// $keystroke-function-factor: -7%; + +// We use this to control keystroke padding. +// $keystroke-padding: rem-calc(2 4 0); + +// We use these to control background and border styles. +// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor); +// $keystroke-border-style: solid; +// $keystroke-border-width: 1px; +// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); +// $keystroke-radius: $global-radius; + +// 16. Labels +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-label-classes: $include-html-classes; + +// We use these to style the labels +// $label-padding: rem-calc(4 8 4); +// $label-radius: $global-radius; + +// We use these to style the label text +// $label-font-sizing: rem-calc(11); +// $label-font-weight: $font-weight-normal; +// $label-font-color: $oil; +// $label-font-color-alt: $white; +// $label-font-family: $body-font-family; + +// 17. Magellan +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-magellan-classes: $include-html-classes; + +// $magellan-bg: $white; +// $magellan-padding: 0 !important; + +// 18. Off-canvas +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-off-canvas-classes: $include-html-classes; + +// $tabbar-bg: $oil; +// $tabbar-height: rem-calc(45); +// $tabbar-icon-width: $tabbar-height; +// $tabbar-line-height: $tabbar-height; +// $tabbar-color: $white; +// $tabbar-middle-padding: 0 rem-calc(10); + +// Off Canvas Divider Styles +// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%); +// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); + +// Off Canvas Tab Bar Headers +// $tabbar-header-color: $white; +// $tabbar-header-weight: $font-weight-bold; +// $tabbar-header-line-height: $tabbar-height; +// $tabbar-header-margin: 0; + +// Off Canvas Menu Variables +// $off-canvas-width: rem-calc(250); +// $off-canvas-bg: $oil; +// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%); + +// Off Canvas Menu List Variables +// $off-canvas-label-padding: 0.3rem rem-calc(15); +// $off-canvas-label-color: $aluminum; +// $off-canvas-label-text-transform: uppercase; +// $off-canvas-label-font-size: rem-calc(12); +// $off-canvas-label-font-weight: $font-weight-bold; +// $off-canvas-label-bg: $tuatara; +// $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%); +// $off-canvas-label-border-bottom: none; +// $off-canvas-label-margin:0; +// $off-canvas-link-padding: rem-calc(10, 15); +// $off-canvas-link-color: rgba($white, 0.7); +// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); +// $off-canvas-back-bg: $tuatara; +// $off-canvas-back-border-top: $off-canvas-label-border-top; +// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom; +// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%); +// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); +// $off-canvas-back-hover-border-bottom: none; + +// Off Canvas Menu Icon Variables +// $tabbar-menu-icon-color: $white; +// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); + +// $tabbar-menu-icon-text-indent: rem-calc(35); +// $tabbar-menu-icon-width: $tabbar-height; +// $tabbar-menu-icon-height: $tabbar-height; +// $tabbar-menu-icon-padding: 0; + +// $tabbar-hamburger-icon-width: rem-calc(16); +// $tabbar-hamburger-icon-left: false; +// $tabbar-hamburger-icon-top: false; +// $tabbar-hamburger-icon-thickness: 1px; +// $tabbar-hamburger-icon-gap: 6px; + +// Off Canvas Back-Link Overlay +// $off-canvas-overlay-transition: background 300ms ease; +// $off-canvas-overlay-cursor: pointer; +// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5); +// $off-canvas-overlay-background: rgba($white, 0.2); +// $off-canvas-overlay-background-hover: rgba($white, 0.05); + +// Transition Variables +// $menu-slide: "transform 500ms ease"; + +// 19. Orbit +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-orbit-classes: $include-html-classes; + +// We use these to control the caption styles +// $orbit-container-bg: none; +// $orbit-caption-bg: rgba(51,51,51, 0.8); +// $orbit-caption-font-color: $white; +// $orbit-caption-font-size: rem-calc(14); +// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" +// $orbit-caption-padding: rem-calc(10 14); +// $orbit-caption-height: auto; + +// We use these to control the left/right nav styles +// $orbit-nav-bg: transparent; +// $orbit-nav-bg-hover: rgba(0,0,0,0.3); +// $orbit-nav-arrow-color: $white; +// $orbit-nav-arrow-color-hover: $white; + +// We use these to control the timer styles +// $orbit-timer-bg: rgba(255,255,255,0.3); +// $orbit-timer-show-progress-bar: true; + +// We use these to control the bullet nav styles +// $orbit-bullet-nav-color: $iron; +// $orbit-bullet-nav-color-active: $aluminum; +// $orbit-bullet-radius: rem-calc(9); + +// We use these to controls the style of slide numbers +// $orbit-slide-number-bg: rgba(0,0,0,0); +// $orbit-slide-number-font-color: $white; +// $orbit-slide-number-padding: rem-calc(5); + +// Hide controls on small +// $orbit-nav-hide-for-small: true; +// $orbit-bullet-hide-for-small: true; +// $orbit-timer-hide-for-small: true; + +// Graceful Loading Wrapper and preloader +// $wrapper-class: "slideshow-wrapper"; +// $preloader-class: "preloader"; + +// 20. Pagination +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-pagination-classes: $include-html-classes; + +// We use these to control the pagination container +// $pagination-height: rem-calc(24); +// $pagination-margin: rem-calc(-5); + +// We use these to set the list-item properties +// $pagination-li-float: $default-float; +// $pagination-li-height: rem-calc(24); +// $pagination-li-font-color: $jet; +// $pagination-li-font-size: rem-calc(14); +// $pagination-li-margin: rem-calc(5); + +// We use these for the pagination anchor links +// $pagination-link-pad: rem-calc(1 10 1); +// $pagination-link-font-color: $aluminum; +// $pagination-link-active-bg: scale-color($white, $lightness: -10%); + +// We use these for disabled anchor links +// $pagination-link-unavailable-cursor: default; +// $pagination-link-unavailable-font-color: $aluminum; +// $pagination-link-unavailable-bg-active: transparent; + +// We use these for currently selected anchor links +// $pagination-link-current-background: $primary-color; +// $pagination-link-current-font-color: $white; +// $pagination-link-current-font-weight: $font-weight-bold; +// $pagination-link-current-cursor: default; +// $pagination-link-current-active-bg: $primary-color; + +// 21. Panels +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-panel-classes: $include-html-classes; + +// We use these to control the background and border styles +// $panel-bg: scale-color($white, $lightness: -5%); +// $panel-border-style: solid; +// $panel-border-size: 1px; + +// We use this % to control how much we darken things on hover +// $panel-function-factor: -11%; +// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor); + +// We use these to set default inner padding and bottom margin +// $panel-margin-bottom: rem-calc(20); +// $panel-padding: rem-calc(20); + +// We use these to set default font colors +// $panel-font-color: $oil; +// $panel-font-color-alt: $white; + +// $panel-header-adjust: true; +// $callout-panel-link-color: $primary-color; + +// 22. Pricing Tables +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-pricing-classes: $include-html-classes; + +// We use this to control the border color +// $price-table-border: solid 1px $gainsboro; + +// We use this to control the bottom margin of the pricing table +// $price-table-margin-bottom: rem-calc(20); + +// We use these to control the title styles +// $price-title-bg: $oil; +// $price-title-padding: rem-calc(15 20); +// $price-title-align: center; +// $price-title-color: $smoke; +// $price-title-weight: $font-weight-normal; +// $price-title-size: rem-calc(16); +// $price-title-font-family: $body-font-family; + +// We use these to control the price styles +// $price-money-bg: $vapor; +// $price-money-padding: rem-calc(15 20); +// $price-money-align: center; +// $price-money-color: $oil; +// $price-money-weight: $font-weight-normal; +// $price-money-size: rem-calc(32); +// $price-money-font-family: $body-font-family; + +// We use these to control the description styles +// $price-bg: $white; +// $price-desc-color: $monsoon; +// $price-desc-padding: rem-calc(15); +// $price-desc-align: center; +// $price-desc-font-size: rem-calc(12); +// $price-desc-weight: $font-weight-normal; +// $price-desc-line-height: 1.4; +// $price-desc-bottom-border: dotted 1px $gainsboro; + +// We use these to control the list item styles +// $price-item-color: $oil; +// $price-item-padding: rem-calc(15); +// $price-item-align: center; +// $price-item-font-size: rem-calc(14); +// $price-item-weight: $font-weight-normal; +// $price-item-bottom-border: dotted 1px $gainsboro; + +// We use these to control the CTA area styles +// $price-cta-bg: $white; +// $price-cta-align: center; +// $price-cta-padding: rem-calc(20 20 0); + +// 23. Progress Bar +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-media-classes: $include-html-classes; + +// We use this to set the progress bar height +// $progress-bar-height: rem-calc(25); +// $progress-bar-color: $vapor ; + +// We use these to control the border styles +// $progress-bar-border-color: scale-color($white, $lightness: 20%); +// $progress-bar-border-size: 1px; +// $progress-bar-border-style: solid; +// $progress-bar-border-radius: $global-radius; + +// We use these to control the margin & padding +// $progress-bar-pad: rem-calc(2); +// $progress-bar-margin-bottom: rem-calc(10); + +// We use these to set the meter colors +// $progress-meter-color: $primary-color; +// $progress-meter-secondary-color: $secondary-color; +// $progress-meter-success-color: $success-color; +// $progress-meter-alert-color: $alert-color; + +// 24. Range Slider +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-range-slider-classes: $include-html-classes; + +// These variables define the slider bar styles +// $range-slider-bar-width: 100%; +// $range-slider-bar-height: rem-calc(16); + +// $range-slider-bar-border-width: 1px; +// $range-slider-bar-border-style: solid; +// $range-slider-bar-border-color: $gainsboro; +// $range-slider-radius: $global-radius; +// $range-slider-round: $global-rounded; +// $range-slider-bar-bg-color: $ghost; + +// Vertical bar styles +// $range-slider-vertical-bar-width: rem-calc(16); +// $range-slider-vertical-bar-height: rem-calc(200); + +// These variables define the slider handle styles +// $range-slider-handle-width: rem-calc(32); +// $range-slider-handle-height: rem-calc(22); +// $range-slider-handle-position-top: rem-calc(-5); +// $range-slider-handle-bg-color: $primary-color; +// $range-slider-handle-border-width: 1px; +// $range-slider-handle-border-style: solid; +// $range-slider-handle-border-color: none; +// $range-slider-handle-radius: $global-radius; +// $range-slider-handle-round: $global-rounded; +// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); +// $range-slider-handle-cursor: pointer; + +// 25. Reveal +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-reveal-classes: $include-html-classes; + +// We use these to control the style of the reveal overlay. +// $reveal-overlay-bg: rgba($black, .45); +// $reveal-overlay-bg-old: $black; + +// We use these to control the style of the modal itself. +// $reveal-modal-bg: $white; +// $reveal-position-top: rem-calc(100); +// $reveal-default-width: 80%; +// $reveal-max-width: $row-width; +// $reveal-modal-padding: rem-calc(20); +// $reveal-box-shadow: 0 0 10px rgba($black,.4); + +// We use these to style the reveal close button +// $reveal-close-font-size: rem-calc(40); +// $reveal-close-top: rem-calc(8); +// $reveal-close-side: rem-calc(11); +// $reveal-close-color: $base; +// $reveal-close-weight: $font-weight-bold; + +// We use this to set the default radius used throughout the core. +// $reveal-radius: $global-radius; +// $reveal-round: $global-rounded; + +// We use these to control the modal border +// $reveal-border-style: solid; +// $reveal-border-width: 1px; +// $reveal-border-color: $steel; + +// $reveal-modal-class: "reveal-modal"; +// $close-reveal-modal-class: "close-reveal-modal"; + +// 26. Side Nav +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-nav-classes: $include-html-classes; + +// We use this to control padding. +// $side-nav-padding: rem-calc(14 0); + +// We use these to control list styles. +// $side-nav-list-type: none; +// $side-nav-list-position: inside; +// $side-nav-list-margin: rem-calc(0 0 7 0); + +// We use these to control link styles. +// $side-nav-link-color: $primary-color; +// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); +// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); +// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025); +// $side-nav-link-margin: 0; +// $side-nav-link-padding: rem-calc(7 14); +// $side-nav-font-size: rem-calc(14); +// $side-nav-font-weight: $font-weight-normal; +// $side-nav-font-weight-active: $side-nav-font-weight; +// $side-nav-font-family: $body-font-family; +// $side-nav-font-family-active: $side-nav-font-family; + +// We use these to control heading styles. +// $side-nav-heading-color: $side-nav-link-color; +// $side-nav-heading-font-size: $side-nav-font-size; +// $side-nav-heading-font-weight: bold; +// $side-nav-heading-text-transform: uppercase; + +// We use these to control border styles +// $side-nav-divider-size: 1px; +// $side-nav-divider-style: solid; +// $side-nav-divider-color: scale-color($white, $lightness: 10%); + +// 27. Split Buttons +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-button-classes: $include-html-classes; + +// We use these to control different shared styles for Split Buttons +// $split-button-function-factor: 10%; +// $split-button-pip-color: $white; +// $split-button-pip-color-alt: $oil; +// $split-button-active-bg-tint: rgba(0,0,0,0.1); + +// We use these to control tiny split buttons +// $split-button-padding-tny: $button-pip-tny * 10; +// $split-button-span-width-tny: $button-pip-tny * 6; +// $split-button-pip-size-tny: $button-pip-tny; +// $split-button-pip-top-tny: $button-pip-tny * 2; +// $split-button-pip-default-float-tny: rem-calc(-6); + +// We use these to control small split buttons +// $split-button-padding-sml: $button-pip-sml * 10; +// $split-button-span-width-sml: $button-pip-sml * 6; +// $split-button-pip-size-sml: $button-pip-sml; +// $split-button-pip-top-sml: $button-pip-sml * 1.5; +// $split-button-pip-default-float-sml: rem-calc(-6); + +// We use these to control medium split buttons +// $split-button-padding-med: $button-pip-med * 9; +// $split-button-span-width-med: $button-pip-med * 5.5; +// $split-button-pip-size-med: $button-pip-med - rem-calc(3); +// $split-button-pip-top-med: $button-pip-med * 1.5; +// $split-button-pip-default-float-med: rem-calc(-6); + +// We use these to control large split buttons +// $split-button-padding-lrg: $button-pip-lrg * 8; +// $split-button-span-width-lrg: $button-pip-lrg * 5; +// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); +// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); +// $split-button-pip-default-float-lrg: rem-calc(-6); + +// 28. Sub Nav +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-nav-classes: $include-html-classes; + +// We use these to control margin and padding +// $sub-nav-list-margin: rem-calc(-4 0 18); +// $sub-nav-list-padding-top: rem-calc(4); + +// We use this to control the definition +// $sub-nav-font-family: $body-font-family; +// $sub-nav-font-size: rem-calc(14); +// $sub-nav-font-color: $aluminum; +// $sub-nav-font-weight: $font-weight-normal; +// $sub-nav-text-decoration: none; +// $sub-nav-padding: rem-calc(3 16); +// $sub-nav-border-radius: 3px; +// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); + +// We use these to control the active item styles +// $sub-nav-active-font-weight: $font-weight-normal; +// $sub-nav-active-bg: $primary-color; +// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); +// $sub-nav-active-color: $white; +// $sub-nav-active-padding: $sub-nav-padding; +// $sub-nav-active-cursor: default; + +// $sub-nav-item-divider: ""; +// $sub-nav-item-divider-margin: rem-calc(12); + +// 29. Switch +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-form-classes: $include-html-classes; + +// Controlling border styles and background colors for the switch container +// $switch-border-color: scale-color($white, $lightness: -20%); +// $switch-border-style: solid; +// $switch-border-width: 1px; +// $switch-bg: $white; + +// We use these to control the switch heights for our default classes +// $switch-height-tny: rem-calc(22); +// $switch-height-sml: rem-calc(28); +// $switch-height-med: rem-calc(36); +// $switch-height-lrg: rem-calc(44); +// $switch-bottom-margin: rem-calc(20); + +// We use these to control default font sizes for our classes. +// $switch-font-size-tny: 11px; +// $switch-font-size-sml: 12px; +// $switch-font-size-med: 14px; +// $switch-font-size-lrg: 17px; +// $switch-label-side-padding: 6px; + +// We use these to style the switch-paddle +// $switch-paddle-bg: $white; +// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%); +// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%); +// $switch-paddle-border-width: 1px; +// $switch-paddle-border-style: solid; +// $switch-paddle-transition-speed: .1s; +// $switch-paddle-transition-ease: ease-out; +// $switch-positive-color: scale-color($success-color, $lightness: 94%); +// $switch-negative-color: $white-smoke; + +// Outline Style for tabbing through switches +// $switch-label-outline: 1px dotted $jumbo; + +// 30. Tables +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-table-classes: $include-html-classes; + +// These control the background color for the table and even rows +// $table-bg: $white; +// $table-even-row-bg: $snow; + +// These control the table cell border style +// $table-border-style: solid; +// $table-border-size: 1px; +// $table-border-color: $gainsboro; + +// These control the table head styles +// $table-head-bg: $white-smoke ; +// $table-head-font-size: rem-calc(14); +// $table-head-font-color: $jet; +// $table-head-font-weight: $font-weight-bold; +// $table-head-padding: rem-calc(8 10 10); + +// These control the row padding and font styles +// $table-row-padding: rem-calc(9 10); +// $table-row-font-size: rem-calc(14); +// $table-row-font-color: $jet; +// $table-line-height: rem-calc(18); + +// These are for controlling the layout, display and margin of tables +// $table-layout: auto; +// $table-display: table-cell; +// $table-margin-bottom: rem-calc(20); + +// 31. Tabs +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-tabs-classes: $include-html-classes; + +// $tabs-navigation-padding: rem-calc(16); +// $tabs-navigation-bg-color: $silver ; +// $tabs-navigation-active-bg-color: $white; +// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); +// $tabs-navigation-font-color: $jet; +// $tabs-navigation-active-font-color: $tabs-navigation-font-color; +// $tabs-navigation-font-size: rem-calc(16); +// $tabs-navigation-font-family: $body-font-family; + +// $tabs-content-margin-bottom: rem-calc(24); +// $tabs-content-padding: ($column-gutter/2); + +// $tabs-vertical-navigation-margin-bottom: 1.25rem; + +// 32. Thumbnails +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-media-classes: $include-html-classes; + +// We use these to control border styles +// $thumb-border-style: solid; +// $thumb-border-width: 4px; +// $thumb-border-color: $white; +// $thumb-box-shadow: 0 0 0 1px rgba($black,.2); +// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); + +// Radius and transition speed for thumbs +// $thumb-radius: $global-radius; +// $thumb-transition-speed: 200ms; + +// 33. Tooltips +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-tooltip-classes: $include-html-classes; + +// $has-tip-border-bottom: dotted 1px $iron; +// $has-tip-font-weight: $font-weight-bold; +// $has-tip-font-color: $oil; +// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); +// $has-tip-font-color-hover: $primary-color; +// $has-tip-cursor-type: help; + +// $tooltip-padding: rem-calc(12); +// $tooltip-bg: $oil; +// $tooltip-font-size: rem-calc(14); +// $tooltip-font-weight: $font-weight-normal; +// $tooltip-font-color: $white; +// $tooltip-line-height: 1.3; +// $tooltip-close-font-size: rem-calc(10); +// $tooltip-close-font-weight: $font-weight-normal; +// $tooltip-close-font-color: $monsoon; +// $tooltip-font-size-sml: rem-calc(14); +// $tooltip-radius: $global-radius; +// $tooltip-rounded: $global-rounded; +// $tooltip-pip-size: 5px; +// $tooltip-max-width: 300px; + +// 34. Top Bar +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-top-bar-classes: $include-html-classes; + +// Background color for the top bar +// $topbar-bg-color: $oil; +// $topbar-bg: $topbar-bg-color; + +// Height and margin +// $topbar-height: rem-calc(45); +// $topbar-margin-bottom: 0; + +// Controlling the styles for the title in the top bar +// $topbar-title-weight: $font-weight-normal; +// $topbar-title-font-size: rem-calc(17); + +// Style the top bar dropdown elements +// $topbar-dropdown-bg: $oil; +// $topbar-dropdown-link-color: $white; +// $topbar-dropdown-link-bg: $oil; +// $topbar-dropdown-link-bg-hover: $oil; +// $topbar-dropdown-link-weight: $font-weight-normal; +// $topbar-dropdown-toggle-size: 5px; +// $topbar-dropdown-toggle-color: $white; +// $topbar-dropdown-toggle-alpha: 0.4; + +// Set the link colors and styles for top-level nav +// $topbar-link-color: $white; +// $topbar-link-color-hover: $white; +// $topbar-link-color-active: $white; +// $topbar-link-color-active-hover: $white; +// $topbar-link-weight: $font-weight-normal; +// $topbar-link-font-size: rem-calc(13); +// $topbar-link-hover-lightness: -10%; // Darken by 10% +// $topbar-link-bg: $topbar-bg; +// $topbar-link-bg-color-hover: $charcoal; +// $topbar-link-bg-hover: $oil; +// $topbar-link-bg-active: $primary-color; +// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); +// $topbar-link-font-family: $body-font-family; +// $topbar-link-text-transform: none; +// $topbar-link-padding: ($topbar-height / 3); +// $topbar-back-link-size: $h5-font-size; +// $topbar-link-dropdown-padding: 20px; + +// $topbar-button-font-size: 0.75rem; +// $topbar-button-top: 7px; + +// $topbar-dropdown-label-color: $monsoon; +// $topbar-dropdown-label-text-transform: uppercase; +// $topbar-dropdown-label-font-weight: $font-weight-bold; +// $topbar-dropdown-label-font-size: rem-calc(10); +// $topbar-dropdown-label-bg: $oil; + +// Top menu icon styles +// $topbar-menu-link-transform: uppercase; +// $topbar-menu-link-font-size: rem-calc(13); +// $topbar-menu-link-weight: $font-weight-bold; +// $topbar-menu-link-color: $white; +// $topbar-menu-icon-color: $white; +// $topbar-menu-link-color-toggled: $jumbo; +// $topbar-menu-icon-color-toggled: $jumbo; + +// Transitions and breakpoint styles +// $topbar-transition-speed: 300ms; +// Using rem-calc for the below breakpoint causes issues with top bar +// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout +// $topbar-media-query: $medium-up; + +// Divider Styles +// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); +// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); + +// Sticky Class +// $topbar-sticky-class: ".sticky"; +// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item + +// 36. Visibility Classes +// - - - - - - - - - - - - - - - - - - - - - - - - - + +// $include-html-visibility-classes: $include-html-classes; +// $include-table-visibility-classes: true; +// $include-legacy-visibility-classes: true; +// $include-accessibility-classes: true; diff --git a/app/styles/app/foundation/scss/foundation/components/_accordion.scss b/app/styles/app/foundation/scss/foundation/components/_accordion.scss new file mode 100644 index 00000000..6a0a64ed --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_accordion.scss @@ -0,0 +1,157 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // + +// $include-html-accordion-classes: $include-html-classes !default; + +// $accordion-navigation-padding: rem-calc(16) !default; +// $accordion-navigation-bg-color: $silver !default; +// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default; +// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default; +// $accordion-navigation-font-color: $jet !default; +// $accordion-navigation-font-size: rem-calc(16) !default; +// $accordion-navigation-font-family: $body-font-family !default; + +// $accordion-content-padding: ($column-gutter/2) !default; +// $accordion-content-active-bg-color: $white !default; + + +// // Mixin: accordion-container() +// // Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix +// // Explicit Dependencies: a clearfix mixin *is* defined. +// // Implicit Dependencies: None + +// @mixin accordion-container() { +// @include clearfix; +// margin-bottom: 0; +// } + +// // Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){ +// // @params $bg-color: [ color or string ]: Specify the background color for the navigation element +// // @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered +// // @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released. +// // @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible +// // @params $font-color [ color or string ]: Color of the font for accordion +// // @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element +// // @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion + +// @mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){ +// display: block; +// margin-bottom: 0 !important; +// @if type-of($active_class) != "string" { +// @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component." +// } +// @else { +// &.#{ $active_class } > a { +// background: $active-bg; +// } +// } +// > a { +// background: $bg; +// color: $font-color; +// @if type-of($padding) != number { +// @warn "`#{$padding}` was read as #{type-of($padding)}"; +// @if $accordion-navigation-padding != null { +// @warn "#{$padding} was read as a #{type-of($padding)}"; +// @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)"; +// padding: $accordion-navigation-padding; +// } +// @else { +// @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding"; +// padding: null; +// } +// } +// @else { +// padding: $padding; +// } +// display: block; +// font-family: $font-family; +// @if type-of($font-size) != number { +// @warn "`#{$font-size}` was read as a #{type-of($font-size)}"; +// @if $accordion-navigation-font-size != null { +// @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size})."; +// font-size: $accordion-navigation-font-size; +// } +// @else{ +// @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size."; +// font-size: null; + +// } +// } +// @else { +// font-size: $font-size; +// } +// &:hover { +// background: $hover-bg; +// } +// } +// } + +// // Mixin: accordion-content($bg, $padding, $active-class) +// // @params $padding [ number ]: Padding for the content of the container +// // @params $bg [ color ]: Background color for the content when it's visible +// // @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible. + +// @mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){ +// display: none; +// @if type-of($padding) != "number" { +// @warn "#{$padding} was read as a #{type-of($padding)}"; +// @if $accordion-content-padding != null { +// @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead"; +// padding: $accordion-content-padding; +// } @else { +// @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding."; +// padding: null; +// } +// } @else { +// padding: $padding; +// } + +// @if type-of($active_class) != "string" { +// @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. " +// } +// @else { +// &.#{$active_class} { +// display: block; +// background: $bg; +// } +// } +// } + +// @include exports("accordion") { +// @if $include-html-accordion-classes { +// .accordion { +// @include clearfix; +// margin-bottom: 0; +// .accordion-navigation, dd { +// display: block; +// margin-bottom: 0 !important; +// &.active > a { background: $accordion-navigation-active-bg-color; } +// > a { +// background: $accordion-navigation-bg-color; +// color: $accordion-navigation-font-color; +// padding: $accordion-navigation-padding; +// display: block; +// font-family: $accordion-navigation-font-family; +// font-size: $accordion-navigation-font-size; +// &:hover { background: $accordion-navigation-hover-bg-color; } +// } + +// > .content { +// display: none; +// padding: $accordion-content-padding; +// &.active { +// display: block; +// background: $accordion-content-active-bg-color; +// } +// } +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss b/app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss new file mode 100644 index 00000000..6ba218b5 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_alert-boxes.scss @@ -0,0 +1,128 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // Alert Box Variables +// // +// $include-html-alert-classes: $include-html-classes !default; + +// // We use this to control alert padding. +// $alert-padding-top: rem-calc(14) !default; +// $alert-padding-default-float: $alert-padding-top !default; +// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default; +// $alert-padding-bottom: $alert-padding-top !default; + +// // We use these to control text style. +// $alert-font-weight: $font-weight-normal !default; +// $alert-font-size: rem-calc(13) !default; +// $alert-font-color: $white !default; +// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default; + +// // We use this for close hover effect. +// $alert-function-factor: -14% !default; + +// // We use these to control border styles. +// $alert-border-style: solid !default; +// $alert-border-width: 1px !default; +// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default; +// $alert-bottom-margin: rem-calc(20) !default; + +// // We use these to style the close buttons +// $alert-close-color: $oil !default; +// $alert-close-top: 50% !default; +// $alert-close-position: rem-calc(4) !default; +// $alert-close-font-size: rem-calc(22) !default; +// $alert-close-opacity: 0.3 !default; +// $alert-close-opacity-hover: 0.5 !default; +// $alert-close-padding: 9px 6px 4px !default; +// $alert-close-background: inherit !default; + +// // We use this to control border radius +// $alert-radius: $global-radius !default; + +// $alert-transition-speed: 300ms !default; +// $alert-transition-ease: ease-out !default; + +// // +// // Alert Mixins +// // + +// // We use this mixin to create a default alert base. +// @mixin alert-base { +// border-style: $alert-border-style; +// border-width: $alert-border-width; +// display: block; +// font-weight: $alert-font-weight; +// margin-bottom: $alert-bottom-margin; +// position: relative; +// padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float; +// font-size: $alert-font-size; +// @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease) +// } + +// // We use this mixin to add alert styles +// // +// // $bg - The background of the alert. Default: $primary-color. +// @mixin alert-style($bg:$primary-color) { + +// // This finds the lightness percentage of the background color. +// $bg-lightness: lightness($bg); + +// // We control which background color and border come through. +// background-color: $bg; +// border-color: scale-color($bg, $lightness: $alert-function-factor); + +// // We control the text color for you based on the background color. +// @if $bg-lightness > 70% { color: $alert-font-color-alt; } +// @else { color: $alert-font-color; } + +// } + +// // We use this to create the close button. +// @mixin alert-close { +// font-size: $alert-close-font-size; +// padding: $alert-close-padding; +// line-height: 0; +// position: absolute; +// top: $alert-close-top; +// margin-top: -($alert-close-font-size / 2); +// #{$opposite-direction}: $alert-close-position; +// color: $alert-close-color; +// opacity: $alert-close-opacity; +// background: $alert-close-background; +// &:hover, +// &:focus { opacity: $alert-close-opacity-hover; } +// } + +// // We use this to quickly create alerts with a single mixin. +// // +// // $bg - Background of alert. Default: $primary-color. +// // $radius - Radius of alert box. Default: false. +// @mixin alert($bg:$primary-color, $radius:false) { +// @include alert-base; +// @include alert-style($bg); +// @include radius($radius); +// } + +// @include exports("alert-box") { +// @if $include-html-alert-classes { +// .alert-box { +// @include alert; + +// .close { @include alert-close; } + +// &.radius { @include radius($alert-radius); } +// &.round { @include radius($global-rounded); } + +// &.success { @include alert-style($success-color); } +// &.alert { @include alert-style($alert-color); } +// &.secondary { @include alert-style($secondary-color); } +// &.warning { @include alert-style($warning-color); } +// &.info { @include alert-style($info-color); } +// &.alert-close { opacity: 0} +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_block-grid.scss b/app/styles/app/foundation/scss/foundation/components/_block-grid.scss new file mode 100644 index 00000000..62e49765 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_block-grid.scss @@ -0,0 +1,132 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // Block Grid Variables +// // +// $include-html-block-grid-classes: $include-html-classes !default; +// $include-xl-html-block-grid-classes: false !default; + +// // We use this to control the maximum number of block grid elements per row +// $block-grid-elements: 12 !default; +// $block-grid-default-spacing: rem-calc(20) !default; + +// $align-block-grid-to-grid: false !default; +// @if $align-block-grid-to-grid { +// $block-grid-default-spacing: $column-gutter; +// } + +// // Enables media queries for block-grid classes. Set to false if writing semantic HTML. +// $block-grid-media-queries: true !default; + +// // +// // Block Grid Mixins +// // + +// // Create a custom block grid +// // +// // $per-row - # of items to display per row. Default: false. +// // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20). +// // $base-style - Apply a base style to block grid. Default: true. +// @mixin block-grid( +// $per-row:false, +// $spacing:$block-grid-default-spacing, +// $include-spacing:true, +// $base-style:true) { + +// @if $base-style { +// display: block; +// padding: 0; +// @if $align-block-grid-to-grid { +// margin: 0; +// } @else { +// margin: 0 (-$spacing/2); +// } +// @include clearfix; + +// &>li { +// display: block; +// height: auto; +// float: $default-float; +// @if $include-spacing { +// padding: 0 ($spacing/2) $spacing; +// } +// } +// } + +// @if $per-row { +// &>li { +// width: 100%/$per-row; +// @if $include-spacing { +// padding: 0 ($spacing/2) $spacing; +// } +// list-style: none; + +// &:nth-of-type(1n) { clear: none; } +// &:nth-of-type(#{$per-row}n+1) { clear: both; } +// @if $align-block-grid-to-grid { +// @include block-grid-aligned($per-row, $spacing); +// } +// } +// } +// } + +// @mixin block-grid-aligned($per-row, $spacing) { +// @for $i from 1 through $block-grid-elements { +// @if $per-row >= $i { +// $grid-column: '+' + $i; +// @if $per-row == $i { +// $grid-column: ''; +// } +// &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) { +// padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1)))); +// padding-right: ($spacing - (($spacing / $per-row) * $i)); +// } +// } +// } +// } + +// // Generate presentational markup for block grid. +// // +// // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc. +// @mixin block-grid-html-classes($size,$include-spacing) { +// @for $i from 1 through $block-grid-elements { +// .#{$size}-block-grid-#{($i)} { +// @include block-grid($i,$block-grid-default-spacing,$include-spacing,false); +// } +// } +// } + +// @include exports("block-grid") { +// @if $include-html-block-grid-classes { + +// [class*="block-grid-"] { @include block-grid; } + +// @if $block-grid-media-queries { +// @media #{$small-up} { +// @include block-grid-html-classes($size:small,$include-spacing:false); +// } + +// @media #{$medium-up} { +// @include block-grid-html-classes($size:medium,$include-spacing:false); +// } + +// @media #{$large-up} { +// @include block-grid-html-classes($size:large,$include-spacing:false); +// } + +// @if $include-xl-html-block-grid-classes { +// @media #{$xlarge-up} { +// @include block-grid-html-classes($size:xlarge,$include-spacing:false); +// } + +// @media #{$xxlarge-up} { +// @include block-grid-html-classes($size:xxlarge,$include-spacing:false); +// } +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss b/app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss new file mode 100644 index 00000000..4403cbe4 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_breadcrumbs.scss @@ -0,0 +1,132 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // Breadcrumb Variables +// // +// $include-html-nav-classes: $include-html-classes !default; + +// // We use this to set the background color for the breadcrumb container. +// $crumb-bg: scale-color($secondary-color, $lightness: 55%) !default; + +// // We use these to set the padding around the breadcrumbs. +// $crumb-padding: rem-calc(9 14 9) !default; +// $crumb-side-padding: rem-calc(12) !default; + +// // We use these to control border styles. +// $crumb-function-factor: -10% !default; +// $crumb-border-size: 1px !default; +// $crumb-border-style: solid !default; +// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default; +// $crumb-radius: $global-radius !default; + +// // We use these to set various text styles for breadcrumbs. +// $crumb-font-size: rem-calc(11) !default; +// $crumb-font-color: $primary-color !default; +// $crumb-font-color-current: $oil !default; +// $crumb-font-color-unavailable: $aluminum !default; +// $crumb-font-transform: uppercase !default; +// $crumb-link-decor: underline !default; + +// // We use these to control the slash between breadcrumbs +// $crumb-slash-color: $base !default; +// $crumb-slash: "/" !default; + +// // +// // Breadcrumb Mixins +// // + +// // We use this mixin to create a container around our breadcrumbs +// @mixin crumb-container { +// display: block; +// padding: $crumb-padding; +// overflow: hidden; +// margin-#{$default-float}: 0; +// list-style: none; +// border-style: $crumb-border-style; +// border-width: $crumb-border-size; + +// // We control which background color and border come through. +// background-color: $crumb-bg; +// border-color: $crumb-border-color; +// } + +// // We use this mixin to create breadcrumb styles from list items. +// @mixin crumbs { + +// // A normal state will make the links look and act like clickable breadcrumbs. +// margin: 0; +// float: $default-float; +// font-size: $crumb-font-size; +// line-height: $crumb-font-size; +// text-transform: $crumb-font-transform; +// color: $crumb-font-color; + +// &:hover a, &:focus a { text-decoration: $crumb-link-decor; } + +// a { +// color: $crumb-font-color; +// } + +// // Current is for the link of the current page +// &.current { +// cursor: $cursor-default-value; +// color: $crumb-font-color-current; +// a { +// cursor: $cursor-default-value; +// color: $crumb-font-color-current; +// } + +// &:hover, &:hover a, +// &:focus, &:focus a { text-decoration: none; } +// } + +// // Unavailable removed color and link styles so it looks inactive. +// &.unavailable { +// color: $crumb-font-color-unavailable; +// a { color: $crumb-font-color-unavailable; } + +// &:hover, +// &:hover a, +// &:focus, +// a:focus { +// text-decoration: none; +// color: $crumb-font-color-unavailable; +// cursor: $cursor-default-value; +// } +// } + +// &:before { +// content: "#{$crumb-slash}"; +// color: $crumb-slash-color; +// margin: 0 $crumb-side-padding; +// position: relative; +// top: 1px; +// } + +// &:first-child:before { +// content: " "; +// margin: 0; +// } +// } + +// @include exports("breadcrumbs") { +// @if $include-html-nav-classes { +// .breadcrumbs { +// @include crumb-container; +// @include radius($crumb-radius); + +// &>* { +// @include crumbs; +// } +// } +// } +// } + +// /* Accessibility - hides the forward slash */ +// [aria-label="breadcrumbs"] [aria-hidden="true"]:after { +// content: "/"; +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_button-groups.scss b/app/styles/app/foundation/scss/foundation/components/_button-groups.scss new file mode 100644 index 00000000..2597ac35 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_button-groups.scss @@ -0,0 +1,197 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "buttons"; + +// // +// // Button Group Variables +// // +// $include-html-button-classes: $include-html-classes !default; + +// // Sets the margin for the right side by default, and the left margin if right-to-left direction is used +// $button-bar-margin-opposite: rem-calc(10) !default; +// $button-group-border-width: 1px !default; + +// // +// // Button Group Mixins +// // + +// // We use this to add styles for a button group container +// @mixin button-group-container($styles:true, $float:false) { +// @if $styles { +// list-style: none; +// margin: 0; +// #{$default-float}: 0; +// @include clearfix(); +// } +// @if $float { +// float: #{$default-float}; +// margin-#{$opposite-direction}: $button-bar-margin-opposite; +// & div { overflow: hidden; } +// } +// } + +// // We use this to control styles for button groups +// @mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) { + +// > button, .button { +// border-#{$default-float}: $button-group-border-width solid; +// border-color: rgba(255, 255, 255, 0.5); +// } + +// &:first-child { +// button, .button { +// border-#{$default-float}: 0; +// } +// } + +// // We use this to control the flow, or remove those styles completely. +// @if $float { +// margin: 0; +// float: $float; +// display: list-item; +// // Make sure the first child doesn't get the negative margin. +// &:first-child { margin-#{$default-float}: 0; } +// } +// @else { +// margin: 0 -2px; +// display: inline-block; +// } + +// @if $orientation == vertical { +// display:block; +// margin:0; +// > button, .button { +// border-top: $button-group-border-width solid; +// border-color: rgba(255, 255, 255, 0.5); +// border-left-width: 0; +// margin:0; +// display: block; +// } + +// &:first-child { +// button, .button { +// border-top: 0; +// } +// } +// } + +// // We use these to control left and right radius on first/last buttons in the group. +// @if $radius == true { +// &, +// & > a, +// & > button, +// & > .button { @include radius(0); } +// &:first-child, +// &:first-child > a, +// &:first-child > button, +// &:first-child > .button { +// @if $orientation == vertical { +// @include side-radius(top, $button-radius); +// } +// @else { +// @include side-radius($default-float, $button-radius); +// } +// } +// &:last-child, +// &:last-child > a, +// &:last-child > button, +// &:last-child > .button { +// @if $orientation == vertical { +// @include side-radius(bottom, $button-radius); +// } +// @else { +// @include side-radius($opposite-direction, $button-radius); +// } +// } +// } +// @else if $radius { +// &, +// & > a, +// & > button, +// & > .button { @include radius(0); } +// &:first-child, +// &:first-child > a, +// &:first-child > button, +// &:first-child > .button { +// @if $orientation == vertical { +// @include side-radius(top, $radius); +// } +// @else { +// @include side-radius($default-float, $radius); +// } +// } +// &:last-child, +// &:last-child > a, +// &:last-child > button, +// &:last-child > .button { +// @if $orientation == vertical { +// @include side-radius(bottom, $radius); +// } +// @else { +// @include side-radius($opposite-direction, $radius); +// } +// } +// } + +// // We use this to make the buttons even width across their container +// @if $even { +// width: percentage((100/$even) / 100); +// button, .button { width: 100%; } +// } +// } + +// @include exports("button-group") { +// @if $include-html-button-classes { +// .button-group { @include button-group-container; + +// & > li { @include button-group-style(); } + +// &.stack { +// & > li { @include button-group-style($orientation:vertical); float: none; } +// } + +// &.stack-for-small { +// & > li { +// @include button-group-style($orientation:horizontal); +// @media #{$small-only} { +// @include button-group-style($orientation:vertical); +// } +// } +// } + +// &.radius > * { @include button-group-style($radius:$button-radius, $float:null); } +// &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); } +// &.radius.stack-for-small > * { +// @media #{$medium-up} { +// @include button-group-style($radius:$button-radius, $orientation:horizontal); +// } +// @media #{$small-only} { +// @include button-group-style($radius:$button-radius, $orientation:vertical); +// } +// } + +// &.round > * { @include button-group-style($radius:$button-round, $float:null); } +// &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); } +// &.round.stack-for-small > * { +// @media #{$medium-up} { +// @include button-group-style($radius:$button-round, $orientation:horizontal); +// } +// @media #{$small-only} { +// @include button-group-style($radius:$button-med, $orientation:vertical); +// } +// } + +// @for $i from 2 through 8 { +// &.even-#{$i} li { @include button-group-style($even:$i, $float:null); } +// } +// } + +// .button-bar { +// @include clearfix; +// .button-group { @include button-group-container($styles:false, $float:true); } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_buttons.scss b/app/styles/app/foundation/scss/foundation/components/_buttons.scss new file mode 100644 index 00000000..c7e7d455 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_buttons.scss @@ -0,0 +1,259 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-button-classes: $include-html-classes !default; + +// // We use these to build padding for buttons. +// $button-tny: rem-calc(10) !default; +// $button-sml: rem-calc(14) !default; +// $button-med: rem-calc(16) !default; +// $button-lrg: rem-calc(18) !default; + +// // We use this to control the display property. +// $button-display: inline-block !default; +// $button-margin-bottom: rem-calc(20) !default; + +// // We use these to control button text styles. +// $button-font-family: $body-font-family !default; +// $button-font-color: $white !default; +// $button-font-color-alt: $oil !default; +// $button-font-tny: rem-calc(11) !default; +// $button-font-sml: rem-calc(13) !default; +// $button-font-med: rem-calc(16) !default; +// $button-font-lrg: rem-calc(20) !default; +// $button-font-weight: $font-weight-normal !default; +// $button-font-align: center !default; + +// // We use these to control various hover effects. +// $button-function-factor: -20% !default; + +// // We use these to control button border styles. +// $button-border-width: 0 !default; +// $button-border-style: solid !default; +// $button-bg-color: $primary-color !default; +// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default; +// $button-border-color: $button-bg-hover !default; +// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default; +// $secondary-button-border-color: $secondary-button-bg-hover !default; +// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default; +// $success-button-border-color: $success-button-bg-hover !default; +// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default; +// $alert-button-border-color: $alert-button-bg-hover !default; +// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default; +// $warning-button-border-color: $warning-button-bg-hover !default; +// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default; +// $info-button-border-color: $info-button-bg-hover !default; + +// // We use this to set the default radius used throughout the core. +// $button-radius: $global-radius !default; +// $button-round: $global-rounded !default; + +// // We use this to set default opacity and cursor for disabled buttons. +// $button-disabled-opacity: 0.7 !default; +// $button-disabled-cursor: $cursor-default-value !default; + + +// // +// // @MIXIN +// // +// // We use this mixin to create a default button base. +// // +// // $style - Sets base styles. Can be set to false. Default: true. +// // $display - Used to control display property. Default: $button-display || inline-block + +// @mixin button-base($style:true, $display:$button-display) { +// @if $style { +// border-style: $button-border-style; +// border-width: $button-border-width; +// cursor: $cursor-pointer-value; +// font-family: $button-font-family; +// font-weight: $button-font-weight; +// line-height: normal; +// margin: 0 0 $button-margin-bottom; +// position: relative; +// text-decoration: none; +// text-align: $button-font-align; +// -webkit-appearance: none; +// border-radius:0; +// } +// @if $display { display: $display; } +// } + +// // @MIXIN +// // +// // We use this mixin to add button size styles +// // +// // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12) +// // $full-width - We can set $full-width:true to remove side padding extend width - Default: false + +// @mixin button-size($padding:$button-med, $full-width:false) { + +// // We control which padding styles come through, +// // these can be turned off by setting $padding:false +// @if $padding { +// padding-top: $padding; +// padding-#{$opposite-direction}: $padding * 2; +// padding-bottom: $padding + rem-calc(1); +// padding-#{$default-float}: $padding * 2; + +// // We control the font-size based on mixin input. +// @if $padding == $button-med { font-size: $button-font-med; } +// @else if $padding == $button-tny { font-size: $button-font-tny; } +// @else if $padding == $button-sml { font-size: $button-font-sml; } +// @else if $padding == $button-lrg { font-size: $button-font-lrg; } +// } + +// // We can set $full-width:true to remove side padding extend width. +// @if $full-width { +// // We still need to check if $padding is set. +// @if $padding { +// padding-top: $padding; +// padding-bottom: $padding + rem-calc(1); +// } @else if $padding == false { +// padding-top:0; +// padding-bottom:0; +// } +// padding-right: 0; +// padding-left: 0; +// width: 100%; +// } +// } + +// // @MIXIN +// // +// // we use this mixin to create the button hover and border colors + +// // @MIXIN +// // +// // We use this mixin to add button color styles +// // +// // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color. +// // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true +// // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false +// // $bg-hover - Button Hover Background Color. Default: $button-bg-hover +// // $border-color - Button Border Color. Default: $button-border-color +// @mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) { + +// // We control which background styles are used, +// // these can be removed by setting $bg:false +// @if $bg { + +// @if $bg-hover == null { +// $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor)); +// } + +// @if $border-color == null { +// $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor)); +// } + +// // This find the lightness percentage of the background color. +// $bg-lightness: lightness($bg); +// $bg-hover-lightness: lightness($bg-hover); + +// background-color: $bg; +// border-color: $border-color; +// &:hover, +// &:focus { background-color: $bg-hover; } + +// // We control the text color for you based on the background color. +// color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color); + +// &:hover, +// &:focus { +// color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color); +// } +// } + +// // We can set $disabled:true to create a disabled transparent button. +// @if $disabled { +// cursor: $button-disabled-cursor; +// opacity: $button-disabled-opacity; +// box-shadow: none; +// &:hover, +// &:focus { background-color: $bg; } +// } + +// // We can control how much button radius is used. +// @if $radius == true { @include radius($button-radius); } +// @else if $radius { @include radius($radius); } + +// } + +// // @MIXIN +// // +// // We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin" +// // +// // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12) +// // $bg - Primary color set in settings file. Default: $button-bg. +// // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false. +// // $full-width - We can set $full-width:true to remove side padding extend width. Default:false. +// // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false. +// // $is-prefix - Not used? Default:false. +// // $bg-hover - Button Hover Color - Default null - see button-style mixin +// // $border-color - Button Border Color - Default null - see button-style mixin +// // $transition - We can control whether or not to include the background-color transition property - Default:true. +// @mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) { +// @include button-base; +// @include button-size($padding, $full-width); +// @include button-style($bg, $radius, $disabled, $bg-hover, $border-color); + +// @if $transition { +// @include single-transition(background-color); +// } +// } + + +// @include exports("button") { +// @if $include-html-button-classes { + +// // Default styles applied outside of media query +// button, .button { +// @include button-base; +// @include button-size; +// @include button-style; + +// @include single-transition(background-color); + +// &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); } +// &.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); } +// &.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); } +// &.warning { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); } +// &.info { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); } + +// &.large { @include button-size($padding:$button-lrg); } +// &.small { @include button-size($padding:$button-sml); } +// &.tiny { @include button-size($padding:$button-tny); } +// &.expand { @include button-size($padding:null,$full-width:true); } + +// &.left-align { text-align: left; text-indent: rem-calc(12); } +// &.right-align { text-align: right; padding-right: rem-calc(12); } + +// &.radius { @include button-style($bg:false, $radius:true); } +// &.round { @include button-style($bg:false, $radius:$button-round); } + +// &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color); +// &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); } +// &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); } +// &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); } +// &.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); } +// &.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); } +// } +// } + +// //firefox 2px fix +// button::-moz-focus-inner {border:0; padding:0;} + +// @media #{$medium-up} { +// button, .button { +// @include button-base($style:false, $display:inline-block); +// @include button-size($padding:false, $full-width:false); +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_clearing.scss b/app/styles/app/foundation/scss/foundation/components/_clearing.scss new file mode 100644 index 00000000..767a713f --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_clearing.scss @@ -0,0 +1,247 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-clearing-classes: $include-html-classes !default; + +// // We use these to set the background colors for parts of Clearing. +// $clearing-bg: $oil !default; +// $clearing-caption-bg: $clearing-bg !default; +// $clearing-carousel-bg: rgba(51,51,51,0.8) !default; +// $clearing-img-bg: $clearing-bg !default; + +// // We use these to style the close button +// $clearing-close-color: $iron !default; +// $clearing-close-size: 30px !default; + +// // We use these to style the arrows +// $clearing-arrow-size: 12px !default; +// $clearing-arrow-color: $clearing-close-color !default; + +// // We use these to style captions +// $clearing-caption-font-color: $iron !default; +// $clearing-caption-font-size: 0.875em !default; +// $clearing-caption-padding: 10px 30px 20px !default; + +// // We use these to make the image and carousel height and style +// $clearing-active-img-height: 85% !default; +// $clearing-carousel-height: 120px !default; +// $clearing-carousel-thumb-width: 120px !default; +// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; + +// @include exports("clearing") { +// @if $include-html-clearing-classes { +// // We decided to not create a mixin for Clearing because it relies +// // on predefined classes and structure to work properly. +// // The variables above should give enough control. + +// /* Clearing Styles */ +// .clearing-thumbs, #{data('clearing')} { +// @include clearfix; +// margin-bottom: 0; +// margin-#{$default-float}: 0; +// list-style: none; + +// li { +// float: $default-float; +// margin-#{$opposite-direction}: 10px; +// } + +// &[class*="block-grid-"] li { +// margin-#{$opposite-direction}: 0; +// } +// } + +// .clearing-blackout { +// background: $clearing-bg; +// position: fixed; +// width: 100%; +// height: 100%; +// top: 0; +// #{$default-float}: 0; +// z-index: 998; + +// .clearing-close { display: block; } +// } + +// .clearing-container { +// position: relative; +// z-index: 998; +// height: 100%; +// overflow: hidden; +// margin: 0; +// } + +// .clearing-touch-label { +// position: absolute; +// top: 50%; +// left: 50%; +// color: $base; +// font-size: 0.6em; +// } + +// .visible-img { +// height: 95%; +// position: relative; + +// img { +// position: absolute; +// #{$default-float}: 50%; +// top: 50%; +// margin-#{$default-float}: -50%; +// max-height: 100%; +// max-width: 100%; +// } +// } + +// .clearing-caption { +// color: $clearing-caption-font-color; +// font-size: $clearing-caption-font-size; +// line-height: 1.3; +// margin-bottom: 0; +// text-align: center; +// bottom: 0; +// background: $clearing-caption-bg; +// width: 100%; +// padding: $clearing-caption-padding; +// position: absolute; +// #{$default-float}: 0; +// } + +// .clearing-close { +// z-index: 999; +// padding-#{$default-float}: 20px; +// padding-top: 10px; +// font-size: $clearing-close-size; +// line-height: 1; +// color: $clearing-close-color; +// display: none; + +// &:hover, +// &:focus { color: $iron; } +// } + +// .clearing-assembled .clearing-container { height: 100%; +// .carousel > ul { display: none; } +// } + +// // If you want to show a lightbox, but only have a single image come through as the thumbnail +// .clearing-feature li { +// display: none; +// &.clearing-featured-img { +// display: block; +// } +// } + +// // Large screen overrides +// @media #{$medium-up} { +// .clearing-main-prev, +// .clearing-main-next { +// position: absolute; +// height: 100%; +// width: 40px; +// top: 0; +// & > span { +// position: absolute; +// top: 50%; +// display: block; +// width: 0; +// height: 0; +// border: solid $clearing-arrow-size; +// &:hover { opacity: 0.8; } +// } +// } +// .clearing-main-prev { +// #{$default-float}: 0; +// & > span { +// #{$default-float}: 5px; +// border-color: transparent; +// border-#{$opposite-direction}-color: $clearing-arrow-color; +// } +// } +// .clearing-main-next { +// #{$opposite-direction}: 0; +// & > span { +// border-color: transparent; +// border-#{$default-float}-color: $clearing-arrow-color; +// } +// } + +// .clearing-main-prev.disabled, +// .clearing-main-next.disabled { opacity: 0.3; } + +// .clearing-assembled .clearing-container { + +// .carousel { +// background: $clearing-carousel-bg; +// height: $clearing-carousel-height; +// margin-top: 10px; +// text-align: center; + +// & > ul { +// display: inline-block; +// z-index: 999; +// height: 100%; +// position: relative; +// float: none; + +// li { +// display: block; +// width: $clearing-carousel-thumb-width; +// min-height: inherit; +// float: $default-float; +// overflow: hidden; +// margin-#{$opposite-direction}: 0; +// padding: 0; +// position: relative; +// cursor: $cursor-pointer-value; +// opacity: 0.4; +// clear: none; + +// &.fix-height { +// img { +// height: 100%; +// max-width: none; +// } +// } + +// a.th { +// border: none; +// box-shadow: none; +// display: block; +// } + +// img { +// cursor: $cursor-pointer-value !important; +// width: 100% !important; +// } + +// &.visible { opacity: 1; } +// &:hover { opacity: 0.8; } +// } +// } +// } + +// .visible-img { +// background: $clearing-img-bg; +// overflow: hidden; +// height: $clearing-active-img-height; +// } +// } + +// .clearing-close { +// position: absolute; +// top: 10px; +// #{$opposite-direction}: 20px; +// padding-#{$default-float}: 0; +// padding-top: 0; +// } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss b/app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss new file mode 100644 index 00000000..63182eea --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_dropdown-buttons.scss @@ -0,0 +1,130 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-button-classes: $include-html-classes !default; + +// // We use these to set the color of the pip in dropdown buttons +// $dropdown-button-pip-color: $white !default; +// $dropdown-button-pip-color-alt: $oil !default; + +// $button-pip-tny: rem-calc(6) !default; +// $button-pip-sml: rem-calc(7) !default; +// $button-pip-med: rem-calc(9) !default; +// $button-pip-lrg: rem-calc(11) !default; + +// // We use these to style tiny dropdown buttons +// $dropdown-button-padding-tny: $button-pip-tny * 7 !default; +// $dropdown-button-pip-size-tny: $button-pip-tny !default; +// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default; +// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default; + +// // We use these to style small dropdown buttons +// $dropdown-button-padding-sml: $button-pip-sml * 7 !default; +// $dropdown-button-pip-size-sml: $button-pip-sml !default; +// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default; +// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default; + +// // We use these to style medium dropdown buttons +// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default; +// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default; +// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default; +// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default; + +// // We use these to style large dropdown buttons +// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default; +// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default; +// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default; +// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; + +// // @mixins +// // +// // Dropdown Button Mixin +// // +// // We use this mixin to build off of the button mixin and add dropdown button styles +// // +// // $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large] +// // $pip-color - Color of the little triangle that points to the dropdown. Default: $white. +// // $base-style - Add in base-styles. This can be set to false. Default:true + +// @mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) { + +// // We add in base styles, but they can be negated by setting to 'false'. +// @if $base-style { +// position: relative; +// outline: none; + +// // This creates the base styles for the triangle pip +// &::after { +// position: absolute; +// content: ""; +// width: 0; +// height: 0; +// display: block; +// border-style: solid; +// border-color: $dropdown-button-pip-color transparent transparent transparent; +// top: 50%; +// } +// } + +// // If we're dealing with tiny buttons, use these styles +// @if $padding == tiny { +// padding-#{$opposite-direction}: $dropdown-button-padding-tny; +// &:after { +// border-width: $dropdown-button-pip-size-tny; +// #{$opposite-direction}: $dropdown-button-pip-opposite-tny; +// margin-top: $dropdown-button-pip-top-tny; +// } +// } + +// // If we're dealing with small buttons, use these styles +// @if $padding == small { +// padding-#{$opposite-direction}: $dropdown-button-padding-sml; +// &::after { +// border-width: $dropdown-button-pip-size-sml; +// #{$opposite-direction}: $dropdown-button-pip-opposite-sml; +// margin-top: $dropdown-button-pip-top-sml; +// } +// } + +// // If we're dealing with default (medium) buttons, use these styles +// @if $padding == medium { +// padding-#{$opposite-direction}: $dropdown-button-padding-med; +// &::after { +// border-width: $dropdown-button-pip-size-med; +// #{$opposite-direction}: $dropdown-button-pip-opposite-med; +// margin-top: $dropdown-button-pip-top-med; +// } +// } + +// // If we're dealing with large buttons, use these styles +// @if $padding == large { +// padding-#{$opposite-direction}: $dropdown-button-padding-lrg; +// &::after { +// border-width: $dropdown-button-pip-size-lrg; +// #{$opposite-direction}: $dropdown-button-pip-opposite-lrg; +// margin-top: $dropdown-button-pip-top-lrg; +// } +// } + +// // We can control the pip color. We didn't use logic in this case, just set it and forget it. +// @if $pip-color { +// &::after { border-color: $pip-color transparent transparent transparent; } +// } +// } + +// @include exports("dropdown-button") { +// @if $include-html-button-classes { +// .dropdown.button, button.dropdown { @include dropdown-button; +// &.tiny { @include dropdown-button(tiny,$base-style:false); } +// &.small { @include dropdown-button(small,$base-style:false); } +// &.large { @include dropdown-button(large,$base-style:false); } +// &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_dropdown.scss b/app/styles/app/foundation/scss/foundation/components/_dropdown.scss new file mode 100644 index 00000000..ab290ecb --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_dropdown.scss @@ -0,0 +1,262 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-dropdown-classes: $include-html-classes !default; + +// // We use these to controls height and width styles. +// $f-dropdown-max-width: 200px !default; +// $f-dropdown-height: auto !default; +// $f-dropdown-max-height: none !default; + +// // Used for bottom position +// $f-dropdown-margin-top: 2px !default; + +// // Used for right position +// $f-dropdown-margin-left: $f-dropdown-margin-top !default; + +// // Used for left position +// $f-dropdown-margin-right: $f-dropdown-margin-top !default; + +// // Used for top position +// $f-dropdown-margin-bottom: $f-dropdown-margin-top !default; + +// // We use this to control the background color +// $f-dropdown-bg: $white !default; + +// // We use this to set the border styles for dropdowns. +// $f-dropdown-border-style: solid !default; +// $f-dropdown-border-width: 1px !default; +// $f-dropdown-border-color: scale-color($white, $lightness: -20%) !default; + +// // We use these to style the triangle pip. +// $f-dropdown-triangle-size: 6px !default; +// $f-dropdown-triangle-color: $white !default; +// $f-dropdown-triangle-side-offset: 10px !default; + +// // We use these to control styles for the list elements. +// $f-dropdown-list-style: none !default; +// $f-dropdown-font-color: $charcoal !default; +// $f-dropdown-font-size: rem-calc(14) !default; +// $f-dropdown-list-padding: rem-calc(5, 10) !default; +// $f-dropdown-line-height: rem-calc(18) !default; +// $f-dropdown-list-hover-bg: $smoke !default; +// $dropdown-mobile-default-float: 0 !default; + +// // We use this to control the styles for when the dropdown has custom content. +// $f-dropdown-content-padding: rem-calc(20) !default; + +// // Default radius for dropdown. +// $f-dropdown-radius: $global-radius !default; + +// // +// // @mixins +// // +// // +// // NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.; +// // We use this to style the dropdown container element. +// // $content-list - Sets list-style. Default: list. Options: [list, content] +// // $triangle - Sets if dropdown has triangle. Default:true. +// // $max-width - Default: $f-dropdown-max-width || 200px. +// @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) { +// position: absolute; +// left: -9999px; +// list-style: $f-dropdown-list-style; +// margin-#{$default-float}: 0; +// outline: none; + +// > *:first-child { margin-top: 0; } +// > *:last-child { margin-bottom: 0; } + +// @if $content == list { +// width: 100%; +// max-height: $f-dropdown-max-height; +// height: $f-dropdown-height; +// background: $f-dropdown-bg; +// border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; +// font-size: $f-dropdown-font-size; +// z-index: 89; +// } +// @else if $content == content { +// padding: $f-dropdown-content-padding; +// width: 100%; +// height: $f-dropdown-height; +// max-height: $f-dropdown-max-height; +// background: $f-dropdown-bg; +// border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; +// font-size: $f-dropdown-font-size; +// z-index: 89; +// } + +// @if $triangle == bottom { +// margin-top: $f-dropdown-margin-top; + +// &:before { +// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom); +// position: absolute; +// top: -($f-dropdown-triangle-size * 2); +// #{$default-float}: $f-dropdown-triangle-side-offset; +// z-index: 89; +// } +// &:after { +// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom); +// position: absolute; +// top: -(($f-dropdown-triangle-size + 1) * 2); +// #{$default-float}: $f-dropdown-triangle-side-offset - 1; +// z-index: 88; +// } + +// &.right:before { +// #{$default-float}: auto; +// #{$opposite-direction}: $f-dropdown-triangle-side-offset; +// } +// &.right:after { +// #{$default-float}: auto; +// #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1; +// } +// } + +// @if $triangle == $default-float { +// margin-top: 0; +// margin-#{$default-float}: $f-dropdown-margin-right; + +// &:before { +// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction}); +// position: absolute; +// top: $f-dropdown-triangle-side-offset; +// #{$default-float}: -($f-dropdown-triangle-size * 2); +// z-index: 89; +// } +// &:after { +// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction}); +// position: absolute; +// top: $f-dropdown-triangle-side-offset - 1; +// #{$default-float}: -($f-dropdown-triangle-size * 2) - 2; +// z-index: 88; +// } + +// } + +// @if $triangle == $opposite-direction { +// margin-top: 0; +// margin-#{$default-float}: -$f-dropdown-margin-right; + +// &:before { +// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float}); +// position: absolute; +// top: $f-dropdown-triangle-side-offset; +// #{$opposite-direction}: -($f-dropdown-triangle-size * 2); +// #{$default-float}: auto; +// z-index: 89; +// } +// &:after { +// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float}); +// position: absolute; +// top: $f-dropdown-triangle-side-offset - 1; +// #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2; +// #{$default-float}: auto; +// z-index: 88; +// } + +// } + +// @if $triangle == top { +// margin-top: -$f-dropdown-margin-bottom; +// margin-left: 0; + +// &:before { +// @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top); +// position: absolute; +// top: auto; +// bottom: -($f-dropdown-triangle-size * 2); +// #{$default-float}: $f-dropdown-triangle-side-offset; +// #{$opposite-direction}: auto; +// z-index: 89; +// } +// &:after { +// @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top); +// position: absolute; +// top: auto; +// bottom: -($f-dropdown-triangle-size * 2) - 2; +// #{$default-float}: $f-dropdown-triangle-side-offset - 1; +// #{$opposite-direction}: auto; +// z-index: 88; +// } + +// } + +// @if $max-width { max-width: $max-width; } +// @else { max-width: $f-dropdown-max-width; } + +// } + +// // @MIXIN +// // +// // We use this to style the list elements or content inside the dropdown. + +// @mixin dropdown-style { +// font-size: $f-dropdown-font-size; +// cursor: $cursor-pointer-value; + +// line-height: $f-dropdown-line-height; +// margin: 0; + +// &:hover, +// &:focus { background: $f-dropdown-list-hover-bg; } + +// &.radius { @include radius($f-dropdown-radius); } + +// a { +// display: block; +// padding: $f-dropdown-list-padding; +// color: $f-dropdown-font-color; +// } +// } + +// @include exports("dropdown") { +// @if $include-html-dropdown-classes { + +// /* Foundation Dropdowns */ +// .f-dropdown { +// @include dropdown-container(list, bottom); + +// &.drop-#{$opposite-direction} { +// @include dropdown-container(list, #{$default-float}); +// } + +// &.drop-#{$default-float} { +// @include dropdown-container(list, #{$opposite-direction}); +// } + +// &.drop-top { +// @include dropdown-container(list, top); +// } +// // max-width: none; + +// li { @include dropdown-style; } + +// // You can also put custom content in these dropdowns +// &.content { @include dropdown-container(content, $triangle:false); } + +// // Sizes +// &.tiny { max-width: 200px; } +// &.small { max-width: 300px; } +// &.medium { max-width: 500px; } +// &.large { max-width: 800px; } +// &.mega { +// width:100%!important; +// max-width:100%!important; + +// &.open{ +// left:0!important; +// } +// } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_flex-video.scss b/app/styles/app/foundation/scss/foundation/components/_flex-video.scss new file mode 100644 index 00000000..a35af09b --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_flex-video.scss @@ -0,0 +1,51 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-media-classes: $include-html-classes !default; + +// // We use these to control video container padding and margins +// $flex-video-padding-top: rem-calc(25) !default; +// $flex-video-padding-bottom: 67.5% !default; +// $flex-video-margin-bottom: rem-calc(16) !default; + +// // We use this to control widescreen bottom padding +// $flex-video-widescreen-padding-bottom: 56.34% !default; + +// // +// // @mixins +// // + +// @mixin flex-video-container { +// position: relative; +// padding-top: $flex-video-padding-top; +// padding-bottom: $flex-video-padding-bottom; +// height: 0; +// margin-bottom: $flex-video-margin-bottom; +// overflow: hidden; + +// &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; } +// &.vimeo { padding-top: 0; } + +// iframe, +// object, +// embed, +// video { +// position: absolute; +// top: 0; +// #{$default-float}: 0; +// width: 100%; +// height: 100%; +// } +// } + +// @include exports("flex-video") { +// @if $include-html-media-classes { +// .flex-video { @include flex-video-container; } +// } +// } \ No newline at end of file diff --git a/app/styles/app/foundation/scss/foundation/components/_forms.scss b/app/styles/app/foundation/scss/foundation/components/_forms.scss new file mode 100644 index 00000000..2191b6c3 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_forms.scss @@ -0,0 +1,570 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "buttons"; + +// // +// // @variables +// // +// $include-html-form-classes: $include-html-classes !default; + +// // We use this to set the base for lots of form spacing and positioning styles +// $form-spacing: rem-calc(16) !default; + +// // We use these to style the labels in different ways +// $form-label-pointer: pointer !default; +// $form-label-font-size: rem-calc(14) !default; +// $form-label-font-weight: $font-weight-normal !default; +// $form-label-line-height: 1.5 !default; +// $form-label-font-color: scale-color($black, $lightness: 30%) !default; +// $form-label-small-transform: capitalize !default; +// $form-label-bottom-margin: 0 !default; +// $input-font-family: inherit !default; +// $input-font-color: rgba(0,0,0,0.75) !default; +// $input-font-size: rem-calc(14) !default; +// $input-bg-color: $white !default; +// $input-focus-bg-color: scale-color($white, $lightness: -2%) !default; +// $input-border-color: scale-color($white, $lightness: -20%) !default; +// $input-focus-border-color: scale-color($white, $lightness: -40%) !default; +// $input-border-style: solid !default; +// $input-border-width: 1px !default; +// $input-border-radius: $global-radius !default; +// $input-disabled-bg: $gainsboro !default; +// $input-disabled-cursor: $cursor-default-value !default; +// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default; +// $input-include-glowing-effect: true !default; + +// // We use these to style the fieldset border and spacing. +// $fieldset-border-style: solid !default; +// $fieldset-border-width: 1px !default; +// $fieldset-border-color: $gainsboro !default; +// $fieldset-padding: rem-calc(20) !default; +// $fieldset-margin: rem-calc(18 0) !default; + +// // We use these to style the legends when you use them +// $legend-bg: $white !default; +// $legend-font-weight: $font-weight-bold !default; +// $legend-padding: rem-calc(0 3) !default; + +// // We use these to style the prefix and postfix input elements +// $input-prefix-bg: scale-color($white, $lightness: -5%) !default; +// $input-prefix-border-color: scale-color($white, $lightness: -20%) !default; +// $input-prefix-border-size: 1px !default; +// $input-prefix-border-type: solid !default; +// $input-prefix-overflow: hidden !default; +// $input-prefix-font-color: $oil !default; +// $input-prefix-font-color-alt: $white !default; + +// // We use this setting to turn on/off HTML5 number spinners (the up/down arrows) +// $input-number-spinners: true !default; + +// // We use these to style the error states for inputs and labels +// $input-error-message-padding: rem-calc(6 9 9) !default; +// $input-error-message-top: -1px !default; +// $input-error-message-font-size: rem-calc(12) !default; +// $input-error-message-font-weight: $font-weight-normal !default; +// $input-error-message-font-style: italic !default; +// $input-error-message-font-color: $white !default; +// $input-error-message-bg-color: $alert-color !default; +// $input-error-message-font-color-alt: $oil !default; + +// // We use this to style the glowing effect of inputs when focused +// $glowing-effect-fade-time: 0.45s !default; +// $glowing-effect-color: $input-focus-border-color !default; + +// // Select variables +// $select-bg-color: $ghost !default; +// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; + +// // +// // @MIXINS +// // + +// // We use this mixin to give us form styles for rows inside of forms +// @mixin form-row-base { +// .row { margin: 0 ((-$form-spacing) / 2); + +// .column, +// .columns { padding: 0 ($form-spacing / 2); } + +// // Use this to collapse the margins of a form row +// &.collapse { margin: 0; + +// .column, +// .columns { padding: 0; } +// input { +// @include side-radius($opposite-direction, 0); +// } + +// } +// } +// input.column, +// input.columns, +// textarea.column, +// textarea.columns { padding-#{$default-float}: ($form-spacing / 2); } +// } + +// // @MIXIN +// // +// // We use this mixin to give all basic form elements their style +// @mixin form-element { +// background-color: $input-bg-color; +// font-family: $input-font-family; +// border: { +// style: $input-border-style; +// width: $input-border-width; +// color: $input-border-color; +// } +// box-shadow: $input-box-shadow; +// color: $input-font-color; +// display: block; +// font-size: $input-font-size; +// margin: 0 0 $form-spacing 0; +// padding: $form-spacing / 2; +// height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); +// width: 100%; +// @include box-sizing(border-box); +// @if $input-include-glowing-effect { +// @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color); +// } +// // Basic focus styles +// &:focus { +// background: $input-focus-bg-color; +// border-color: $input-focus-border-color; +// outline: none; +// } +// // Disbaled Styles +// &:disabled { +// background-color: $input-disabled-bg; +// cursor: $input-disabled-cursor; +// } + +// // Disabled background input background color +// &[disabled], +// &[readonly], +// fieldset[disabled] & { +// background-color: $input-disabled-bg; +// cursor: $input-disabled-cursor; +// } +// } + +// // @MIXIN +// // +// // We use this mixin to create form labels +// // +// // $alignment - Alignment options. Default: false. Options: [right, inline, false] +// // $base-style - Control whether or not the base styles come through. Default: true. +// @mixin form-label($alignment:false, $base-style:true) { + +// // Control whether or not the base styles come through. +// @if $base-style { +// font-size: $form-label-font-size; +// color: $form-label-font-color; +// cursor: $form-label-pointer; +// display: block; +// font-weight: $form-label-font-weight; +// line-height: $form-label-line-height; +// margin-bottom: $form-label-bottom-margin; +// } + +// // Alignment options +// @if $alignment == right { +// float: none !important; +// text-align: right; +// } +// @else if $alignment == inline { +// margin: 0 0 $form-spacing 0; +// padding: $form-spacing / 2 + rem-calc($input-border-width) 0; +// } +// } + +// // We use this mixin to create postfix/prefix form Labels +// @mixin prefix-postfix-base { +// display: block; +// position: relative; +// z-index: 2; +// text-align: center; +// width: 100%; +// padding-top: 0; +// padding-bottom: 0; +// border-style: $input-prefix-border-type; +// border-width: $input-prefix-border-size; +// overflow: $input-prefix-overflow; +// font-size: $form-label-font-size; +// height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); +// line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); +// } + +// // @MIXIN +// // +// // We use this mixin to create prefix label styles +// // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default; +// // $is-button - Toggle position settings if prefix is a button. Default:false +// // +// @mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) { + +// @if $bg { +// $bg-lightness: lightness($bg); +// background: $bg; +// border-#{$opposite-direction}: none; + +// // Control the font color based on background brightness +// @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; } +// @else { color: $input-prefix-font-color-alt; } +// } + +// @if $border { +// border-color: $border; +// } + +// @if $is-button { +// padding-#{$default-float}: 0; +// padding-#{$opposite-direction}: 0; +// padding-top: 0; +// padding-bottom: 0; +// text-align: center; +// border: none; +// } + +// } + +// // @MIXIN +// // +// // We use this mixin to create postfix label styles +// // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default; +// // $is-button - Toggle position settings if prefix is a button. Default: false +// @mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) { + +// @if $bg { +// $bg-lightness: lightness($bg); +// background: $bg; +// border-#{$default-float}: none; + +// // Control the font color based on background brightness +// @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; } +// @else { color: $input-prefix-font-color-alt; } +// } + +// @if $border { +// border-color: $border; +// } + +// @if $is-button { +// padding-#{$default-float}: 0; +// padding-#{$opposite-direction}: 0; +// padding-top: 0; +// padding-bottom: 0; +// text-align: center; +// border: none; +// } + +// } + +// // We use this mixin to style fieldsets +// @mixin fieldset { +// border: $fieldset-border-width $fieldset-border-style $fieldset-border-color; +// padding: $fieldset-padding; +// margin: $fieldset-margin; + +// // and legend styles +// legend { +// font-weight: $legend-font-weight; +// background: $legend-bg; +// padding: $legend-padding; +// margin: 0; +// margin-#{$default-float}: rem-calc(-3); +// } +// } + +// // @MIXIN +// // +// // We use this mixin to control border and background color of error inputs +// // $color - Default: $alert-color (found in settings file) +// @mixin form-error-color($color:$alert-color) { +// border-color: $color; +// background-color: rgba($color, 0.1); + +// // Go back to normal on focus +// &:focus { +// background: $input-focus-bg-color; +// border-color: $input-focus-border-color; +// } +// } + +// // @MIXIN +// // +// // We use this simple mixin to style labels for error inputs +// // $color - Default:$alert-color. Found in settings file +// @mixin form-label-error-color($color:$alert-color) { color: $color; } + +// // @MIXIN +// // +// // We use this mixin to create error message styles +// // $bg - Default: $alert-color (Found in settings file) +// @mixin form-error-message($bg:$input-error-message-bg-color) { +// display: block; +// padding: $input-error-message-padding; +// margin-top: $input-error-message-top; +// margin-bottom: $form-spacing; +// font-size: $input-error-message-font-size; +// font-weight: $input-error-message-font-weight; +// font-style: $input-error-message-font-style; + +// // We can control the text color based on the brightness of the background. +// $bg-lightness: lightness($bg); +// background: $bg; +// @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; } +// @else { color: $input-error-message-font-color-alt; } +// } + +// // We use this mixin to style select elements +// @mixin form-select { +// -webkit-appearance: none !important; +// border-radius: 0; +// background-color: $select-bg-color; + +// // Hide the dropdown arrow shown in newer IE versions +// &::-ms-expand { +// display: none; +// } + +// // The custom arrow has some fake horizontal padding so we can align it +// // from the right side of the element without relying on CSS3 +// background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); + +// // We can safely use leftmost and rightmost now +// background-position: if($text-direction == 'rtl', 0%, 100%) center; + +// background-repeat: no-repeat; +// border: { +// style: $input-border-style; +// width: $input-border-width; +// color: $input-border-color; +// } +// padding: ($form-spacing / 2); +// font-size: $input-font-size; +// font-family: $body-font-family; +// color: $input-font-color; +// line-height: normal; +// @include radius(0); +// &.radius { @include radius($global-radius); } +// &:hover { +// background-color: $select-hover-bg-color; +// border-color: $input-focus-border-color; +// } +// // Disabled Styles +// &:disabled { +// background-color: $input-disabled-bg; +// cursor: $input-disabled-cursor; +// } +// } + +// // We use this mixin to turn on/off HTML5 number spinners +// @mixin html5number($browser, $on:true) { +// @if $on==false { +// @if $browser==webkit { +// -webkit-appearance: none; +// margin: 0; +// } @else if $browser==moz { +// -moz-appearance: textfield; +// } +// } +// } + +// @include exports("form") { +// @if $include-html-form-classes { +// /* Standard Forms */ +// form { margin: 0 0 $form-spacing; } + +// /* Using forms within rows, we need to set some defaults */ +// form .row { @include form-row-base; } + +// /* Label Styles */ +// label { @include form-label; +// &.right { @include form-label(right,false); } +// &.inline { @include form-label(inline,false); } +// /* Styles for required inputs */ +// small { +// text-transform: $form-label-small-transform; +// color: scale-color($form-label-font-color, $lightness: 15%); +// } +// } + +// /* Attach elements to the beginning or end of an input */ +// .prefix, +// .postfix { @include prefix-postfix-base; } + +// /* Adjust padding, alignment and radius if pre/post element is a button */ +// .postfix.button { @include button-size(false,false); @include postfix(false, false, true); } +// .prefix.button { @include button-size(false,false); @include prefix(false, false, true); } + +// .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); } +// .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); } +// .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); } +// .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); } + +// /* Separate prefix and postfix styles when on span or label so buttons keep their own */ +// span.prefix,label.prefix { @include prefix(); } +// span.postfix,label.postfix { @include postfix(); } + +// /* We use this to get basic styling on all basic form elements */ +// #{text-inputs(all, 'input')} { +// -webkit-appearance: none; +// border-radius: 0; +// @include form-element; +// @if $input-include-glowing-effect == false { +// @include single-transition(all, 0.15s, linear); +// } +// &.radius { +// @include radius($input-border-radius); +// } +// } + +// form { +// .row { +// .prefix-radius.row.collapse { +// input, +// textarea, +// select { @include radius(0); @include side-radius($opposite-direction, $button-radius); } +// .prefix { @include radius(0); @include side-radius($default-float, $button-radius); } +// } +// .postfix-radius.row.collapse { +// input, +// textarea, +// select { @include radius(0); @include side-radius($default-float, $button-radius); } +// .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); } +// } +// .prefix-round.row.collapse { +// input, +// textarea, +// select { @include radius(0); @include side-radius($opposite-direction, $button-round); } +// .prefix { @include radius(0); @include side-radius($default-float, $button-round); } +// } +// .postfix-round.row.collapse { +// input, +// textarea, +// select { @include radius(0); @include side-radius($default-float, $button-round); } +// .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); } +// } +// } +// } + +// input[type="submit"] { +// -webkit-appearance: none; +// border-radius: 0; +// } + +// /* Respect enforced amount of rows for textarea */ +// textarea[rows] { +// height: auto; +// } + +// /* Not allow resize out of parent */ +// textarea { +// max-width: 100%; +// } + +// /* Add height value for select elements to match text input height */ +// select { +// @include form-select; +// height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); +// } + +// /* Adjust margin for form elements below */ +// input[type="file"], +// input[type="checkbox"], +// input[type="radio"], +// select { +// margin: 0 0 $form-spacing 0; +// } + +// input[type="checkbox"] + label, +// input[type="radio"] + label { +// display: inline-block; +// margin-#{$default-float}: $form-spacing * .5; +// margin-#{$opposite-direction}: $form-spacing; +// margin-bottom: 0; +// vertical-align: baseline; +// } + +// /* Normalize file input width */ +// input[type="file"] { +// width:100%; +// } + +// /* HTML5 Number spinners settings */ +// input[type=number] { +// @include html5number(moz, $input-number-spinners) +// } +// input[type="number"]::-webkit-inner-spin-button, +// input[type="number"]::-webkit-outer-spin-button { +// @include html5number(webkit, $input-number-spinners); +// } + +// /* We add basic fieldset styling */ +// fieldset { +// @include fieldset; +// } + +// /* Error Handling */ + +// #{data('abide')} { +// .error small.error, .error span.error, span.error, small.error { +// @include form-error-message; +// } +// span.error, small.error { display: none; } +// } + +// span.error, small.error { +// @include form-error-message; +// } + +// .error { +// input, +// textarea, +// select { +// margin-bottom: 0; +// } + +// input[type="checkbox"], +// input[type="radio"] { +// margin-bottom: $form-spacing +// } + +// label, +// label.error { +// @include form-label-error-color; +// } + +// small.error { +// @include form-error-message; +// } + +// > label { +// > small { +// color: scale-color($form-label-font-color, $lightness: 15%); +// background: transparent; +// padding: 0; +// text-transform: $form-label-small-transform; +// font-style: normal; +// font-size: 60%; +// margin: 0; +// display: inline; +// } +// } + +// span.error-message { +// display: block; +// } +// } + +// input.error, +// textarea.error, +// select.error { +// margin-bottom: 0; +// } +// label.error { @include form-label-error-color; } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_global.scss b/app/styles/app/foundation/scss/foundation/components/_global.scss new file mode 100644 index 00000000..cb2a9db4 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_global.scss @@ -0,0 +1,480 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "../functions"; +// +// Foundation Variables +// + +// Data attribute namespace +// styles get applied to [data-mysite-plugin], etc +$namespace: false !default; + +// The default font-size is set to 100% of the browser style sheet (usually 16px) +// for compatibility with browser-based text zoom or user-set defaults. + +// Since the typical default browser font-size is 16px, that makes the calculation for grid size. +// If you want your base font-size to be different and not have it affect the grid breakpoints, +// set $rem-base to $base-font-size and make sure $base-font-size is a px value. +$base-font-size: 100% !default; + +// $base-line-height is 24px while $base-font-size is 16px +$base-line-height: 1.5 !default; + +// +// Global Foundation Mixins +// + +// @mixins +// +// We use this to control border radius. +// $radius - Default: $global-radius || 4px +@mixin radius($radius:$global-radius) { + @if $radius { + border-radius: $radius; + } +} + +// @mixins +// +// We use this to create equal side border radius on elements. +// $side - Options: left, right, top, bottom +@mixin side-radius($side, $radius:$global-radius) { + @if ($side == left or $side == right) { + -webkit-border-bottom-#{$side}-radius: $radius; + -webkit-border-top-#{$side}-radius: $radius; + border-bottom-#{$side}-radius: $radius; + border-top-#{$side}-radius: $radius; + } @else { + -webkit-#{$side}-left-radius: $radius; + -webkit-#{$side}-right-radius: $radius; + border-#{$side}-left-radius: $radius; + border-#{$side}-right-radius: $radius; + } +} + +// @mixins +// +// We can control whether or not we have inset shadows edges. +// $active - Default: true, Options: false +@mixin inset-shadow($active:true) { + box-shadow: $shiny-edge-size $shiny-edge-color inset; + + @if $active { &:active { + box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } } +} + +// @mixins +// +// We use this to add transitions to elements +// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties +// $speed - Default: 300ms +// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/ +@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) { + transition: $property $speed $ease; +} + +// @mixins +// +// We use this to add box-sizing across browser prefixes +@mixin box-sizing($type:border-box) { + -webkit-box-sizing: $type; // Android < 2.3, iOS < 4 + -moz-box-sizing: $type; // Firefox < 29 + box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1 +} + +// @mixins +// +// We use this to create isosceles triangles +// $triangle-size - Used to set border-size. No default, set a px or em size. +// $triangle-color - Used to set border-color which makes up triangle. No default +// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right +@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { + content: ""; + display: block; + width: 0; + height: 0; + border: inset $triangle-size; + @if ($triangle-direction == top) { + border-color: $triangle-color transparent transparent transparent; + border-top-style: solid; + } + @if ($triangle-direction == bottom) { + border-color: transparent transparent $triangle-color transparent; + border-bottom-style: solid; + } + @if ($triangle-direction == left) { + border-color: transparent transparent transparent $triangle-color; + border-left-style: solid; + } + @if ($triangle-direction == right) { + border-color: transparent $triangle-color transparent transparent; + border-right-style: solid; + } +} + +// @mixins +// +// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon +// $width - Width of hamburger icon in rem +// $left - If false, icon will be centered horizontally || explicitly set value in rem +// $top - If false, icon will be centered vertically || explicitly set value in rem +// $thickness - thickness of lines in hamburger icon, set value in px +// $gap - spacing between the lines in hamburger icon, set value in px +// $color - icon color +// $hover-color - icon color during hover +// $offcanvas - Set to true of @include in offcanvas +@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) { + span::after { + content: ""; + position: absolute; + display: block; + height: 0; + + @if $offcanvas { + @if $top { + top: $top; + } + @else { + top: 50%; + margin-top: (-$width/2); + } + @if $left { + left: $left; + } + @else { + left: ($tabbar-menu-icon-width - $width)/2; + } + } + @else { + top: 50%; + margin-top: -($width/2); + #{$opposite-direction}: $topbar-link-padding; + } + + box-shadow: + 0 0 0 $thickness $color, + 0 $gap + $thickness 0 $thickness $color, + 0 (2 * $gap + 2*$thickness) 0 $thickness $color; + width: $width; + } + span:hover:after { + box-shadow: + 0 0 0 $thickness $hover-color, + 0 $gap + $thickness 0 $thickness $hover-color, + 0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color; + } +} + +// We use this to do clear floats +@mixin clearfix { + &:before, &:after { content: " "; display: table; } + &:after { clear: both; } +} + +// @mixins +// +// We use this to add a glowing effect to block elements +// $selector - Used for selector state. Default: focus, Options: hover, active, visited +// $fade-time - Default: 300ms +// $glowing-effect-color - Default: fade-out($primary-color, .25) +@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) { + transition: box-shadow $fade-time, border-color $fade-time ease-in-out; + + &:#{$selector} { + box-shadow: 0 0 5px $glowing-effect-color; + border-color: $glowing-effect-color; + } +} + +// @mixins +// +// We use this to translate elements in 2D +// $horizontal: Default: 0 +// $vertical: Default: 0 +@mixin translate2d($horizontal:0, $vertical:0) { + transform: translate($horizontal,$vertical) +} + +// @mixins +// +// Makes an element visually hidden, but accessible. +// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +@mixin element-invisible { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + +// @mixins +// +// Turns off the element-invisible effect. +@mixin element-invisible-off { + position: static !important; + height: auto; + width: auto; + overflow: visible; + clip: auto; +} + +$white : #FFFFFF !default; +$ghost : #FAFAFA !default; +$snow : #F9F9F9 !default; +$vapor : #F6F6F6 !default; +$white-smoke : #F5F5F5 !default; +$silver : #EFEFEF !default; +$smoke : #EEEEEE !default; +$gainsboro : #DDDDDD !default; +$iron : #CCCCCC !default; +$base : #AAAAAA !default; +$aluminum : #999999 !default; +$jumbo : #888888 !default; +$monsoon : #777777 !default; +$steel : #666666 !default; +$charcoal : #555555 !default; +$tuatara : #444444 !default; +$oil : #333333 !default; +$jet : #222222 !default; +$black : #000000 !default; + +// We use these as default colors throughout +$primary-color: #008CBA !default; // bondi-blue +$secondary-color: #e7e7e7 !default; // white-lilac +$alert-color: #f04124 !default; // cinnabar +$success-color: #43AC6A !default; // sea-green +$warning-color: #f08a24 !default; // carrot +$info-color: #a0d3e8 !default; // cornflower + +// We use these to define default font stacks +$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default; +$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default; +$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default; + +// We use these to define default font weights +$font-weight-normal: normal !default; +$font-weight-bold: bold !default; + +// We use these to control various global styles +$body-bg: #fff !default; +$body-font-color: #222 !default; +$body-font-family: $font-family-sans-serif !default; +$body-font-weight: $font-weight-normal !default; +$body-font-style: normal !default; + +// We use this to control font-smoothing +$font-smoothing: antialiased !default; + +// We use these to control text direction settings +$text-direction: ltr !default; +$default-float: left !default; +$opposite-direction: right !default; +@if $text-direction == ltr { + $default-float: left; + $opposite-direction: right; +} @else { + $default-float: right; + $opposite-direction: left; +} + +// We use these to make sure border radius matches unless we want it different. +$global-radius: 3px !default; +$global-rounded: 1000px !default; + +// We use these to control inset shadow shiny edges and depressions. +$shiny-edge-size: 0 1px 0 !default; +$shiny-edge-color: rgba(#fff, .5) !default; +$shiny-edge-active-color: rgba(#000, .2) !default; + +// We use this to control whether or not CSS classes come through in the gem files. +$include-html-classes: true !default; +$include-print-styles: true !default; +$include-html-global-classes: $include-html-classes !default; + +$column-gutter: rem-calc(30) !default; + +// Media Query Ranges +$small-range: (0, 40em) !default; +$medium-range: (40.063em, 64em) !default; +$large-range: (64.063em, 90em) !default; +$xlarge-range: (90.063em, 120em) !default; +$xxlarge-range: (120.063em, 99999999em) !default; + + +$screen: "only screen" !default; + +$landscape: "#{$screen} and (orientation: landscape)" !default; +$portrait: "#{$screen} and (orientation: portrait)" !default; + +$small-up: $screen !default; +$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default; + +$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default; +$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default; + +$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default; +$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default; + +$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default; +$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default; + +$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default; +$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default; + +// Legacy +$small: $medium-up; +$medium: $medium-up; +$large: $large-up; + + +//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet +$cursor-auto-value: auto !default; +$cursor-crosshair-value: crosshair !default; +$cursor-default-value: default !default; +$cursor-pointer-value: pointer !default; +$cursor-help-value: help !default; +$cursor-text-value: text !default; + + +@include exports("global") { + + // Meta styles are included in all builds, as they are a dependancy of the Javascript. + // Used to provide media query values for javascript components. + // Forward slash placed around everything to convince PhantomJS to read the value. + + meta.foundation-version { + font-family: "/5.5.0/"; + } + + meta.foundation-mq-small { + font-family: "/" + unquote($small-up) + "/"; + width: lower-bound($small-range); + } + + meta.foundation-mq-small-only { + font-family: "/" + unquote($small-only) + "/"; + width: lower-bound($small-range); + } + + meta.foundation-mq-medium { + font-family: "/" + unquote($medium-up) + "/"; + width: lower-bound($medium-range); + } + + meta.foundation-mq-medium-only { + font-family: "/" + unquote($medium-only) + "/"; + width: lower-bound($medium-range); + } + + meta.foundation-mq-large { + font-family: "/" + unquote($large-up) + "/"; + width: lower-bound($large-range); + } + + meta.foundation-mq-large-only { + font-family: "/" + unquote($large-only) + "/"; + width: lower-bound($large-range); + } + + meta.foundation-mq-xlarge { + font-family: "/" + unquote($xlarge-up) + "/"; + width: lower-bound($xlarge-range); + } + + meta.foundation-mq-xlarge-only { + font-family: "/" + unquote($xlarge-only) + "/"; + width: lower-bound($xlarge-range); + } + + meta.foundation-mq-xxlarge { + font-family: "/" + unquote($xxlarge-up) + "/"; + width: lower-bound($xxlarge-range); + } + + meta.foundation-data-attribute-namespace { + font-family: #{$namespace}; + } + + @if $include-html-global-classes { + + // Must be 100% for off canvas to work + html, body { height: 100%; } + + // Set box-sizing globally to handle padding and border widths + *, + *:before, + *:after { + @include box-sizing(border-box); + } + + html, + body { font-size: $base-font-size; } + + // Default body styles + body { + background: $body-bg; + color: $body-font-color; + padding: 0; + margin: 0; + font-family: $body-font-family; + font-weight: $body-font-weight; + font-style: $body-font-style; + line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150% + position: relative; + cursor: $cursor-auto-value; + } + + a:hover { cursor: $cursor-pointer-value; } + + // Grid Defaults to get images and embeds to work properly + img { max-width: 100%; height: auto; } + + img { -ms-interpolation-mode: bicubic; } + + #map_canvas, + .map_canvas { + img, + embed, + object { max-width: none !important; + } + } + + // Miscellaneous useful HTML classes + .float-left { float: left !important; } + .float-right { float: right !important; } + .clearfix { @include clearfix; } + + // Hide visually and from screen readers + .hide { + display: none !important; + visibility: hidden; + } + + // Hide visually and from screen readers, but maintain layout + .invisible { visibility: hidden; } + + // Font smoothing + // Antialiased font smoothing works best for light text on a dark background. + // Apply to single elements instead of globally to body. + // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac. + .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + + // Get rid of gap under images by making them display: inline-block; by default + img { + display: inline-block; + vertical-align: middle; + } + + // + // Global resets for forms + // + + // Make sure textarea takes on height automatically + textarea { height: auto; min-height: 50px; } + + // Make select elements 100% width by default + select { width: 100%; } + } +} diff --git a/app/styles/app/foundation/scss/foundation/components/_grid.scss b/app/styles/app/foundation/scss/foundation/components/_grid.scss new file mode 100644 index 00000000..fe66c1d6 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_grid.scss @@ -0,0 +1,289 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @variables +// +$include-html-grid-classes: $include-html-classes !default; +$include-xl-html-grid-classes: false !default; + +$row-width: 100%; +$total-columns: 12 !default; + +$last-child-float: $opposite-direction !default; + +// +// Grid Functions +// + +// Deprecated: We'll drop support for this in 5.1, use grid-calc() +@function gridCalc($colNumber, $totalColumns) { + @warn "gridCalc() is deprecated, use grid-calc()"; + @return grid-calc($colNumber, $totalColumns); +} + +// @FUNCTION +// $colNumber - Found in settings file +// $totalColumns - Found in settings file +@function grid-calc($colNumber, $totalColumns) { + @return percentage(($colNumber / $totalColumns)); +} + +// +// @mixins +// + +// For creating container, nested, and collapsed rows. +// +// +// $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false. +@mixin grid-row($behavior: false) { + + // use @include grid-row(nest); to include a nested row + @if $behavior == nest { + width: auto; + margin-#{$default-float}: -($column-gutter/2); + margin-#{$opposite-direction}: -($column-gutter/2); + margin-top: 0; + margin-bottom: 0; + max-width: none; + } + + // use @include grid-row(collapse); to collapsed a container row margins + @else if $behavior == collapse { + width: 100%; + margin: 0; + max-width: $row-width; + } + + // use @include grid-row(nest-collapse); to collapse outer margins on a nested row + @else if $behavior == nest-collapse { + width: auto; + margin: 0; + max-width: none; + } + + // use @include grid-row; to use a container row + @else { + width: 100%; + margin-#{$default-float}: auto; + margin-#{$opposite-direction}: auto; + margin-top: 0; + margin-bottom: 0; + max-width: $row-width; + } + + // Clearfix for all rows + @include clearfix(); +} + +// Creates a column, should be used inside of a media query to control layouts +// +// $columns - The number of columns this should be +// $last-column - Is this the last column? Default: false. +// $center - Center these columns? Default: false. +// $offset - # of columns to offset. Default: false. +// $push - # of columns to push. Default: false. +// $pull - # of columns to pull. Default: false. +// $collapse - Get rid of gutter padding on column? Default: false. +// $float - Should this float? Default: true. Options: true, false, left, right. +@mixin grid-column( + $columns:false, + $last-column:false, + $center:false, + $offset:false, + $push:false, + $pull:false, + $collapse:false, + $float:true, + $position:false) { + + // If positioned for default .column, include relative position + // push and pull require position set + @if $position or $push or $pull { + position: relative; + } + + // If collapsed, get rid of gutter padding + @if $collapse { + padding-left: 0; + padding-right: 0; + } + + // Gutter padding whenever a column isn't set to collapse + // (use $collapse:null to do nothing) + @else if $collapse == false { + padding-left: ($column-gutter / 2); + padding-right: ($column-gutter / 2); + } + + // If a column number is given, calculate width + @if $columns { + width: grid-calc($columns, $total-columns); + + // If last column, float naturally instead of to the right + @if $last-column { float: $opposite-direction; } + } + + // Source Ordering, adds left/right depending on which you use. + @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; } + @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; } + + @if $float { + @if $float == left or $float == true { float: $default-float; } + @else if $float == right { float: $opposite-direction; } + @else { float: none; } + } + + // If centered, get rid of float and add appropriate margins + @if $center { + margin-#{$default-float}: auto; + margin-#{$opposite-direction}: auto; + float: none; + } + + // If offset, calculate appropriate margins + @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; } + +} + +// Create presentational classes for grid +// +// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc. +@mixin grid-html-classes($size) { + + @for $i from 0 through $total-columns - 1 { + .#{$size}-push-#{$i} { + @include grid-column($push:$i, $collapse:null, $float:false); + } + .#{$size}-pull-#{$i} { + @include grid-column($pull:$i, $collapse:null, $float:false); + } + } + + .column, + .columns { @include grid-column($columns:false, $position:true); } + + + @for $i from 1 through $total-columns { + .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); } + } + + @for $i from 0 through $total-columns - 1 { + .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); } + } + + .#{$size}-reset-order { + margin-#{$default-float}: 0; + margin-#{$opposite-direction}: 0; + left: auto; + right: auto; + float: $default-float; + } + + .column.#{$size}-centered, + .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); } + + .column.#{$size}-uncentered, + .columns.#{$size}-uncentered { + margin-#{$default-float}: 0; + margin-#{$opposite-direction}: 0; + float: $default-float; + } + + // Fighting [class*="column"] + [class*="column"]:last-child + .column.#{$size}-centered:last-child, + .columns.#{$size}-centered:last-child{ + float: none; + } + + // Fighting .column.-centered:last-child + .column.#{$size}-uncentered:last-child, + .columns.#{$size}-uncentered:last-child { + float: $default-float; + } + + .column.#{$size}-uncentered.opposite, + .columns.#{$size}-uncentered.opposite { + float: $opposite-direction; + } + + .row { + &.#{$size}-collapse { + > .column, + > .columns { @include grid-column($collapse:true, $float:false); } + + .row {margin-left:0; margin-right:0;} + } + &.#{$size}-uncollapse { + > .column, + > .columns { + @include grid-column; + } + } + } +} + +@include exports("grid") { + @if $include-html-grid-classes { + .row { + @include grid-row; + + &.collapse { + > .column, + > .columns { @include grid-column($collapse:true, $float:false); } + + .row {margin-left:0; margin-right:0;} + } + + .row { @include grid-row($behavior:nest); + &.collapse { @include grid-row($behavior:nest-collapse); } + } + } + + .column, + .columns { @include grid-column($columns:$total-columns); } + + [class*="column"] + [class*="column"]:last-child { float: $last-child-float; } + [class*="column"] + [class*="column"].end { float: $default-float; } + + @media #{$small-up} { + @include grid-html-classes($size:small); + } + + @media #{$medium-up} { + @include grid-html-classes($size:medium); + // Old push and pull classes + @for $i from 0 through $total-columns - 1 { + .push-#{$i} { + @include grid-column($push:$i, $collapse:null, $float:false); + } + .pull-#{$i} { + @include grid-column($pull:$i, $collapse:null, $float:false); + } + } + } + @media #{$large-up} { + @include grid-html-classes($size:large); + @for $i from 0 through $total-columns - 1 { + .push-#{$i} { + @include grid-column($push:$i, $collapse:null, $float:false); + } + .pull-#{$i} { + @include grid-column($pull:$i, $collapse:null, $float:false); + } + } + } + } + @if $include-xl-html-grid-classes { + @media #{$xlarge-up} { + @include grid-html-classes($size:xlarge); + } + @media #{$xxlarge-up} { + @include grid-html-classes($size:xxlarge); + } + } +} diff --git a/app/styles/app/foundation/scss/foundation/components/_icon-bar.scss b/app/styles/app/foundation/scss/foundation/components/_icon-bar.scss new file mode 100644 index 00000000..90a01448 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_icon-bar.scss @@ -0,0 +1,329 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + + +// // @name +// // @dependencies _global.scss + +// $include-html-icon-bar-classes: $include-html-classes !default; + +// // @variables + +// // We use these to style the icon-bar and items +// $icon-bar-bg: $oil !default; +// $icon-bar-font-color: $white !default; +// $icon-bar-font-color-hover: $icon-bar-font-color !default; +// $icon-bar-font-size: 1rem !default; +// $icon-bar-hover-color: $primary-color !default; +// $icon-bar-icon-color: $white !default; +// $icon-bar-icon-color-hover: $icon-bar-icon-color !default; +// $icon-bar-icon-size: 1.875rem !default; +// $icon-bar-image-width: 1.875rem !default; +// $icon-bar-image-height: 1.875rem !default; +// $icon-bar-active-color: $primary-color !default; +// $icon-bar-item-padding: 1.25rem !default; + +// // We use this to set default opacity and cursor for disabled icons. +// $icon-bar-disabled-opacity: 0.7 !default; +// $icon-bar-disabled-cursor: $cursor-default-value !default; + +// // +// // @mixins +// // + +// // We use this mixin to create the base styles for our Icon bar element. +// // +// @mixin icon-bar-base() { + +// width: 100%; +// font-size: 0; +// display: inline-block; + +// & > * { +// text-align: center; +// font-size: $icon-bar-font-size; +// width: 25%; +// margin: 0 auto; +// display: block; +// padding: $icon-bar-item-padding; +// float: left; + +// i, img { +// display: block; +// margin: 0 auto; + +// & + label { +// margin-top: .0625rem; +// } +// } + +// i { +// font-size: $icon-bar-icon-size; +// vertical-align: middle; +// } + +// img { +// width: $icon-bar-image-width; +// height: $icon-bar-image-height; +// } +// } + +// &.label-right > * { + +// i, img { +// margin: 0 .0625rem 0 0; +// display: inline-block; + +// & + label { +// margin-top: 0; +// } +// } + +// label { display: inline-block; } +// } + +// &.vertical.label-right > * { +// text-align: left; +// } + +// &.vertical, &.small-vertical{ +// height: 100%; +// width: auto; + +// .item { +// width: auto; +// margin: auto; +// float: none; +// } +// } + +// &.medium-vertical { +// @media #{$medium-up} { +// height: 100%; +// width: auto; + +// .item { +// width: auto; +// margin: auto; +// float: none; +// } +// } +// } +// &.large-vertical { +// @media #{$large-up} { +// height: 100%; +// width: auto; + +// .item { +// width: auto; +// margin: auto; +// float: none; +// } +// } +// } +// } + +// // We use this mixin to create the size styles for icon bars. +// @mixin icon-bar-size( +// $padding: $icon-bar-item-padding, +// $font-size: $icon-bar-font-size, +// $icon-size: $icon-bar-icon-size, +// $image-width: $icon-bar-image-width, +// $image-height: $icon-bar-image-height) { + +// & > * { +// font-size: $font-size; +// padding: $padding; + +// i, img { + +// & + label { +// margin-top: .0625rem; +// } +// } + +// i { +// font-size: $icon-size; +// } + +// img { +// width: $image-width; +// height: $image-height; +// } +// } + +// } + +// @mixin icon-bar-style( +// $bar-bg:$icon-bar-bg, +// $bar-font-color:$icon-bar-font-color, +// $bar-font-color-hover:$icon-bar-font-color-hover, +// $bar-hover-color:$icon-bar-hover-color, +// $bar-icon-color:$icon-bar-icon-color, +// $bar-icon-color-hover:$icon-bar-icon-color-hover, +// $bar-active-color:$icon-bar-active-color, +// $base-style:true, +// $disabled:false) { + +// @if $base-style { + +// background: $bar-bg; + +// & > * { +// label { color: $bar-font-color; } + +// i { color: $bar-icon-color; } +// } + +// & > a:hover { + +// background: $bar-hover-color; + +// label { color: $bar-font-color-hover; } + +// i { color: $bar-icon-color-hover; } +// } + +// & > a.active { + +// background: $bar-active-color; + +// label { color: $bar-font-color-hover; } + +// i { color: $bar-icon-color-hover; } +// } +// } +// @if $disabled { +// .item.disabled { +// opacity: $icon-bar-disabled-opacity; +// cursor: $icon-bar-disabled-cursor; +// >* { +// opacity: $icon-bar-disabled-opacity; +// cursor: $icon-bar-disabled-cursor; +// } +// } +// } + +// } + +// // We use this to quickly create icon bars with a single mixin +// // $height - The overall calculated height of the icon bar (horizontal) +// // $bar-bg - the background color of the bar +// // $bar-font-color - the font color +// // $bar-hover-color - okay these are pretty obvious variables +// // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font +// // $bar-active-color - the color of an active / hover state +// // $base-style - Apply base styles? Default: true. +// // $disabled - Allow disabled icons? Default: false. + +// @mixin icon-bar( +// $bar-bg:$icon-bar-bg, +// $bar-font-color:$icon-bar-font-color, +// $bar-font-color-hover:$icon-bar-font-color-hover, +// $bar-hover-color:$icon-bar-hover-color, +// $bar-icon-color:$icon-bar-icon-color, +// $bar-icon-color-hover:$icon-bar-icon-color-hover, +// $bar-active-color:$icon-bar-active-color, +// $padding: $icon-bar-item-padding, +// $font-size: $icon-bar-font-size, +// $icon-size: $icon-bar-icon-size, +// $image-width: $icon-bar-image-width, +// $image-height: $icon-bar-image-height, +// $base-style:true, +// $disabled:false) { +// @include icon-bar-base(); +// @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height); +// @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled); +// } + +// @include exports("icon-bar") { +// @if $include-html-icon-bar-classes { +// .icon-bar { +// @include icon-bar; +// } +// } +// } + +// @if $include-html-icon-bar-classes { + +// // toolbar styles + +// .icon-bar { + +// // Counts + +// &.two-up { +// .item { width: 50%; } +// &.vertical .item, &.small-vertical .item { width: auto; } +// &.medium-vertical .item { +// @media #{$medium-up} { +// width: auto; +// } +// } +// &.large-vertical .item { +// @media #{$large-up} { +// width: auto; +// } +// } +// } +// &.three-up { +// .item { width: 33.3333%; } +// &.vertical .item, &.small-vertical .item { width: auto; } +// &.medium-vertical .item { +// @media #{$medium-up} { +// width: auto; +// } +// } +// &.large-vertical .item { +// @media #{$large-up} { +// width: auto; +// } +// } +// } +// &.four-up { +// .item { width: 25%; } +// &.vertical .item, &.small-vertical .item { width: auto; } +// &.medium-vertical .item { +// @media #{$medium-up} { +// width: auto; +// } +// } +// &.large-vertical .item { +// @media #{$large-up} { +// width: auto; +// } +// } +// } +// &.five-up { +// .item { width: 20%; } +// &.vertical .item, &.small-vertical .item { width: auto; } +// &.medium-vertical .item { +// @media #{$medium-up} { +// width: auto; +// } +// } +// &.large-vertical .item { +// @media #{$large-up} { +// width: auto; +// } +// } +// } +// &.six-up { +// .item { width: 16.66667%; } +// &.vertical .item, &.small-vertical .item { width: auto; } +// &.medium-vertical .item { +// @media #{$medium-up} { +// width: auto; +// } +// } +// &.large-vertical .item { +// @media #{$large-up} { +// width: auto; +// } +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_inline-lists.scss b/app/styles/app/foundation/scss/foundation/components/_inline-lists.scss new file mode 100644 index 00000000..f492eae9 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_inline-lists.scss @@ -0,0 +1,57 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-inline-list-classes: $include-html-classes !default; + +// // We use this to control the margins and padding of the inline list. +// $inline-list-top-margin: 0 !default; +// $inline-list-opposite-margin: 0 !default; +// $inline-list-bottom-margin: rem-calc(17) !default; +// $inline-list-default-float-margin: rem-calc(-22) !default; +// $inline-list-default-float-list-margin: rem-calc(22) !default; + +// $inline-list-padding: 0 !default; + +// // We use this to control the overflow of the inline list. +// $inline-list-overflow: hidden !default; + +// // We use this to control the list items +// $inline-list-display: block !default; + +// // We use this to control any elements within list items +// $inline-list-children-display: block !default; + +// // +// // @mixins +// // +// // We use this mixin to create inline lists +// @mixin inline-list { +// margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; +// margin-#{$default-float}: $inline-list-default-float-margin; +// margin-#{$opposite-direction}: $inline-list-opposite-margin; +// padding: $inline-list-padding; +// list-style: none; +// overflow: $inline-list-overflow; + +// & > li { +// list-style: none; +// float: $default-float; +// margin-#{$default-float}: $inline-list-default-float-list-margin; +// display: $inline-list-display; +// &>* { display: $inline-list-children-display; } +// } +// } + +// @include exports("inline-list") { +// @if $include-html-inline-list-classes { +// .inline-list { +// @include inline-list(); +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_joyride.scss b/app/styles/app/foundation/scss/foundation/components/_joyride.scss new file mode 100644 index 00000000..e0bbad83 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_joyride.scss @@ -0,0 +1,222 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-joyride-classes: $include-html-classes !default; + +// // Controlling default Joyride styles +// $joyride-tip-bg: $oil !default; +// $joyride-tip-default-width: 300px !default; +// $joyride-tip-padding: rem-calc(18 20 24) !default; +// $joyride-tip-border: solid 1px $charcoal !default; +// $joyride-tip-radius: 4px !default; +// $joyride-tip-position-offset: 22px !default; + +// // Here, we're setting the tip font styles +// $joyride-tip-font-color: $white !default; +// $joyride-tip-font-size: rem-calc(14) !default; +// $joyride-tip-header-weight: $font-weight-bold !default; + +// // This changes the nub size +// $joyride-tip-nub-size: 10px !default; + +// // This adjusts the styles for the timer when its enabled +// $joyride-tip-timer-width: 50px !default; +// $joyride-tip-timer-height: 3px !default; +// $joyride-tip-timer-color: $steel !default; + +// // This changes up the styles for the close button +// $joyride-tip-close-color: $monsoon !default; +// $joyride-tip-close-size: 24px !default; +// $joyride-tip-close-weight: $font-weight-normal !default; + +// // When Joyride is filling the screen, we use this style for the bg +// $joyride-screenfill: rgba(0,0,0,0.5) !default; + + +// // We decided not to make a mixin for this because it relies on +// // predefined classes to work properly. +// @include exports("joyride") { +// @if $include-html-joyride-classes { + +// /* Foundation Joyride */ +// .joyride-list { display: none; } + +// /* Default styles for the container */ +// .joyride-tip-guide { +// display: none; +// position: absolute; +// background: $joyride-tip-bg; +// color: $joyride-tip-font-color; +// z-index: 101; +// top: 0; +// #{$default-float}: 2.5%; +// font-family: inherit; +// font-weight: $font-weight-normal; +// width: 95%; +// } + +// .lt-ie9 .joyride-tip-guide { +// max-width:800px; +// #{$default-float}: 50%; +// margin-#{$default-float}:-400px; +// } + +// .joyride-content-wrapper { +// width: 100%; + +// padding: $joyride-tip-padding; + +// .button { margin-bottom: 0 !important; } + +// .joyride-prev-tip { margin-right: 10px; } +// } + +// /* Add a little css triangle pip, older browser just miss out on the fanciness of it */ +// .joyride-tip-guide { +// .joyride-nub { +// display: block; +// position: absolute; +// #{$default-float}: $joyride-tip-position-offset; +// width: 0; +// height: 0; +// border: $joyride-tip-nub-size solid $joyride-tip-bg; + +// &.top { +// border-top-style: solid; +// border-color: $joyride-tip-bg; +// border-top-color: transparent !important; +// border-#{$default-float}-color: transparent !important; +// border-#{$opposite-direction}-color: transparent !important; +// top: -($joyride-tip-nub-size*2); +// } +// &.bottom { +// border-bottom-style: solid; +// border-color: $joyride-tip-bg !important; +// border-bottom-color: transparent !important; +// border-#{$default-float}-color: transparent !important; +// border-#{$opposite-direction}-color: transparent !important; +// bottom: -($joyride-tip-nub-size*2); +// } + +// &.right { right: -($joyride-tip-nub-size*2); } +// &.left { left: -($joyride-tip-nub-size*2); } +// } +// } + +// /* Typography */ +// .joyride-tip-guide h1, +// .joyride-tip-guide h2, +// .joyride-tip-guide h3, +// .joyride-tip-guide h4, +// .joyride-tip-guide h5, +// .joyride-tip-guide h6 { +// line-height: 1.25; +// margin: 0; +// font-weight: $joyride-tip-header-weight; +// color: $joyride-tip-font-color; +// } +// .joyride-tip-guide p { +// margin: rem-calc(0 0 18 0); +// font-size: $joyride-tip-font-size; +// line-height: 1.3; +// } + +// .joyride-timer-indicator-wrap { +// width: $joyride-tip-timer-width; +// height: $joyride-tip-timer-height; +// border: $joyride-tip-border; +// position: absolute; +// #{$opposite-direction}: rem-calc(17); +// bottom: rem-calc(16); +// } +// .joyride-timer-indicator { +// display: block; +// width: 0; +// height: inherit; +// background: $joyride-tip-timer-color; +// } + +// .joyride-close-tip { +// position: absolute; +// #{$opposite-direction}: 12px; +// top: 10px; +// color: $joyride-tip-close-color !important; +// text-decoration: none; +// font-size: $joyride-tip-close-size; +// font-weight: $joyride-tip-close-weight; +// line-height: .5 !important; + +// &:hover, +// &:focus { color: $smoke !important; } +// } + +// .joyride-modal-bg { +// position: fixed; +// height: 100%; +// width: 100%; +// background: transparent; +// background: $joyride-screenfill; +// z-index: 100; +// display: none; +// top: 0; +// #{$default-float}: 0; +// cursor: $cursor-pointer-value; +// } + +// .joyride-expose-wrapper { +// background-color: $white; +// position: absolute; +// border-radius: 3px; +// z-index: 102; +// box-shadow: 0 0 15px $white; +// } + +// .joyride-expose-cover { +// background: transparent; +// border-radius: 3px; +// position: absolute; +// z-index: 9999; +// top: 0; +// left: 0; +// } + + +// /* Styles for screens that are at least 768px; */ +// @media #{$small} { +// .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit; +// .joyride-nub { +// &.bottom { +// border-color: $joyride-tip-bg !important; +// border-bottom-color: transparent !important; +// border-#{$default-float}-color: transparent !important; +// border-#{$opposite-direction}-color: transparent !important; +// bottom: -($joyride-tip-nub-size*2); +// } +// &.right { +// border-color: $joyride-tip-bg !important; +// border-top-color: transparent !important; +// border-right-color: transparent !important; border-bottom-color: transparent !important; +// top: $joyride-tip-position-offset; +// left: auto; +// right: -($joyride-tip-nub-size*2); +// } +// &.left { +// border-color: $joyride-tip-bg !important; +// border-top-color: transparent !important; +// border-left-color: transparent !important; +// border-bottom-color: transparent !important; +// top: $joyride-tip-position-offset; +// left: -($joyride-tip-nub-size*2); +// right: auto; +// } +// } +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_keystrokes.scss b/app/styles/app/foundation/scss/foundation/components/_keystrokes.scss new file mode 100644 index 00000000..80da47de --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_keystrokes.scss @@ -0,0 +1,61 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-keystroke-classes: $include-html-classes !default; + +// // We use these to control text styles. +// $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default; +// $keystroke-font-size: inherit !default; +// $keystroke-font-color: $jet !default; +// $keystroke-font-color-alt: $white !default; +// $keystroke-function-factor: -7% !default; + +// // We use this to control keystroke padding. +// $keystroke-padding: rem-calc(2 4 0) !default; + +// // We use these to control background and border styles. +// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default; +// $keystroke-border-style: solid !default; +// $keystroke-border-width: 1px !default; +// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default; +// $keystroke-radius: $global-radius !default; + +// // +// // @mixins +// // +// // We use this mixin to create keystroke styles. +// // $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default; +// @mixin keystroke($bg:$keystroke-bg) { +// // This find the lightness percentage of the background color. +// $bg-lightness: lightness($bg); + +// background-color: $bg; +// border-color: scale-color($bg, $lightness: $keystroke-function-factor); + +// // We adjust the font color based on the brightness of the background. +// @if $bg-lightness > 70% { color: $keystroke-font-color; } +// @else { color: $keystroke-font-color-alt; } + +// border-style: $keystroke-border-style; +// border-width: $keystroke-border-width; +// margin: 0; +// font-family: $keystroke-font; +// font-size: $keystroke-font-size; +// padding: $keystroke-padding; +// } + +// @include exports("keystroke") { +// @if $include-html-keystroke-classes { +// .keystroke, +// kbd { +// @include keystroke; +// @include radius($keystroke-radius); +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_labels.scss b/app/styles/app/foundation/scss/foundation/components/_labels.scss new file mode 100644 index 00000000..cad17342 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_labels.scss @@ -0,0 +1,106 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-label-classes: $include-html-classes !default; + +// // We use these to style the labels +// $label-padding: rem-calc(4 8 4) !default; +// $label-radius: $global-radius !default; + +// // We use these to style the label text +// $label-font-sizing: rem-calc(11) !default; +// $label-font-weight: $font-weight-normal !default; +// $label-font-color: $oil !default; +// $label-font-color-alt: $white !default; +// $label-font-family: $body-font-family !default; + +// // +// // @mixins +// // +// // We use this mixin to create a default label base. +// @mixin label-base { +// font-weight: $label-font-weight; +// font-family: $label-font-family; +// text-align: center; +// text-decoration: none; +// line-height: 1; +// white-space: nowrap; +// display: inline-block; +// position: relative; +// margin-bottom: auto; +// } + +// // @mixins +// // +// // We use this mixin to add label size styles. +// // $padding - Used to determine label padding. Default: $label-padding || rem-calc(4 8 4) !default +// // $text-size - Used to determine label text-size. Default: $text-size found in settings +// @mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) { +// @if $padding { padding: $padding; } +// @if $text-size { font-size: $text-size; } +// } + +// // @mixins +// // +// // We use this mixin to add label styles. +// // $bg - Default: $primary-color (found in settings file) +// // $radius - Default: false, Options: true, sets radius to $global-radius (found in settings file) +// @mixin label-style($bg:$primary-color, $radius:false) { + +// // We control which background color comes through +// @if $bg { + +// // This find the lightness percentage of the background color. +// $bg-lightness: lightness($bg); + +// background-color: $bg; + +// // We control the text color for you based on the background color. +// @if $bg-lightness < 70% { color: $label-font-color-alt; } +// @else { color: $label-font-color; } +// } + +// // We use this to control the radius on labels. +// @if $radius == true { @include radius($label-radius); } +// @else if $radius { @include radius($radius); } + +// } + +// // @mixins +// // +// // We use this to add close buttons to alerts +// // $padding - Default: $label-padding, +// // $text-size - Default: $label-font-sizing, +// // $bg - Default: $primary-color(found in settings file) +// // $radius - Default: false, Options: true which sets radius to $global-radius (found in settings file) +// @mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) { + +// @include label-base; +// @include label-size($padding, $text-size); +// @include label-style($bg, $radius); +// } + +// @include exports("label") { +// @if $include-html-label-classes { +// .label { +// @include label-base; +// @include label-size; +// @include label-style; + +// &.radius { @include label-style(false, true); } +// &.round { @include label-style(false, $radius:1000px); } + +// &.alert { @include label-style($alert-color); } +// &.warning { @include label-style($warning-color); } +// &.success { @include label-style($success-color); } +// &.secondary { @include label-style($secondary-color); } +// &.info { @include label-style($info-color); } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_magellan.scss b/app/styles/app/foundation/scss/foundation/components/_magellan.scss new file mode 100644 index 00000000..64d044b0 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_magellan.scss @@ -0,0 +1,34 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-magellan-classes: $include-html-classes !default; + +// $magellan-bg: $white !default; +// $magellan-padding: 10px !default; + +// @include exports("magellan") { +// @if $include-html-magellan-classes { + +// #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} { +// background: $magellan-bg; +// z-index: 50; +// min-width: 100%; +// padding: $magellan-padding; + +// .sub-nav { +// margin-bottom: 0; +// dd { margin-bottom: 0; } +// a { +// line-height: 1.8em; +// } +// } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_offcanvas.scss b/app/styles/app/foundation/scss/foundation/components/_offcanvas.scss new file mode 100644 index 00000000..7995c994 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_offcanvas.scss @@ -0,0 +1,515 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "type"; + +// // Off Canvas Tab Bar Variables +// $include-html-off-canvas-classes: $include-html-classes !default; + +// $tabbar-bg: $oil !default; +// $tabbar-height: rem-calc(45) !default; +// $tabbar-icon-width: $tabbar-height !default; +// $tabbar-line-height: $tabbar-height !default; +// $tabbar-color: $white !default; +// $tabbar-middle-padding: 0 rem-calc(10) !default; + +// // Off Canvas Divider Styles +// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default; +// $tabbar-right-section-border: $tabbar-left-section-border; + + +// // Off Canvas Tab Bar Headers +// $tabbar-header-color: $white !default; +// $tabbar-header-weight: $font-weight-bold !default; +// $tabbar-header-line-height: $tabbar-height !default; +// $tabbar-header-margin: 0 !default; + +// // Off Canvas Menu Variables +// $off-canvas-width: rem-calc(250) !default; +// $off-canvas-bg: $oil !default; +// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default; + +// // Off Canvas Menu List Variables +// $off-canvas-label-padding: 0.3rem rem-calc(15) !default; +// $off-canvas-label-color: $aluminum !default; +// $off-canvas-label-text-transform: uppercase !default; +// $off-canvas-label-font-size: rem-calc(12) !default; +// $off-canvas-label-font-weight: $font-weight-bold !default; +// $off-canvas-label-bg: $tuatara !default; +// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default; +// $off-canvas-label-border-bottom: none !default; +// $off-canvas-label-margin:0 !default; +// $off-canvas-link-padding: rem-calc(10, 15) !default; +// $off-canvas-link-color: rgba($white, 0.7) !default; +// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default; +// $off-canvas-back-bg: #444 !default; +// $off-canvas-back-border-top: $off-canvas-label-border-top !default; +// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default; +// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default; +// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default; +// $off-canvas-back-hover-border-bottom: none !default; + +// // Off Canvas Menu Icon Variables +// $tabbar-menu-icon-color: $white !default; +// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default; + +// $tabbar-menu-icon-text-indent: rem-calc(35) !default; +// $tabbar-menu-icon-width: $tabbar-icon-width !default; +// $tabbar-menu-icon-height: $tabbar-height !default; +// $tabbar-menu-icon-padding: 0 !default; + +// $tabbar-hamburger-icon-width: rem-calc(16) !default; +// $tabbar-hamburger-icon-left: false !default; +// $tabbar-hamburger-icon-top: false !default; +// $tabbar-hamburger-icon-thickness: 1px !default; +// $tabbar-hamburger-icon-gap: 6px !default; + +// // Off Canvas Back-Link Overlay +// $off-canvas-overlay-transition: background 300ms ease !default; +// $off-canvas-overlay-cursor: pointer !default; +// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default; +// $off-canvas-overlay-background: rgba($white, 0.2) !default; +// $off-canvas-overlay-background-hover: rgba($white, 0.05) !default; + +// // Transition Variables +// $menu-slide: "transform 500ms ease" !default; + + +// // MIXINS +// // Remove transition flicker on phones +// @mixin kill-flicker { +// // -webkit-transform: translateZ(0x); +// -webkit-backface-visibility: hidden; +// } + +// // Basic properties for the content wraps +// @mixin wrap-base { +// position: relative; +// width: 100%; +// } + +// @mixin translate3d($tx,$ty,$tz) { +// -ms-transform: translate($tx,$ty); +// -webkit-transform: translate3d($tx,$ty,$tz); +// -moz-transform: translate3d($tx,$ty,$tz); +// -ms-transform: translate3d($tx,$ty,$tz); +// -o-transform: translate3d($tx,$ty,$tz); +// transform: translate3d($tx,$ty,$tz) +// } + +// // basic styles for off-canvas menu container +// @mixin off-canvas-menu($position) { +// @include kill-flicker; +// * { @include kill-flicker; } +// width: $off-canvas-width; +// top: 0; +// bottom: 0; +// position: absolute; +// overflow-x: hidden; +// overflow-y: auto; +// background: $off-canvas-bg; +// z-index: 1001; +// box-sizing: content-box; +// transition: transform 500ms ease 0s; +// -webkit-overflow-scrolling: touch; +// -ms-overflow-style: -ms-autohiding-scrollbar; + +// @if $position == left { +// @include translate3d(-100%,0,0); +// left: 0; +// } +// @if $position == right { +// @include translate3d(100%,0,0); +// right: 0; +// } +// } + +// // OFF CANVAS WRAP +// // Wrap visible content and prevent scroll bars +// @mixin off-canvas-wrap { +// @include kill-flicker; +// @include wrap-base; +// overflow: hidden; +// &.move-right, +// &.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; } +// } + +// // INNER WRAP +// // Main content area that moves to reveal the off-canvas nav +// @mixin inner-wrap { +// // @include kill-flicker; +// // removed for now till chrome fixes backface issue +// @include wrap-base; +// @include clearfix; +// -webkit-transition: -webkit-#{$menu-slide}; +// -moz-transition: -moz-#{$menu-slide}; +// -ms-transition: -ms-#{$menu-slide}; +// -o-transition: -o-#{$menu-slide}; +// transition: #{$menu-slide}; +// } + +// // TAB BAR +// // This is the tab bar base +// @mixin tab-bar-base { +// @include kill-flicker; + +// // base styles +// background: $tabbar-bg; +// color: $tabbar-color; +// height: $tabbar-height; +// line-height: $tabbar-line-height; + +// // make sure it's below the .exit-off-canvas link +// position: relative; +// // z-index: 999; + +// // Typography +// h1,h2,h3,h4,h5,h6 { +// color: $tabbar-header-color; +// font-weight: $tabbar-header-weight; +// line-height: $tabbar-header-line-height; +// margin: $tabbar-header-margin; +// } +// h1,h2,h3,h4 { font-size: $h5-font-size; } +// } + +// // SMALL SECTIONS +// // These are small sections on the left and right that contain the off-canvas toggle buttons; +// @mixin tabbar-small-section($position) { +// width: $tabbar-icon-width; +// height: $tabbar-height; +// position: absolute; +// top: 0; +// @if $position == left { +// border-right: $tabbar-left-section-border; +// // box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%); +// left: 0; +// } +// @if $position == right { +// border-left: $tabbar-right-section-border; +// // box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%); +// right:0; +// } +// } + +// @mixin tab-bar-section { +// padding: $tabbar-middle-padding; +// position: absolute; +// text-align: center; +// height: $tabbar-height; +// top: 0; +// @media #{$medium-up} { +// &.left { text-align: left; } +// &.right { text-align: right; } +// } + +// // still need to make these non-presentational +// &.left { +// left: 0; +// right: $tabbar-icon-width; +// } +// &.right { +// left: $tabbar-icon-width; +// right: 0; +// } +// &.middle { +// left: $tabbar-icon-width; +// right: $tabbar-icon-width; +// } +// } + +// // OFF CANVAS LIST +// // This is the list of links in the off-canvas menu +// @mixin off-canvas-list { +// list-style-type: none; +// padding:0; +// margin:0; + +// li { +// label { +// display: block; +// padding: $off-canvas-label-padding; +// color: $off-canvas-label-color; +// text-transform: $off-canvas-label-text-transform; +// font-size: $off-canvas-label-font-size; +// font-weight: $off-canvas-label-font-weight; +// background: $off-canvas-label-bg; +// border-top: $off-canvas-label-border-top; +// border-bottom: $off-canvas-label-border-bottom; +// margin: $off-canvas-label-margin; +// } +// a { +// display: block; +// padding: $off-canvas-link-padding; +// color: $off-canvas-link-color; +// border-bottom: $off-canvas-link-border-bottom; +// transition: background 300ms ease; +// &:hover { +// background: $off-canvas-bg-hover; +// } +// } +// } + +// } + +// // BACK LINK +// // This is an overlay that, when clicked, will toggle off the off canvas menu +// @mixin back-link { +// @include kill-flicker; + +// transition: $off-canvas-overlay-transition; +// cursor: $off-canvas-overlay-cursor; +// box-shadow: $off-canvas-overlay-box-shadow; + +// // fill the screen +// display: block; +// position: absolute; +// background: $off-canvas-overlay-background; +// top: 0; +// bottom: 0; +// left:0; +// right:0; +// z-index: 1002; +// -webkit-tap-highlight-color: rgba(0,0,0,0); + +// @media #{$medium-up} { +// &:hover { +// background: $off-canvas-overlay-background-hover; +// } +// } +// } + +// // +// // DEFAULT CLASSES +// // +// @include exports("offcanvas") { +// @if $include-html-off-canvas-classes { + +// .off-canvas-wrap { @include off-canvas-wrap; } +// .inner-wrap { @include inner-wrap; } + +// .tab-bar { @include tab-bar-base; } + +// .left-small { @include tabbar-small-section($position: left); } +// .right-small { @include tabbar-small-section($position: right); } + +// .tab-bar-section { @include tab-bar-section; } + +// // MENU BUTTON +// // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future. +// .tab-bar .menu-icon { +// text-indent: $tabbar-menu-icon-text-indent; +// width: $tabbar-menu-icon-width; +// height: $tabbar-menu-icon-height; +// display: block; +// padding: $tabbar-menu-icon-padding; +// color: $tabbar-menu-icon-color; +// position: relative; +// transform: translate3d(0,0,0); + +// // @include for the hamburger menu-icon +// // +// // Arguments as follows: ($width, $left, $top, $thickness, $gap, $color, $hover-color) +// // $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width. +// // $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False +// // $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False +// // $thickness - thickness of lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-thickness = 1px +// // $gap - spacing between the lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-gap = 6px +// // $color - icon color Default: $tabbar-menu-icon-color +// // $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover +// // $offcanvas - Set to true +// @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tabbar-hamburger-icon-thickness, $tabbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true) +// } + +// .left-off-canvas-menu { @include off-canvas-menu($position: left); } +// .right-off-canvas-menu { @include off-canvas-menu($position: right); } + +// ul.off-canvas-list { @include off-canvas-list; } + + +// // ANIMATION CLASSES +// // These classes are added with JS and trigger the actual animation. +// .move-right { +// > .inner-wrap { +// @include translate3d($off-canvas-width,0,0); +// } +// .exit-off-canvas { @include back-link;} +// } + +// .move-left { +// > .inner-wrap { +// @include translate3d(-($off-canvas-width),0,0); + +// } +// .exit-off-canvas { @include back-link; } +// } +// .offcanvas-overlap { +// .left-off-canvas-menu, .right-off-canvas-menu { +// -ms-transform: none; +// -webkit-transform: none; +// -moz-transform: none; +// -o-transform: none; +// transform: none; +// z-index: 1003; +// } +// .exit-off-canvas { @include back-link; } +// } +// .offcanvas-overlap-left { +// .right-off-canvas-menu { +// -ms-transform: none; +// -webkit-transform: none; +// -moz-transform: none; +// -o-transform: none; +// transform: none; +// z-index: 1003; +// } +// .exit-off-canvas { @include back-link; } +// } +// .offcanvas-overlap-right { +// .left-off-canvas-menu { +// -ms-transform: none; +// -webkit-transform: none; +// -moz-transform: none; +// -o-transform: none; +// transform: none; +// z-index: 1003; +// } +// .exit-off-canvas { @include back-link; } +// } + +// // Older browsers +// .no-csstransforms { +// .left-off-canvas-menu { left: -($off-canvas-width); } +// .right-off-canvas-menu { right: -($off-canvas-width); } + +// .move-left > .inner-wrap { right: $off-canvas-width; } +// .move-right > .inner-wrap { left: $off-canvas-width; } +// } + +// } +// } + +// // +// // Off-Canvas Submenu Classes +// // +// @mixin off-canvas-submenu($position) { +// @include kill-flicker; +// * { @include kill-flicker; } +// width: $off-canvas-width; +// top: 0; +// bottom: 0; +// position: absolute; +// margin: 0; +// overflow-x: hidden; +// overflow-y: auto; +// background: $off-canvas-bg; +// z-index: 1002; +// box-sizing: content-box; +// -webkit-overflow-scrolling: touch; +// @if $position == left { +// @include translate3d(-100%,0,0); +// left: 0; +// } +// @if $position == right { +// @include translate3d(100%,0,0); +// right: 0; +// } +// -webkit-transition: -webkit-#{$menu-slide}; +// -moz-transition: -moz-#{$menu-slide}; +// -ms-transition: -ms-#{$menu-slide}; +// -o-transition: -o-#{$menu-slide}; +// transition: #{$menu-slide}; + +// //back button style like label +// .back > a { +// padding: $off-canvas-label-padding; +// color: $off-canvas-label-color; +// text-transform: $off-canvas-label-text-transform; +// font-weight: $off-canvas-label-font-weight; +// background: $off-canvas-back-bg; +// border-top: $off-canvas-back-border-top; +// border-bottom: $off-canvas-back-border-bottom; +// &:hover { +// background: $off-canvas-back-hover-bg; +// border-top: $off-canvas-back-hover-border-top; +// border-bottom: $off-canvas-back-hover-border-bottom; +// } +// margin: $off-canvas-label-margin; +// @if $position == right { +// @if $text-direction == rtl { +// &:before { +// @include icon-double-arrows($position: left); +// } +// } @else { +// &:after { +// @include icon-double-arrows($position: right); +// } +// } +// } +// @if $position == left { +// @if $text-direction == rtl { +// &:after { +// @include icon-double-arrows($position: right); +// } +// } @else { +// &:before { +// @include icon-double-arrows($position: left); +// } +// } +// } +// } +// } +// //Left double angle quote or Right double angle quote chars +// @mixin icon-double-arrows ($position){ +// @if $position == left { +// content: "\AB"; +// @if $text-direction == rtl { +// margin-left: 0.5rem; +// } @else { +// margin-right: 0.5rem; +// } +// } +// @if $position == right { +// content: "\BB"; +// @if $text-direction == rtl { +// margin-right: 0.5rem; +// } @else { +// margin-left: 0.5rem; +// } +// } +// display: inline; +// } + +// @if $include-html-off-canvas-classes { +// .left-submenu { +// @include off-canvas-submenu($position: left); +// &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap { +// @include translate3d(0%,0,0); +// } +// } + +// .right-submenu { +// @include off-canvas-submenu($position: right); +// &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap { +// @include translate3d(0%,0,0); +// } +// } + +// @if $text-direction == rtl { +// .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { +// @include icon-double-arrows($position: left); +// } +// .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { +// @include icon-double-arrows($position: right); +// } +// } @else { +// .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { +// @include icon-double-arrows($position: right); +// } +// .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { +// @include icon-double-arrows($position: left); +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_orbit.scss b/app/styles/app/foundation/scss/foundation/components/_orbit.scss new file mode 100644 index 00000000..f2558c1c --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_orbit.scss @@ -0,0 +1,368 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // @variables +// // +// $include-html-orbit-classes: $include-html-classes !default; + +// // We use these to control the caption styles +// $orbit-container-bg: none !default; +// $orbit-caption-bg: rgba(51,51,51, 0.8) !default; +// $orbit-caption-font-color: $white !default; +// $orbit-caption-font-size: rem-calc(14) !default; +// $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under" +// $orbit-caption-padding: rem-calc(10 14) !default; +// $orbit-caption-height: auto !default; + +// // We use these to control the left/right nav styles +// $orbit-nav-bg: transparent !default; +// $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default; +// $orbit-nav-arrow-color: $white !default; +// $orbit-nav-arrow-color-hover: $white !default; + +// // We use these to control the timer styles +// $orbit-timer-bg: rgba(255,255,255,0.3) !default; +// $orbit-timer-show-progress-bar: true !default; + +// // We use these to control the bullet nav styles +// $orbit-bullet-nav-color: $iron !default; +// $orbit-bullet-nav-color-active: $aluminum !default; +// $orbit-bullet-radius: rem-calc(9) !default; + +// // We use these to controls the style of slide numbers +// $orbit-slide-number-bg: rgba(0,0,0,0) !default; +// $orbit-slide-number-font-color: $white !default; +// $orbit-slide-number-padding: rem-calc(5) !default; + +// // Graceful Loading Wrapper and preloader +// $wrapper-class: "slideshow-wrapper" !default; +// $preloader-class: "preloader" !default; + +// // Hide controls on small +// $orbit-nav-hide-for-small: true !default; +// $orbit-bullet-hide-for-small: true !default; +// $orbit-timer-hide-for-small: true !default; + + +// @include exports("orbit") { +// @if $include-html-orbit-classes { + +// @-webkit-keyframes rotate { +// from { -webkit-transform: rotate(0deg); } +// to { -webkit-transform: rotate(360deg); } +// } +// @-moz-keyframes rotate { +// from { -moz-transform: rotate(0deg); } +// to { -moz-transform: rotate(360deg); } +// } +// @-o-keyframes rotate { +// from { -o-transform: rotate(0deg); } +// to { -o-transform: rotate(360deg); } +// } +// @keyframes rotate { +// from { transform: rotate(0deg); } +// to { transform: rotate(360deg); } +// } + +// /* Orbit Graceful Loading */ +// .#{$wrapper-class} { +// position: relative; + +// ul { +// // Prevent bullets showing before .orbit-container is loaded +// list-style-type: none; +// margin: 0; + +// // Hide all list items +// li, +// li .orbit-caption { display: none; } + +// // ...except for the first one +// li:first-child { display: block; } +// } + +// .orbit-container { background-color: transparent; + +// // Show images when .orbit-container is loaded +// li { display: block; + +// .orbit-caption { display: block; } +// } +// .orbit-bullets li { +// display: inline-block; +// } +// } + +// // Orbit preloader +// .#{$preloader-class} { +// display: block; +// width: 40px; +// height: 40px; +// position: absolute; +// top: 50%; +// left: 50%; +// margin-top: -20px; +// margin-left: -20px; +// border: solid 3px; +// border-color: $charcoal $white; +// @include radius(1000px); +// animation-name: rotate; +// animation-duration: 1.5s; +// animation-iteration-count: infinite; +// animation-timing-function: linear; +// } +// } + + +// .orbit-container { +// overflow: hidden; +// width: 100%; +// position: relative; +// background: $orbit-container-bg; + +// .orbit-slides-container { +// list-style: none; +// margin: 0; +// padding: 0; +// position: relative; + +// // Prevents images (and captions) from disappearing after first rotation on Chrome for Android +// -webkit-transform: translateZ(0); + +// img { display: block; max-width: 100%; } + +// &>* { +// position: absolute; +// top: 0; +// width: 100%; +// @if $text-direction == rtl { +// margin-right: 100%; +// } +// @else { +// margin-left: 100%; +// } + +// &:first-child { +// @if $text-direction == rtl { +// margin-right: 0; +// } +// @else { +// margin-left: 0; +// } +// } + +// .orbit-caption { +// @if $orbit-caption-position == "bottom" { +// position: absolute; +// bottom: 0; +// } @else if $orbit-caption-position == "under" { +// position: relative; +// } + +// background-color: $orbit-caption-bg; +// color: $orbit-caption-font-color; +// width: 100%; +// padding: $orbit-caption-padding; +// font-size: $orbit-caption-font-size; +// } +// } +// } + +// .orbit-slide-number { +// position: absolute; +// top: 10px; +// #{$default-float}: 10px; +// font-size: 12px; +// span { font-weight: 700; padding: $orbit-slide-number-padding;} +// color: $orbit-slide-number-font-color; +// background: $orbit-slide-number-bg; +// z-index: 10; +// } + +// .orbit-timer { +// position: absolute; +// top: 12px; +// #{$opposite-direction}: 10px; +// height: 6px; +// width: 100px; +// z-index: 10; +// .orbit-progress { +// @if $orbit-timer-show-progress-bar { +// height: 3px; +// background-color: $orbit-timer-bg; +// display: block; +// width: 0; +// position: relative; +// right: 20px; +// top: 5px; +// } +// } + +// // Play button +// & > span { +// display: none; +// position: absolute; +// top: 0; +// #{$opposite-direction}: 0; +// width: 11px; +// height: 14px; +// border: solid 4px $white; +// border-top: none; +// border-bottom: none; +// } + +// // Pause button +// &.paused { +// & > span { +// #{$opposite-direction}: -4px; +// top: 0; +// width: 11px; +// height: 14px; +// border: inset 8px; +// border-left-style: solid; +// border-color: transparent; +// border-left-color: $white; +// &.dark { +// border-left-color: $oil; +// } +// } +// } +// } + + + +// &:hover .orbit-timer > span { display: block; } + +// // Let's get those controls to be right in the center on each side +// .orbit-prev, +// .orbit-next { +// position: absolute; +// top: 45%; +// margin-top: -25px; +// width: 36px; +// height: 60px; +// line-height: 50px; +// color: white; +// background-color: $orbit-nav-bg; +// text-indent: -9999px !important; +// z-index: 10; + +// &:hover { +// background-color: $orbit-nav-bg-hover; +// } + +// & > span { +// position: absolute; +// top: 50%; +// margin-top: -10px; +// display: block; +// width: 0; +// height: 0; +// border: inset 10px; +// } +// } +// .orbit-prev { #{$default-float}: 0; +// & > span { +// border-#{$opposite-direction}-style: solid; +// border-color: transparent; +// border-#{$opposite-direction}-color: $orbit-nav-arrow-color; +// } +// &:hover > span { +// border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover; +// } +// } +// .orbit-next { #{$opposite-direction}: 0; +// & > span { +// border-color: transparent; +// border-#{$default-float}-style: solid; +// border-#{$default-float}-color: $orbit-nav-arrow-color; +// #{$default-float}: 50%; +// margin-#{$default-float}: -4px; +// } +// &:hover > span { +// border-#{$default-float}-color: $orbit-nav-arrow-color-hover; +// } +// } +// } + +// .orbit-bullets-container { text-align: center; } +// .orbit-bullets { +// margin: 0 auto 30px auto; +// overflow: hidden; +// position: relative; +// top: 10px; +// float: none; +// text-align: center; +// display: block; + +// li { +// cursor:pointer; +// display: inline-block; +// width: $orbit-bullet-radius; +// height: $orbit-bullet-radius; +// background: $orbit-bullet-nav-color; +// // float: $default-float; +// float: none; +// margin-#{$opposite-direction}: 6px; +// @include radius(1000px); + +// &.active { +// background: $orbit-bullet-nav-color-active; +// } + +// &:last-child { margin-#{$opposite-direction}: 0; } +// } +// } + +// .touch { +// .orbit-container { +// .orbit-prev, +// .orbit-next { display: none; } +// } + +// .orbit-bullets { display: none; } +// } + + +// @media #{$medium-up} { + +// .touch { +// .orbit-container { +// .orbit-prev, +// .orbit-next { display: inherit; } +// } + +// .orbit-bullets { display: block; } +// } + +// } + +// @media #{$small-only} { +// .orbit-stack-on-small { +// .orbit-slides-container {height: auto !important;} +// .orbit-slides-container > * { +// position: relative; +// margin:0 !important; +// opacity:1 !important; +// } + +// .orbit-slide-number { +// display: none; +// } +// } + +// @if $orbit-timer-hide-for-small { +// .orbit-timer{display: none;} +// } +// @if $orbit-nav-hide-for-small { +// .orbit-next,.orbit-prev{display: none;} +// } +// @if $orbit-bullet-hide-for-small { +// .orbit-bullets{display: none;} +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_pagination.scss b/app/styles/app/foundation/scss/foundation/components/_pagination.scss new file mode 100644 index 00000000..48ebe100 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_pagination.scss @@ -0,0 +1,162 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-pagination-classes: $include-html-classes !default; + +// // We use these to control the pagination container +// $pagination-height: rem-calc(24) !default; +// $pagination-margin: rem-calc(-5) !default; + +// // We use these to set the list-item properties +// $pagination-li-float: $default-float !default; +// $pagination-li-height: rem-calc(24) !default; +// $pagination-li-font-color: $jet !default; +// $pagination-li-font-size: rem-calc(14) !default; +// $pagination-li-margin: rem-calc(5) !default; + +// // We use these for the pagination anchor links +// $pagination-link-pad: rem-calc(1 10 1) !default; +// $pagination-link-font-color: $aluminum !default; +// $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default; + +// // We use these for disabled anchor links +// $pagination-link-unavailable-cursor: default !default; +// $pagination-link-unavailable-font-color: $aluminum !default; +// $pagination-link-unavailable-bg-active: transparent !default; + +// // We use these for currently selected anchor links +// $pagination-link-current-background: $primary-color !default; +// $pagination-link-current-font-color: $white !default; +// $pagination-link-current-font-weight: $font-weight-bold !default; +// $pagination-link-current-cursor: default !default; +// $pagination-link-current-active-bg: $primary-color !default; + +// // @mixins +// // +// // Style the pagination container. Currently only used when centering elements. +// // $center - Default: false, Options: true +// @mixin pagination-container($center:false) { +// @if $center { text-align: center; } +// } + +// // @mixins +// // Style unavailable list items +// @mixin pagination-unavailable-item { +// a, button { +// cursor: $pagination-link-unavailable-cursor; +// color: $pagination-link-unavailable-font-color; +// } +// &:hover a, +// & a:focus, + +// &:hover button, +// & button:focus +// { background: $pagination-link-unavailable-bg-active; } +// } +// // @mixins +// // Style the current list item. Do not assume that the current item has +// // an anchor element. +// // $has-anchor - Default: true, Options: false +// @mixin pagination-current-item($has-anchor: true) { +// @if $has-anchor { +// a, button { +// background: $pagination-link-current-background; +// color: $pagination-link-current-font-color; +// font-weight: $pagination-link-current-font-weight; +// cursor: $pagination-link-current-cursor; + +// &:hover, +// &:focus { background: $pagination-link-current-active-bg; } +// } +// } @else { +// height: auto; +// padding: $pagination-link-pad; +// background: $pagination-link-current-background; +// color: $pagination-link-current-font-color; +// font-weight: $pagination-link-current-font-weight; +// cursor: $pagination-link-current-cursor; +// @include radius; + +// &:hover, +// &:focus { background: $pagination-link-current-active-bg; } +// } +// } + +// // @mixins +// // +// // We use this mixin to set the properties for the creating Foundation pagination +// // $center - Left or center align the li elements. Default: false +// // $base-style - Sets base styles for pagination. Default: true, Options: false +// // $use-default-classes - Makes unavailable & current classes available for use. Default: true +// @mixin pagination($center:false, $base-style:true, $use-default-classes:true) { + +// @if $base-style { +// display: block; +// min-height: $pagination-height; +// margin-#{$default-float}: $pagination-margin; + +// li { +// height: $pagination-li-height; +// color: $pagination-li-font-color; +// font-size: $pagination-li-font-size; +// margin-#{$default-float}: $pagination-li-margin; + +// a, button { +// display: block; +// padding: $pagination-link-pad; +// color: $pagination-link-font-color; +// background: none; +// @include radius; +// font-weight: normal; +// font-size: 1em; +// line-height: inherit; +// @include single-transition(background-color); +// } + +// &:hover a, +// a:focus, +// &:hover button, +// button:focus +// { background: $pagination-link-active-bg; } + +// @if $use-default-classes { +// &.unavailable { @include pagination-unavailable-item(); } +// &.current { @include pagination-current-item(); } +// } +// } +// } + +// // Left or center align the li elements +// li { +// @if $center { +// float: none; +// display: inline-block; +// } @else { +// float: $pagination-li-float; +// display: block; +// } +// } +// } + +// @include exports("pagination") { +// @if $include-pagination-classes { +// ul.pagination { +// @include pagination; +// } + +// /* Pagination centred wrapper */ +// .pagination-centered { +// @include pagination-container(true); + +// ul.pagination { +// @include pagination(true, false); +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_panels.scss b/app/styles/app/foundation/scss/foundation/components/_panels.scss new file mode 100644 index 00000000..173195cf --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_panels.scss @@ -0,0 +1,101 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-panel-classes: $include-html-classes !default; + +// // We use these to control the background and border styles +// $panel-bg: scale-color($white, $lightness: -5%) !default; +// $panel-border-style: solid !default; +// $panel-border-size: 1px !default; + +// // We use this % to control how much we darken things on hover +// $panel-function-factor: -11% !default; +// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default; + +// // We use these to set default inner padding and bottom margin +// $panel-margin-bottom: rem-calc(20) !default; +// $panel-padding: rem-calc(20) !default; + +// // We use these to set default font colors +// $panel-font-color: $oil !default; +// $panel-font-color-alt: $white !default; + +// $panel-header-adjust: true !default; +// $callout-panel-link-color: $primary-color !default; +// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default; +// // +// // @mixins +// // +// // We use this mixin to create panels. +// // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default +// // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20) +// // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true +// @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) { + +// @if $bg { +// $bg-lightness: lightness($bg); + +// border-style: $panel-border-style; +// border-width: $panel-border-size; +// border-color: scale-color($bg, $lightness: $panel-function-factor); +// margin-bottom: $panel-margin-bottom; +// padding: $padding; + +// background: $bg; +// @if $bg-lightness >= 50% { color: $panel-font-color; } +// @else { color: $panel-font-color-alt; } + +// // Respect the padding, fool. +// &>:first-child { margin-top: 0; } +// &>:last-child { margin-bottom: 0; } + +// @if $adjust { +// // We set the font color based on the darkness of the bg. +// @if $bg-lightness >= 50% { +// h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; } +// } +// @else { +// h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; } +// } + +// // reset header line-heights for panels +// h1,h2,h3,h4,h5,h6 { +// line-height: 1; margin-bottom: rem-calc(20) / 2; +// &.subheader { line-height: 1.4; } +// } +// } +// } +// } + +// @include exports("panel") { +// @if $include-html-panel-classes { + +// /* Panels */ +// .panel { @include panel; + +// &.callout { +// @include panel(scale-color($primary-color, $lightness: 94%)); +// a:not(.button) { +// color: $callout-panel-link-color; + +// &:hover, +// &:focus { +// color: $callout-panel-link-color-hover; +// } +// } +// } + +// &.radius { +// @include radius; +// } + +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss b/app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss new file mode 100644 index 00000000..34318580 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_pricing-tables.scss @@ -0,0 +1,150 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-pricing-classes: $include-html-classes !default; + +// // We use this to control the border color +// $price-table-border: solid 1px $gainsboro !default; + +// // We use this to control the bottom margin of the pricing table +// $price-table-margin-bottom: rem-calc(20) !default; + +// // We use these to control the title styles +// $price-title-bg: $oil !default; +// $price-title-padding: rem-calc(15 20) !default; +// $price-title-align: center !default; +// $price-title-color: $smoke !default; +// $price-title-weight: $font-weight-normal !default; +// $price-title-size: rem-calc(16) !default; +// $price-title-font-family: $body-font-family !default; + +// // We use these to control the price styles +// $price-money-bg: $vapor !default; +// $price-money-padding: rem-calc(15 20) !default; +// $price-money-align: center !default; +// $price-money-color: $oil !default; +// $price-money-weight: $font-weight-normal !default; +// $price-money-size: rem-calc(32) !default; +// $price-money-font-family: $body-font-family !default; + + +// // We use these to control the description styles +// $price-bg: $white !default; +// $price-desc-color: $monsoon !default; +// $price-desc-padding: rem-calc(15) !default; +// $price-desc-align: center !default; +// $price-desc-font-size: rem-calc(12) !default; +// $price-desc-weight: $font-weight-normal !default; +// $price-desc-line-height: 1.4 !default; +// $price-desc-bottom-border: dotted 1px $gainsboro !default; + +// // We use these to control the list item styles +// $price-item-color: $oil !default; +// $price-item-padding: rem-calc(15) !default; +// $price-item-align: center !default; +// $price-item-font-size: rem-calc(14) !default; +// $price-item-weight: $font-weight-normal !default; +// $price-item-bottom-border: dotted 1px $gainsboro !default; + +// // We use these to control the CTA area styles +// $price-cta-bg: $white !default; +// $price-cta-align: center !default; +// $price-cta-padding: rem-calc(20 20 0) !default; + +// // @mixins +// // +// // We use this to create the container element for the pricing tables +// @mixin pricing-table-container { +// border: $price-table-border; +// margin-#{$default-float}: 0; +// margin-bottom: $price-table-margin-bottom; + +// & * { +// list-style: none; +// line-height: 1; +// } +// } +// // @mixins +// // +// // We use this mixin to create the pricing table title styles +// @mixin pricing-table-title { +// background-color: $price-title-bg; +// padding: $price-title-padding; +// text-align: $price-title-align; +// color: $price-title-color; +// font-weight: $price-title-weight; +// font-size: $price-title-size; +// font-family: $price-title-font-family; +// } + +// // @mixins +// // +// // We use this mixin to control the pricing table price styles +// @mixin pricing-table-price { +// background-color: $price-money-bg; +// padding: $price-money-padding; +// text-align: $price-money-align; +// color: $price-money-color; +// font-weight: $price-money-weight; +// font-size: $price-money-size; +// font-family: $price-money-font-family; +// } + +// // @mixins +// // +// // We use this mixin to create the description styles for the pricing table +// @mixin pricing-table-description { +// background-color: $price-bg; +// padding: $price-desc-padding; +// text-align: $price-desc-align; +// color: $price-desc-color; +// font-size: $price-desc-font-size; +// font-weight: $price-desc-weight; +// line-height: $price-desc-line-height; +// border-bottom: $price-desc-bottom-border; +// } + +// // @mixins +// // +// // We use this mixin to style the bullet items in the pricing table +// @mixin pricing-table-bullet { +// background-color: $price-bg; +// padding: $price-item-padding; +// text-align: $price-item-align; +// color: $price-item-color; +// font-size: $price-item-font-size; +// font-weight: $price-item-weight; +// border-bottom: $price-item-bottom-border; +// } + +// // @mixins +// // +// // We use this mixin to style the CTA area of the pricing tables +// @mixin pricing-table-cta { +// background-color: $price-cta-bg; +// text-align: $price-cta-align; +// padding: $price-cta-padding; +// } + +// @include exports("pricing-table") { +// @if $include-html-pricing-classes { + +// /* Pricing Tables */ +// .pricing-table { +// @include pricing-table-container; + +// .title { @include pricing-table-title; } +// .price { @include pricing-table-price; } +// .description { @include pricing-table-description; } +// .bullet-item { @include pricing-table-bullet; } +// .cta-button { @include pricing-table-cta; } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_progress-bars.scss b/app/styles/app/foundation/scss/foundation/components/_progress-bars.scss new file mode 100644 index 00000000..5191a08d --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_progress-bars.scss @@ -0,0 +1,79 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // +// $include-html-media-classes: $include-html-classes !default; + +// // We use this to set the progress bar height +// $progress-bar-height: rem-calc(25) !default; +// $progress-bar-color: $vapor !default; + +// // We use these to control the border styles +// $progress-bar-border-color: scale-color($white, $lightness: 20%) !default; +// $progress-bar-border-size: 1px !default; +// $progress-bar-border-style: solid !default; +// $progress-bar-border-radius: $global-radius !default; + +// // We use these to control the margin & padding +// $progress-bar-pad: rem-calc(2) !default; +// $progress-bar-margin-bottom: rem-calc(10) !default; + +// // We use these to set the meter colors +// $progress-meter-color: $primary-color !default; +// $progress-meter-secondary-color: $secondary-color !default; +// $progress-meter-success-color: $success-color !default; +// $progress-meter-alert-color: $alert-color !default; + +// // @mixins +// // +// // We use this to set up the progress bar container +// @mixin progress-container { +// background-color: $progress-bar-color; +// height: $progress-bar-height; +// border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color; +// padding: $progress-bar-pad; +// margin-bottom: $progress-bar-margin-bottom; +// } + +// // @mixins +// // +// // $bg - Default: $progress-meter-color || $primary-color +// @mixin progress-meter($bg:$progress-meter-color) { +// background: $bg; +// height: 100%; +// display: block; +// } + + +// @include exports("progress-bar") { +// @if $include-html-media-classes { + +// /* Progress Bar */ +// .progress { +// @include progress-container; + +// // Meter +// .meter { +// @include progress-meter; +// } +// &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); } +// &.success .meter { @include progress-meter($bg:$progress-meter-success-color); } +// &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); } + +// &.radius { @include radius($progress-bar-border-radius); +// .meter { @include radius($progress-bar-border-radius - 1); } +// } + +// &.round { @include radius(1000px); +// .meter { @include radius(999px); } +// } + +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_range-slider.scss b/app/styles/app/foundation/scss/foundation/components/_range-slider.scss new file mode 100644 index 00000000..d50833f0 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_range-slider.scss @@ -0,0 +1,168 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @name _range-slider.scss +// // @dependencies _global.scss +// // + +// // +// // @variables +// // + +// $include-html-range-slider-classes: $include-html-classes !default; + +// // These variabels define the slider bar styles +// $range-slider-bar-width: 100% !default; +// $range-slider-bar-height: rem-calc(16) !default; + +// $range-slider-bar-border-width: 1px !default; +// $range-slider-bar-border-style: solid !default; +// $range-slider-bar-border-color: $gainsboro !default; +// $range-slider-radius: $global-radius !default; +// $range-slider-round: $global-rounded !default; +// $range-slider-bar-bg-color: $ghost !default; +// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default; + +// // Vertical bar styles +// $range-slider-vertical-bar-width: rem-calc(16) !default; +// $range-slider-vertical-bar-height: rem-calc(200) !default; + +// // These variabels define the slider handle styles +// $range-slider-handle-width: rem-calc(32) !default; +// $range-slider-handle-height: rem-calc(22) !default; +// $range-slider-handle-position-top: rem-calc(-5) !default; +// $range-slider-handle-bg-color: $primary-color !default; +// $range-slider-handle-border-width: 1px !default; +// $range-slider-handle-border-style: solid !default; +// $range-slider-handle-border-color: none !default; +// $range-slider-handle-radius: $global-radius !default; +// $range-slider-handle-round: $global-rounded !default; +// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default; +// $range-slider-handle-cursor: pointer !default; + +// $range-slider-disabled-opacity: 0.7 !default; + +// // +// // @mixins +// // + +// @mixin range-slider-bar-base($vertical: false) { +// display: block; +// position: relative; +// width: $range-slider-bar-width; +// height: $range-slider-bar-height; +// border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color; +// margin: rem-calc(20 0); +// -ms-touch-action: none; +// touch-action: none; +// @if $vertical == true { +// display: inline-block; +// width: $range-slider-vertical-bar-width; +// height: $range-slider-vertical-bar-height; +// } +// } +// @mixin range-slider-bar-style( +// $bg: true, +// $radius: false, +// $round: false, +// $disabled: false) { +// @if $bg == true { background: $range-slider-bar-bg-color; } +// @if $radius == true { @include radius($range-slider-radius); } +// @if $round == true { @include radius($range-slider-round); } +// @if $disabled == true { +// cursor: $cursor-default-value; +// opacity: $range-slider-disabled-opacity; +// } +// } + +// @mixin range-slider-bar( +// $bg: $range-slider-bar-bg-color, +// $radius:false) { +// @include range-slider-bar-base; +// @include range-slider-bar-style; +// } + +// @mixin range-slider-handle-base() { +// display: inline-block; +// position: absolute; +// z-index: 1; +// top: $range-slider-handle-position-top; +// width: $range-slider-handle-width; +// height: $range-slider-handle-height; +// border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color; +// cursor: $range-slider-handle-cursor; + +// // This removes the 300ms touch delay on Windows 8 +// -ms-touch-action: manipulation; +// touch-action: manipulation; +// } +// @mixin range-slider-handle-style( +// $bg: true, +// $radius: false, +// $round: false, +// $disabled: false) { +// @if $bg == true { background: $range-slider-handle-bg-color; } +// @if $radius == true { @include radius($range-slider-radius); } +// @if $round == true { @include radius($range-slider-round); } +// @if $disabled == true { +// cursor: $cursor-default-value; +// opacity: $range-slider-disabled-opacity; +// } +// &:hover { +// background: $range-slider-handle-bg-hover-color; +// } +// } +// @mixin range-slider-handle() { +// @include range-slider-handle-base; +// @include range-slider-handle-style; +// } + +// // CSS Generation +// @include exports("range-slider-bar") { +// @if $include-html-range-slider-classes { +// .range-slider { +// @include range-slider-bar-base; +// @include range-slider-bar-style($bg:true, $radius:false); +// &.vertical-range { +// @include range-slider-bar-base($vertical: true); +// .range-slider-handle { +// margin-top: 0; +// margin-#{$default-float}: -($range-slider-handle-width / 4); +// position: absolute; +// bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width); +// } +// .range-slider-active-segment { +// width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); +// height: auto; +// bottom: 0; +// } +// } +// &.radius { +// @include range-slider-bar-style($radius:true); +// .range-slider-handle { @include range-slider-handle-style($radius: true); } +// } +// &.round { +// @include range-slider-bar-style($round:true); +// .range-slider-handle { @include range-slider-handle-style($round: true); } +// } +// &.disabled, &[disabled] { +// @include range-slider-bar-style($disabled:true); +// .range-slider-handle { @include range-slider-handle-style($disabled: true); } +// } +// } +// .range-slider-active-segment { +// display: inline-block; +// position: absolute; +// height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); +// background: $range-slider-active-segment-bg-color; +// } +// .range-slider-handle { +// @include range-slider-handle-base; +// @include range-slider-handle-style($bg:true, $radius: false); +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_reveal.scss b/app/styles/app/foundation/scss/foundation/components/_reveal.scss new file mode 100644 index 00000000..1aae17a6 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_reveal.scss @@ -0,0 +1,223 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "grid"; + +// // +// // @name _reveal.scss +// // @dependencies _global.scss +// // + +// $include-html-reveal-classes: $include-html-classes !default; + +// // We use these to control the style of the reveal overlay. +// $reveal-overlay-bg: rgba($black, .45) !default; +// $reveal-overlay-bg-old: $black !default; + +// // We use these to control the style of the modal itself. +// $reveal-modal-bg: $white !default; +// $reveal-position-top: rem-calc(100) !default; +// $reveal-default-width: 80% !default; +// $reveal-max-width: $row-width !default; +// $reveal-modal-padding: rem-calc(20) !default; +// $reveal-box-shadow: 0 0 10px rgba($black,.4) !default; + +// // We use these to style the reveal close button +// $reveal-close-font-size: rem-calc(40) !default; +// $reveal-close-top: rem-calc(10) !default; +// $reveal-close-side: rem-calc(22) !default; +// $reveal-close-color: $base !default; +// $reveal-close-weight: $font-weight-bold !default; + +// // We use this to set the default radius used throughout the core. +// $reveal-radius: $global-radius !default; +// $reveal-round: $global-rounded !default; + +// // We use these to control the modal border +// $reveal-border-style: solid !default; +// $reveal-border-width: 1px !default; +// $reveal-border-color: $steel !default; + +// $reveal-modal-class: "reveal-modal" !default; +// $close-reveal-modal-class: "close-reveal-modal" !default; + +// // +// // @mixins +// // + +// // We use this to create the reveal background overlay styles +// @mixin reveal-bg( $include-z-index-value: true ) { +// //position: fixed; +// position: absolute; // allows modal background to extend beyond window position +// top: 0; +// bottom: 0; +// left: 0; +// right: 0; +// background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. +// background: $reveal-overlay-bg; +// z-index: if( $include-z-index-value, 1004, auto ); +// display: none; +// #{$default-float}: 0; +// } + +// // We use this mixin to create the structure of a reveal modal +// // +// // $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false +// // $width - Sets reveal width Default: $reveal-default-width || 80% +// // +// @mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) { +// @if $base-style { +// visibility: hidden; +// display: none; +// position: absolute; +// z-index: 1005; +// width: 100vw; +// top:0; +// border-radius: $border-radius; +// #{$default-float}: 0; + +// @media #{$small-only} { +// min-height:100vh; +// } + +// // Make sure rows don't have a min-width on them +// .column, .columns { min-width: 0; } + +// // Get rid of margin from first and last element inside modal +// & > :first-child { margin-top: 0; } + +// & > :last-child { margin-bottom: 0; } +// } + +// @if $width { +// @media #{$medium-up} { +// width: $width; +// max-width: $max-width; +// left: 0; +// right: 0; +// margin: 0 auto; +// } +// } +// } + +// // We use this to style the reveal modal defaults +// // +// // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white +// // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding. +// // $border - Choose whether reveal uses a border. Default: true, Options: false +// // $border-style - Set reveal border style. Default: $reveal-border-style || solid +// // $border-width - Width of border (i.e. 1px). Default: $reveal-border-width. +// // $border-color - Color of border. Default: $reveal-border-color. +// // $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false +// // $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false +// // $top-offset - Default: $reveal-position-top || 50px +// @mixin reveal-modal-style( +// $bg:false, +// $padding:false, +// $border:false, +// $border-style:$reveal-border-style, +// $border-width:$reveal-border-width, +// $border-color:$reveal-border-color, +// $box-shadow:false, +// $radius:false, +// $top-offset:false) { + +// @if $bg { background-color: $bg; } +// @if $padding != false { padding: $padding; } + +// @if $border { border: $border-style $border-width $border-color; } + +// // We can choose whether or not to include the default box-shadow. +// @if $box-shadow { +// box-shadow: $reveal-box-shadow; +// } + +// // We can control how much radius is used on the modal +// @if $radius == true { @include radius($reveal-radius); } +// @else if $radius { @include radius($radius); } + +// @if $top-offset { +// @media #{$medium-up} { +// top: $top-offset; +// } +// } +// } + +// // We use this to create a close button for the reveal modal +// // +// // $color - Default: $reveal-close-color || $base +// @mixin reveal-close($color:$reveal-close-color) { +// font-size: $reveal-close-font-size; +// line-height: 1; +// position: absolute; +// top: $reveal-close-top; +// #{$opposite-direction}: $reveal-close-side; +// color: $color; +// font-weight: $reveal-close-weight; +// cursor: $cursor-pointer-value; +// } + +// @include exports("reveal") { +// @if $include-html-reveal-classes { + +// // Reveal Modals +// .reveal-modal-bg { @include reveal-bg; } + +// .#{$reveal-modal-class} { +// @include reveal-modal-base; +// @include reveal-modal-style( +// $bg:$reveal-modal-bg, +// $padding:$reveal-modal-padding, +// $border:true, +// $box-shadow:true, +// $radius:false, +// $top-offset:$reveal-position-top +// ); +// @include reveal-modal-style($padding:$reveal-modal-padding * 1.5); + +// &.radius { @include reveal-modal-style($radius:true); } +// &.round { @include reveal-modal-style($radius:$reveal-round); } +// &.collapse { @include reveal-modal-style($padding:0); } +// &.tiny { @include reveal-modal-base(false, 30%); } +// &.small { @include reveal-modal-base(false, 40%); } +// &.medium { @include reveal-modal-base(false, 60%); } +// &.large { @include reveal-modal-base(false, 70%); } +// &.xlarge { @include reveal-modal-base(false, 95%); } +// &.full { +// @include reveal-modal-base(false, 100vw); +// top:0; +// left:0; +// height:100%; +// height: 100vh; +// min-height:100vh; +// max-width: none !important; +// margin-left: 0 !important; +// } + +// .#{$close-reveal-modal-class} { @include reveal-close; } +// } + +// dialog { +// @extend .#{$reveal-modal-class}; +// display: none; + +// &::backdrop, & + .backdrop { +// @include reveal-bg(false); +// } + +// &[open]{ +// display: block; +// } +// } + +// // Reveal Print Styles: It should be invisible, adds no value being printed. +// @media print { +// dialog, .#{$reveal-modal-class} { +// display: none; +// background: $white !important; +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_side-nav.scss b/app/styles/app/foundation/scss/foundation/components/_side-nav.scss new file mode 100644 index 00000000..f498930d --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_side-nav.scss @@ -0,0 +1,116 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @variables +// // + +// $include-html-nav-classes: $include-html-classes !default; + +// // We use this to control padding. +// $side-nav-padding: rem-calc(14 0) !default; + +// // We use these to control list styles. +// $side-nav-list-type: none !default; +// $side-nav-list-position: outside !default; +// $side-nav-list-margin: rem-calc(0 0 7 0) !default; + +// // We use these to control link styles. +// $side-nav-link-color: $primary-color !default; +// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default; +// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default; +// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default; +// $side-nav-link-margin: 0 !default; +// $side-nav-link-padding: rem-calc(7 14) !default; +// $side-nav-font-size: rem-calc(14) !default; +// $side-nav-font-weight: $font-weight-normal !default; +// $side-nav-font-weight-active: $side-nav-font-weight !default; +// $side-nav-font-family: $body-font-family !default; +// $side-nav-font-family-active: $side-nav-font-family !default; + +// // We use these to control heading styles. +// $side-nav-heading-color: $side-nav-link-color !default; +// $side-nav-heading-font-size: $side-nav-font-size !default; +// $side-nav-heading-font-weight: bold !default; +// $side-nav-heading-text-transform: uppercase !default; + +// // We use these to control border styles +// $side-nav-divider-size: 1px !default; +// $side-nav-divider-style: solid !default; +// $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; + + +// // +// // @mixins +// // + + +// // We use this to style the side-nav +// // +// // $divider-color - Border color of divider. Default: $side-nav-divider-color. +// // $font-size - Font size of nav items. Default: $side-nav-font-size. +// // $link-color - Color of navigation links. Default: $side-nav-link-color. +// // $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover. +// @mixin side-nav( +// $divider-color:$side-nav-divider-color, +// $font-size:$side-nav-font-size, +// $link-color:$side-nav-link-color, +// $link-color-hover:$side-nav-link-color-hover, +// $link-bg-hover:$side-nav-link-bg-hover) { +// display: block; +// margin: 0; +// padding: $side-nav-padding; +// list-style-type: $side-nav-list-type; +// list-style-position: $side-nav-list-position; +// font-family: $side-nav-font-family; + +// li { +// margin: $side-nav-list-margin; +// font-size: $font-size; +// font-weight: $side-nav-font-weight; + +// a:not(.button) { +// display: block; +// color: $link-color; +// margin: $side-nav-link-margin; +// padding: $side-nav-link-padding; +// &:hover, +// &:focus { +// background: $link-bg-hover; +// color: $link-color-hover; +// } +// } + +// &.active > a:first-child:not(.button) { +// color: $side-nav-link-color-active; +// font-weight: $side-nav-font-weight-active; +// font-family: $side-nav-font-family-active; +// } + +// &.divider { +// border-top: $side-nav-divider-size $side-nav-divider-style; +// height: 0; +// padding: 0; +// list-style: none; +// border-top-color: $divider-color; +// } + +// &.heading { +// color: $side-nav-heading-color; +// font: { +// size: $side-nav-heading-font-size; +// weight: $side-nav-heading-font-weight; +// } +// text-transform: $side-nav-heading-text-transform; +// } +// } +// } + +// @include exports("side-nav") { +// @if $include-html-nav-classes { +// .side-nav { @include side-nav; } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_split-buttons.scss b/app/styles/app/foundation/scss/foundation/components/_split-buttons.scss new file mode 100644 index 00000000..21c0e100 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_split-buttons.scss @@ -0,0 +1,191 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "buttons"; +// @import "dropdown-buttons"; + +// // +// // @name _split-buttons.scss +// // @dependencies _buttons.scss, _global.scss +// // + +// // +// // @variables +// // + +// $include-html-button-classes: $include-html-classes !default; + +// // We use these to control different shared styles for Split Buttons +// $split-button-function-factor: 10% !default; +// $split-button-pip-color: $white !default; +// $split-button-pip-color-alt: $oil !default; +// $split-button-active-bg-tint: rgba(0,0,0,0.1) !default; + +// // We use these to control tiny split buttons +// $split-button-padding-tny: $button-pip-tny * 10 !default; +// $split-button-span-width-tny: $button-pip-tny * 6 !default; +// $split-button-pip-size-tny: $button-pip-tny !default; +// $split-button-pip-top-tny: $button-pip-tny * 2 !default; +// $split-button-pip-default-float-tny: rem-calc(-6) !default; + +// // We use these to control small split buttons +// $split-button-padding-sml: $button-pip-sml * 10 !default; +// $split-button-span-width-sml: $button-pip-sml * 6 !default; +// $split-button-pip-size-sml: $button-pip-sml !default; +// $split-button-pip-top-sml: $button-pip-sml * 1.5 !default; +// $split-button-pip-default-float-sml: rem-calc(-6) !default; + +// // We use these to control medium split buttons +// $split-button-padding-med: $button-pip-med * 9 !default; +// $split-button-span-width-med: $button-pip-med * 5.5 !default; +// $split-button-pip-size-med: $button-pip-med - rem-calc(3) !default; +// $split-button-pip-top-med: $button-pip-med * 1.5 !default; +// $split-button-pip-default-float-med: rem-calc(-6) !default; + +// // We use these to control large split buttons +// $split-button-padding-lrg: $button-pip-lrg * 8 !default; +// $split-button-span-width-lrg: $button-pip-lrg * 5 !default; +// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default; +// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5) !default; +// $split-button-pip-default-float-lrg: rem-calc(-6) !default; + + +// // +// // @mixins +// // + +// // We use this mixin to create split buttons that build upon the button mixins +// // +// // $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large. +// // $pip-color - Color of the triangle. Default: $split-button-pip-color. +// // $span-border - Border color of button divider. Default: $primary-color. +// // $base-style - Apply base style to split button. Default: true. +// @mixin split-button( +// $padding:medium, +// $pip-color:$split-button-pip-color, +// $span-border:$primary-color, +// $base-style:true) { + +// // With this, we can control whether or not the base styles come through. +// @if $base-style { +// position: relative; + +// // Styling for the split arrow clickable area +// span { +// display: block; +// height: 100%; +// position: absolute; +// #{$opposite-direction}: 0; +// top: 0; +// border-#{$default-float}: solid 1px; + +// // Building the triangle pip indicator +// &:after { +// position: absolute; +// content: ""; +// width: 0; +// height: 0; +// display: block; +// border-style: inset; +// top: 50%; + +// #{$default-float}: 50%; +// } + +// &:active { background-color: $split-button-active-bg-tint; } +// } +// } + +// // Control the border color for the span area of the split button +// @if $span-border { +// span { +// border-#{$default-float}-color: rgba(255,255,255,0.5); +// } +// } + +// // Style of the button and clickable area for tiny sizes +// @if $padding == tiny { +// padding-#{$opposite-direction}: $split-button-padding-tny; + +// span { width: $split-button-span-width-tny; +// &:after { +// border-top-style: solid; +// border-width: $split-button-pip-size-tny; +// top: 48%; +// margin-#{$default-float}: $split-button-pip-default-float-tny; +// } +// } +// } + +// // Style of the button and clickable area for small sizes +// @else if $padding == small { +// padding-#{$opposite-direction}: $split-button-padding-sml; + +// span { width: $split-button-span-width-sml; +// &:after { +// border-top-style: solid; +// border-width: $split-button-pip-size-sml; +// top: 48%; +// margin-#{$default-float}: $split-button-pip-default-float-sml; +// } +// } +// } + +// // Style of the button and clickable area for default (medium) sizes +// @else if $padding == medium { +// padding-#{$opposite-direction}: $split-button-padding-med; + +// span { width: $split-button-span-width-med; +// &:after { +// border-top-style: solid; +// border-width: $split-button-pip-size-med; +// top: 48%; +// margin-#{$default-float}: $split-button-pip-default-float-med; +// } +// } +// } + +// // Style of the button and clickable area for large sizes +// @else if $padding == large { +// padding-#{$opposite-direction}: $split-button-padding-lrg; + +// span { width: $split-button-span-width-lrg; +// &:after { +// border-top-style: solid; +// border-width: $split-button-pip-size-lrg; +// top: 48%; +// margin-#{$default-float}: $split-button-pip-default-float-lrg; +// } +// } +// } + +// // Control the color of the triangle pip +// @if $pip-color { +// span:after { border-color: $pip-color transparent transparent transparent; } +// } +// } + +// @include exports("split-button") { +// @if $include-html-button-classes { + +// .split.button { @include split-button; + +// &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); } +// &.alert { @include split-button(false, false, $alert-color, false); } +// &.success { @include split-button(false, false, $success-color, false); } + +// &.tiny { @include split-button(tiny, false, false, false); } +// &.small { @include split-button(small, false, false, false); } +// &.large { @include split-button(large, false, false, false); } +// &.expand { padding-left: 2rem; } + +// &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); } + +// &.radius span { @include side-radius($opposite-direction, $global-radius); } +// &.round span { @include side-radius($opposite-direction, 1000px); } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_sub-nav.scss b/app/styles/app/foundation/scss/foundation/components/_sub-nav.scss new file mode 100644 index 00000000..7db9f03e --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_sub-nav.scss @@ -0,0 +1,123 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @name _sub-nav.scss +// // @dependencies _global.scss +// // + +// // +// // @variables +// // + +// $include-html-nav-classes: $include-html-classes !default; + +// // We use these to control margin and padding +// $sub-nav-list-margin: rem-calc(-4 0 18) !default; +// $sub-nav-list-padding-top: rem-calc(4) !default; + +// // We use this to control the definition +// $sub-nav-font-family: $body-font-family !default; +// $sub-nav-font-size: rem-calc(14) !default; +// $sub-nav-font-color: $aluminum !default; +// $sub-nav-font-weight: $font-weight-normal !default; +// $sub-nav-text-decoration: none !default; +// $sub-nav-padding: rem-calc(3 16) !default; +// $sub-nav-border-radius: 3px !default; +// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default; + + +// // We use these to control the active item styles + +// $sub-nav-active-font-weight: $font-weight-normal !default; +// $sub-nav-active-bg: $primary-color !default; +// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default; +// $sub-nav-active-color: $white !default; +// $sub-nav-active-padding: $sub-nav-padding !default; +// $sub-nav-active-cursor: default !default; + +// $sub-nav-item-divider: "" !default; +// $sub-nav-item-divider-margin: rem-calc(12) !default; + +// // +// // @mixins +// // + + +// // Create a sub-nav item +// // +// // $font-color - Font color. Default: $sub-nav-font-color. +// // $font-size - Font size. Default: $sub-nav-font-size. +// // $active-bg - Background of active nav item. Default: $sub-nav-active-bg. +// // $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover. +// @mixin sub-nav( +// $font-color: $sub-nav-font-color, +// $font-size: $sub-nav-font-size, +// $active-bg: $sub-nav-active-bg, +// $active-bg-hover: $sub-nav-active-bg-hover) { +// display: block; +// width: auto; +// overflow: hidden; +// margin: $sub-nav-list-margin; +// padding-top: $sub-nav-list-padding-top; + +// dt { +// text-transform: uppercase; +// } + +// dt, +// dd, +// li { +// float: $default-float; +// display: inline; +// margin-#{$default-float}: rem-calc(16); +// margin-bottom: 0; +// font-family: $sub-nav-font-family; +// font-weight: $sub-nav-font-weight; +// font-size: $font-size; +// color: $font-color; + +// a { +// text-decoration: $sub-nav-text-decoration; +// color: $sub-nav-font-color; +// padding: $sub-nav-padding; +// &:hover { +// color: $sub-nav-font-color-hover; +// } +// } + +// &.active a { +// @include radius($sub-nav-border-radius); +// font-weight: $sub-nav-active-font-weight; +// background: $active-bg; +// padding: $sub-nav-active-padding; +// cursor: $sub-nav-active-cursor; +// color: $sub-nav-active-color; +// &:hover { +// background: $active-bg-hover; +// } +// } +// @if $sub-nav-item-divider != "" { +// margin-#{$default-float}: 0; + +// &:before { +// content: "#{$sub-nav-item-divider}"; +// margin: 0 $sub-nav-item-divider-margin; +// } + +// &:first-child:before { +// content: ""; +// margin: 0; +// } +// } +// } +// } + +// @include exports("sub-nav") { +// @if $include-html-nav-classes { +// .sub-nav { @include sub-nav; } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_switches.scss b/app/styles/app/foundation/scss/foundation/components/_switches.scss new file mode 100644 index 00000000..4dd79a02 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_switches.scss @@ -0,0 +1,238 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @name +// // @dependencies _global.scss +// // + +// // +// // @variables +// // + +// $include-html-form-classes: $include-html-classes !default; + +// // Controlling background color for the switch container +// $switch-bg: $gainsboro !default; + +// // We use these to control the switch heights for our default classes +// $switch-height-tny: 1.5rem !default; +// $switch-height-sml: 1.75rem !default; +// $switch-height-med: 2rem !default; +// $switch-height-lrg: 2.5rem !default; +// $switch-bottom-margin: 1.5rem !default; + +// // We use these to style the switch-paddle +// $switch-paddle-bg: $white !default; +// $switch-paddle-transition-speed: .15s !default; +// $switch-paddle-transition-ease: ease-out !default; +// $switch-active-color: $primary-color !default; + + +// // +// // @mixins +// // + +// // We use this mixin to create the base styles for our switch element. +// // +// // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed. +// // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease. +// @mixin switch-base( +// $transition-speed:$switch-paddle-transition-speed, +// $transition-ease:$switch-paddle-transition-ease) { + +// padding: 0; +// border: none; +// position: relative; +// outline: 0; +// -webkit-user-select: none; +// -moz-user-select: none; +// user-select: none; + +// // Default label styles for type and transition +// label { +// display: block; +// margin-bottom: ($switch-height-med / 2); +// position: relative; +// color: transparent; +// background: $switch-bg; +// text-indent: 100%; +// width: $switch-height-med * 2; height: $switch-height-med; +// cursor: pointer; + +// // Transition for the switch label to follow paddle +// @include single-transition(left, $transition-speed, $transition-ease); +// } + +// // So that we don't need to recreate the form with any JS, we use the +// // existing checkbox or radio button, but we cleverly position and hide it. +// input { +// opacity: 0; +// position: absolute; +// top: 9px; +// left: 10px; +// padding:0; + +// & + label { margin-left: 0; margin-right: 0; } +// } + +// // The paddle for the switch is created from an after psuedoclass +// // content element. This is sized and positioned, and reacts to +// // the state of the input. + +// label:after { +// content: ""; +// display: block; +// background: $switch-paddle-bg; +// position: absolute; +// top: .25rem; +// left: .25rem; +// width: $switch-height-med - 0.5rem; +// height: $switch-height-med - 0.5rem; + +// -webkit-transition: left $transition-speed $transition-ease; +// -moz-transition: left $transition-speed $transition-ease; +// -o-transition: translate3d(0,0,0); +// transition: left $transition-speed $transition-ease; + +// -webkit-transform: translate3d(0,0,0); +// -moz-transform: translate3d(0,0,0); +// -o-transform: translate3d(0,0,0); +// transform: translate3d(0,0,0); +// } + +// input:checked + label { +// background: $switch-active-color; +// } + +// input:checked + label:after { +// left: $switch-height-med + 0.25rem; +// } +// } + +// // We use this mixin to create the size styles for switches. +// // +// // $height - Height (in px) of the switch. Default: $switch-height-med. +// // $font-size - Font size of text in switch. Default: $switch-font-size-med. +// // $line-height - Line height of switch. Default: 2.3rem. +// @mixin switch-size($height: $switch-height-med) { + +// label { +// width: $height * 2; +// height: $height; +// } + +// label:after { +// width: $height - 0.5rem; +// height: $height - 0.5rem; +// } + +// input:checked + label:after { +// left: $height + 0.25rem; +// } + +// } + +// // We use this mixin to add color and other fanciness to the switches. +// // +// // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg. +// // $active-color - Background color of positive side of switch. Default: $switch-positive-color. +// // $negative-color - Background color of negative side of switch. Default: $switch-negative-color. +// // $radius - Radius to apply to switch. Default: false. +// // $base-style - Apply base styles? Default: true. +// @mixin switch-style( +// $paddle-bg:$switch-paddle-bg, +// $active-color:$switch-active-color, +// $radius:false, +// $base-style:true) { + +// @if $base-style { + +// label { +// color: transparent; +// background: $switch-bg; +// } + +// label:after { +// background: $paddle-bg; +// } + +// input:checked + label { +// background: $active-color; +// } +// } + +// // Setting up the radius for switches +// @if $radius == true { +// label { +// border-radius: 2rem; +// } +// label:after { +// border-radius: 2rem; +// } +// } +// @else if $radius { +// label { +// border-radius: $radius; +// } +// label:after { +// border-radius: $radius; +// } +// } + +// } + +// // We use this to quickly create switches with a single mixin +// // +// // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed. +// // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease. +// // $height - Height (in px) of the switch. Default: $switch-height-med. +// // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg. +// // $active-color - Background color of an active switch. Default: $switch-active-color. +// // $radius - Radius to apply to switch. Default: false. +// // $base-style - Apply base styles? Default: true. +// @mixin switch( +// $transition-speed: $switch-paddle-transition-speed, +// $transition-ease: $switch-paddle-transition-ease, +// $height: $switch-height-med, +// $paddle-bg: $switch-paddle-bg, +// $active-color: $switch-active-color, +// $radius:false, +// $base-style:true) { +// @include switch-base($transition-speed, $transition-ease); +// @include switch-size($height); +// @include switch-style($paddle-bg, $active-color, $radius, $base-style); +// } + +// @include exports("switch") { +// @if $include-html-form-classes { +// .switch { +// @include switch; + +// // Large radio switches +// &.large { @include switch-size($switch-height-lrg); } + +// // Small radio switches +// &.small { @include switch-size($switch-height-sml); } + +// // Tiny radio switches +// &.tiny { @include switch-size($switch-height-tny); } + +// // Add a radius to the switch +// &.radius { +// label { @include radius(4px); } +// label:after { @include radius(3px); } +// } + +// // Make the switch completely round, like a pill +// &.round { @include radius(1000px); +// label { @include radius(2rem); } +// label:after { @include radius(2rem); } +// } + +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_tables.scss b/app/styles/app/foundation/scss/foundation/components/_tables.scss new file mode 100644 index 00000000..fd672fcc --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_tables.scss @@ -0,0 +1,135 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @name _tables.scss +// // @dependencies _global.scss +// // + +// // +// // @variables +// // + +// $include-html-table-classes: $include-html-classes !default; + +// // These control the background color for the table and even rows +// $table-bg: $white !default; +// $table-even-row-bg: $snow !default; + +// // These control the table cell border style +// $table-border-style: solid !default; +// $table-border-size: 1px !default; +// $table-border-color: $gainsboro !default; + +// // These control the table head styles +// $table-head-bg: $white-smoke !default; +// $table-head-font-size: rem-calc(14) !default; +// $table-head-font-color: $jet !default; +// $table-head-font-weight: $font-weight-bold !default; +// $table-head-padding: rem-calc(8 10 10) !default; + +// // These control the table foot styles +// $table-foot-bg: $table-head-bg !default; +// $table-foot-font-size: $table-head-font-size !default; +// $table-foot-font-color: $table-head-font-color !default; +// $table-foot-font-weight: $table-head-font-weight !default; +// $table-foot-padding: $table-head-padding !default; + +// // These control the caption +// $table-caption-bg: transparent !default; +// $table-caption-font-color: $table-head-font-color !default; +// $table-caption-font-size: rem-calc(16) !default; +// $table-caption-font-weight: bold !default; + +// // These control the row padding and font styles +// $table-row-padding: rem-calc(9 10) !default; +// $table-row-font-size: rem-calc(14) !default; +// $table-row-font-color: $jet !default; +// $table-line-height: rem-calc(18) !default; + +// // These are for controlling the layout, display and margin of tables +// $table-layout: auto !default; +// $table-display: table-cell !default; +// $table-margin-bottom: rem-calc(20) !default; + + +// // +// // @mixins +// // + +// @mixin table { +// background: $table-bg; +// margin-bottom: $table-margin-bottom; +// border: $table-border-style $table-border-size $table-border-color; +// table-layout: $table-layout; + +// caption { +// background: $table-caption-bg; +// color: $table-caption-font-color; +// font: { +// size: $table-caption-font-size; +// weight: $table-caption-font-weight; +// } +// } + +// thead { +// background: $table-head-bg; + +// tr { +// th, +// td { +// padding: $table-head-padding; +// font-size: $table-head-font-size; +// font-weight: $table-head-font-weight; +// color: $table-head-font-color; +// } +// } +// } + +// tfoot { +// background: $table-foot-bg; + +// tr { +// th, +// td { +// padding: $table-foot-padding; +// font-size: $table-foot-font-size; +// font-weight: $table-foot-font-weight; +// color: $table-foot-font-color; +// } +// } +// } + +// tr { +// th, +// td { +// padding: $table-row-padding; +// font-size: $table-row-font-size; +// color: $table-row-font-color; +// text-align: $default-float; +// } + +// &.even, +// &.alt, +// &:nth-of-type(even) { background: $table-even-row-bg; } +// } + +// thead tr th, +// tfoot tr th, +// tfoot tr td, +// tbody tr th, +// tbody tr td, +// tr td { display: $table-display; line-height: $table-line-height; } +// } + + +// @include exports("table") { +// @if $include-html-table-classes { +// table { +// @include table; +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_tabs.scss b/app/styles/app/foundation/scss/foundation/components/_tabs.scss new file mode 100644 index 00000000..a96575c1 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_tabs.scss @@ -0,0 +1,123 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "grid"; + +// // +// // @variables +// // + +// $include-html-tabs-classes: $include-html-classes !default; + +// $tabs-navigation-padding: rem-calc(16) !default; +// $tabs-navigation-bg-color: $silver !default; +// $tabs-navigation-active-bg-color: $white !default; +// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default; +// $tabs-navigation-font-color: $jet !default; +// $tabs-navigation-active-font-color: $tabs-navigation-font-color !default; +// $tabs-navigation-font-size: rem-calc(16) !default; +// $tabs-navigation-font-family: $body-font-family !default; + +// $tabs-content-margin-bottom: rem-calc(24) !default; +// $tabs-content-padding: ($column-gutter/2) !default; + +// $tabs-vertical-navigation-margin-bottom: 1.25rem !default; + +// @include exports("tab") { +// @if $include-html-tabs-classes { +// .tabs { +// @include clearfix; +// margin-bottom: 0 !important; +// margin-left: 0; +// dd, .tab-title { +// position: relative; +// margin-bottom: 0 !important; +// list-style: none; +// float: $default-float; +// > a { +// outline: none; +// display: block; +// background: { +// color: $tabs-navigation-bg-color; +// } +// color: $tabs-navigation-font-color; +// padding: $tabs-navigation-padding $tabs-navigation-padding * 2; +// font-family: $tabs-navigation-font-family; +// font-size: $tabs-navigation-font-size; +// &:hover { +// background: { +// color: $tabs-navigation-hover-bg-color; +// } +// } +// } +// &.active a { +// background: { +// color: $tabs-navigation-active-bg-color; +// } +// color:$tabs-navigation-active-font-color; +// } +// } +// &.radius { +// dd:first-child, .tab:first-child { +// a { @include side-radius($default-float, $global-radius); } +// } +// dd:last-child, .tab:last-child { +// a { @include side-radius($opposite-direction, $global-radius); } +// } +// } +// &.vertical { +// dd, .tab-title { +// position: inherit; +// float: none; +// display: block; +// top: auto; +// } +// } +// } + +// .tabs-content { +// @include clearfix; +// margin-bottom: $tabs-content-margin-bottom; +// width: 100%; +// > .content { +// display: none; +// float: $default-float; +// padding: $tabs-content-padding 0; +// width: 100%; +// &.active { display: block; float: none; } +// &.contained { padding: $tabs-content-padding; } +// } +// &.vertical { +// display: block; +// > .content { padding: 0 $tabs-content-padding; } +// } +// } +// @media #{$medium-up} { +// .tabs { +// &.vertical { +// width: 20%; +// max-width: 20%; +// float: $default-float; +// margin: 0 0 $tabs-vertical-navigation-margin-bottom; +// } +// } +// .tabs-content { +// &.vertical { +// width: 80%; +// max-width: 80%; +// float: $default-float; +// margin-#{$default-float}: -1px; +// padding-#{$default-float}: 1rem; +// } +// } +// } +// .no-js { +// .tabs-content > .content { +// display: block; +// float: none; +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_thumbs.scss b/app/styles/app/foundation/scss/foundation/components/_thumbs.scss new file mode 100644 index 00000000..b80e89e0 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_thumbs.scss @@ -0,0 +1,66 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // @name _thumbs.scss +// // @dependencies _globals.scss +// // + +// // +// // @variables +// // + +// $include-html-media-classes: $include-html-classes !default; + +// // We use these to control border styles +// $thumb-border-style: solid !default; +// $thumb-border-width: 4px !default; +// $thumb-border-color: $white !default; +// $thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default; +// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default; + +// // Radius and transition speed for thumbs +// $thumb-radius: $global-radius !default; +// $thumb-transition-speed: 200ms !default; + +// // +// // @mixins +// // + +// // We use this to create image thumbnail styles. +// // +// // $border-width - Width of border around thumbnail. Default: $thumb-border-width. +// // $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow. +// // $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover. +// @mixin thumb( +// $border-width:$thumb-border-width, +// $box-shadow:$thumb-box-shadow, +// $box-shadow-hover:$thumb-box-shadow-hover) { +// line-height: 0; +// display: inline-block; +// border: $thumb-border-style $border-width $thumb-border-color; +// max-width: 100%; +// box-shadow: $box-shadow; + +// &:hover, +// &:focus { +// box-shadow: $box-shadow-hover; +// } +// } + + +// @include exports("thumb") { +// @if $include-html-media-classes { + +// /* Image Thumbnails */ +// .th { +// @include thumb; +// @include single-transition(all,$thumb-transition-speed,ease-out); + +// &.radius { @include radius($thumb-radius); } +// } +// } +// } \ No newline at end of file diff --git a/app/styles/app/foundation/scss/foundation/components/_toolbar.scss b/app/styles/app/foundation/scss/foundation/components/_toolbar.scss new file mode 100644 index 00000000..e674d5f3 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_toolbar.scss @@ -0,0 +1,71 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source +// // toolbar styles +// @import 'global'; + +// .toolbar { +// background: $oil; +// width: 100%; +// font-size: 0; +// display: inline-block; + +// &.label-bottom .tab .tab-content { +// i, img { margin-bottom: 10px; } +// } + +// &.label-right .tab .tab-content { +// i, img { margin-right: 10px; display: inline-block;} +// label { display: inline-block; } +// } + +// &.vertical.label-right .tab .tab-content { +// text-align: left; +// } + +// &.vertical { +// height: 100%; +// width: auto; + +// .tab { +// width: auto; +// margin: auto; +// float: none; +// } +// } + +// .tab { +// text-align: center; +// width: 25%; +// margin: 0 auto; +// display: block; +// padding: 20px; +// float: left; + +// &:hover { +// background: rgba($white, 0.1); +// } +// } +// } + +// .toolbar .tab-content { +// font-size: 16px; +// text-align: center; + +// label { color: $iron; } + +// i { +// font-size: 30px; +// display: block; +// margin: 0 auto; +// color: $iron; +// vertical-align: middle; +// } + +// img { +// width: 30px; +// height: 30px; +// display: block; +// margin: 0 auto; +// } +// } \ No newline at end of file diff --git a/app/styles/app/foundation/scss/foundation/components/_tooltips.scss b/app/styles/app/foundation/scss/foundation/components/_tooltips.scss new file mode 100644 index 00000000..a7da277e --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_tooltips.scss @@ -0,0 +1,142 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // Tooltip Variables +// // +// $include-html-tooltip-classes: $include-html-classes !default; + +// $has-tip-border-bottom: dotted 1px $iron !default; +// $has-tip-font-weight: $font-weight-bold !default; +// $has-tip-font-color: $oil !default; +// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default; +// $has-tip-font-color-hover: $primary-color !default; +// $has-tip-cursor-type: help !default; + +// $tooltip-padding: rem-calc(12) !default; +// $tooltip-bg: $oil !default; +// $tooltip-font-size: rem-calc(14) !default; +// $tooltip-font-weight: $font-weight-normal !default; +// $tooltip-font-color: $white !default; +// $tooltip-line-height: 1.3 !default; +// $tooltip-close-font-size: rem-calc(10) !default; +// $tooltip-close-font-weight: $font-weight-normal !default; +// $tooltip-close-font-color: $monsoon !default; +// $tooltip-font-size-sml: rem-calc(14) !default; +// $tooltip-radius: $global-radius !default; +// $tooltip-rounded: $global-rounded !default; +// $tooltip-pip-size: 5px !default; +// $tooltip-max-width: 300px !default; + +// @include exports("tooltip") { +// @if $include-html-tooltip-classes { + +// /* Tooltips */ +// .has-tip { +// border-bottom: $has-tip-border-bottom; +// cursor: $has-tip-cursor-type; +// font-weight: $has-tip-font-weight; +// color: $has-tip-font-color; + +// &:hover, +// &:focus { +// border-bottom: $has-tip-border-bottom-hover; +// color: $has-tip-font-color-hover; +// } + +// &.tip-left, +// &.tip-right { float: none !important; } +// } + +// .tooltip { +// display: none; +// position: absolute; +// z-index: 1006; +// font-weight: $tooltip-font-weight; +// font-size: $tooltip-font-size; +// line-height: $tooltip-line-height; +// padding: $tooltip-padding; +// max-width: $tooltip-max-width; +// #{$default-float}: 50%; +// width: 100%; +// color: $tooltip-font-color; +// background: $tooltip-bg; + +// &>.nub { +// display: block; +// #{$default-float}: $tooltip-pip-size; +// position: absolute; +// width: 0; +// height: 0; +// border: solid $tooltip-pip-size; +// border-color: transparent transparent $tooltip-bg transparent; +// top: -($tooltip-pip-size * 2); +// pointer-events: none; + +// &.rtl { +// left: auto; +// #{$opposite-direction}: $tooltip-pip-size; +// } +// } + +// &.radius { +// @include radius($tooltip-radius); +// } +// &.round { +// @include radius($tooltip-rounded); +// &>.nub { +// left: 2rem; +// } +// } + +// &.opened { +// color: $has-tip-font-color-hover !important; +// border-bottom: $has-tip-border-bottom-hover !important; +// } +// } + +// .tap-to-close { +// display: block; +// font-size: $tooltip-close-font-size; +// color: $tooltip-close-font-color; +// font-weight: $tooltip-close-font-weight; +// } + +// @media #{$small} { +// .tooltip { +// &>.nub { +// border-color: transparent transparent $tooltip-bg transparent; +// top: -($tooltip-pip-size * 2); +// } +// &.tip-top>.nub { +// border-color: $tooltip-bg transparent transparent transparent; +// top: auto; +// bottom: -($tooltip-pip-size * 2); +// } + +// &.tip-left, +// &.tip-right { float: none !important; } + +// &.tip-left>.nub { +// border-color: transparent transparent transparent $tooltip-bg; +// right: -($tooltip-pip-size * 2); +// left: auto; +// top: 50%; +// margin-top: -$tooltip-pip-size; +// } +// &.tip-right>.nub { +// border-color: transparent $tooltip-bg transparent transparent; +// right: auto; +// left: -($tooltip-pip-size * 2); +// top: 50%; +// margin-top: -$tooltip-pip-size; +// } + +// } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_top-bar.scss b/app/styles/app/foundation/scss/foundation/components/_top-bar.scss new file mode 100644 index 00000000..56d717f5 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_top-bar.scss @@ -0,0 +1,689 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; +// @import "grid"; +// @import "buttons"; +// @import "forms"; + +// // +// // Top Bar Variables +// // +// $include-html-top-bar-classes: $include-html-classes !default; + +// // Background color for the top bar +// $topbar-bg-color: $oil !default; +// $topbar-bg: $topbar-bg-color !default; + +// // Height and margin +// $topbar-height: rem-calc(45) !default; +// $topbar-margin-bottom: 0 !default; + +// // Controlling the styles for the title in the top bar +// $topbar-title-weight: $font-weight-normal !default; +// $topbar-title-font-size: rem-calc(17) !default; + +// // Set the link colors and styles for top-level nav +// $topbar-link-color: $white !default; +// $topbar-link-color-hover: $white !default; +// $topbar-link-color-active: $white !default; +// $topbar-link-color-active-hover: $white !default; +// $topbar-link-weight: $font-weight-normal !default; +// $topbar-link-font-size: rem-calc(13) !default; +// $topbar-link-hover-lightness: -10% !default; // Darken by 10% +// $topbar-link-bg: $topbar-bg !default; +// $topbar-link-bg-hover: $oil !default; +// $topbar-link-bg-color-hover: $charcoal !default; +// $topbar-link-bg-active: $primary-color !default; +// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default; +// $topbar-link-font-family: $body-font-family !default; +// $topbar-link-text-transform: none !default; +// $topbar-link-padding: ($topbar-height / 3) !default; +// $topbar-back-link-size: rem-calc(18) !default; +// $topbar-link-dropdown-padding: rem-calc(20) !default; +// $topbar-button-font-size: 0.75rem !default; +// $topbar-button-top: 7px !default; + +// // Style the top bar dropdown elements +// $topbar-dropdown-bg: $oil !default; +// $topbar-dropdown-link-color: $white !default; +// $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default; +// $topbar-dropdown-link-bg: $oil !default; +// $topbar-dropdown-link-bg-hover: $oil !default; +// $topbar-dropdown-link-weight: $font-weight-normal !default; +// $topbar-dropdown-toggle-size: 5px !default; +// $topbar-dropdown-toggle-color: $white !default; +// $topbar-dropdown-toggle-alpha: 0.4 !default; + +// $topbar-dropdown-label-color: $monsoon !default; +// $topbar-dropdown-label-text-transform: uppercase !default; +// $topbar-dropdown-label-font-weight: $font-weight-bold !default; +// $topbar-dropdown-label-font-size: rem-calc(10) !default; +// $topbar-dropdown-label-bg: $oil !default; + +// // Top menu icon styles +// $topbar-menu-link-transform: uppercase !default; +// $topbar-menu-link-font-size: rem-calc(13) !default; +// $topbar-menu-link-weight: $font-weight-bold !default; +// $topbar-menu-link-color: $white !default; +// $topbar-menu-icon-color: $white !default; +// $topbar-menu-link-color-toggled: $jumbo !default; +// $topbar-menu-icon-color-toggled: $jumbo !default; + +// // Transitions and breakpoint styles +// $topbar-transition-speed: 300ms !default; +// // Using rem-calc for the below breakpoint causes issues with top bar +// $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout +// $topbar-media-query: $medium-up !default; + +// // Top-bar input styles +// $topbar-input-height: rem-calc(28) !default; + +// // Divider Styles +// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default; +// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default; + +// // Sticky Class +// $topbar-sticky-class: ".sticky" !default; +// $topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item +// $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li + +// // Accessibility mixins for hiding and showing the menu dropdown items +// @mixin topbar-hide-dropdown { +// // Makes an element visually hidden by default, but visible when focused. +// display: block; +// @include element-invisible(); +// } + +// @mixin topbar-show-dropdown { +// display: block; +// @include element-invisible-off(); +// position: absolute !important; // Reset the position from static to absolute +// } + +// @include exports("top-bar") { + +// @if $include-html-top-bar-classes { + +// // Used to provide media query values for javascript components. +// // This class is generated despite the value of $include-html-top-bar-classes +// // to ensure width calculations work correctly. +// meta.foundation-mq-topbar { +// font-family: "/" + unquote($topbar-media-query) + "/"; +// width: $topbar-breakpoint; +// } + +// /* Wrapped around .top-bar to contain to grid width */ +// .contain-to-grid { +// width: 100%; +// background: $topbar-bg; + +// .top-bar { margin-bottom: $topbar-margin-bottom; } +// } + +// // Wrapped around .top-bar to make it stick to the top +// .fixed { +// width: 100%; +// #{$default-float}: 0; +// position: fixed; +// top: 0; +// z-index: 99; + +// &.expanded:not(.top-bar) { +// overflow-y: auto; +// height: auto; +// width: 100%; +// max-height: 100%; + +// .title-area { +// position: fixed; +// width: 100%; +// z-index: 99; +// } +// // Ensure you can scroll the menu on small screens +// .top-bar-section { +// z-index: 98; +// margin-top: $topbar-height; +// } +// } +// } + +// .top-bar { +// overflow: hidden; +// height: $topbar-height; +// line-height: $topbar-height; +// position: relative; +// background: $topbar-bg; +// margin-bottom: $topbar-margin-bottom; + +// // Topbar Global list Styles +// ul { +// margin-bottom: 0; +// list-style: none; +// } + +// .row { max-width: none; } + +// form, +// input { margin-bottom: 0; } + +// input { +// height: $topbar-input-height; +// padding-top: .35rem; +// padding-bottom: .35rem; +// font-size: $topbar-button-font-size; +// } + +// .button, button { +// padding-top: .35rem + rem-calc(1); +// padding-bottom: .35rem + rem-calc(1); +// margin-bottom: 0; +// font-size: $topbar-button-font-size; +// // position: relative; +// // top: -1px; + +// // Corrects a slight misalignment when put next to an input field +// @media #{$small-only} { +// position: relative; +// top: -1px; +// } +// } + +// // Title Area +// .title-area { +// position: relative; +// margin: 0; +// } + +// .name { +// height: $topbar-height; +// margin: 0; +// font-size: $rem-base; + +// h1, h2, h3, h4, p, span { +// line-height: $topbar-height; +// font-size: $topbar-title-font-size; +// margin: 0; +// a { +// font-weight: $topbar-title-weight; +// color: $topbar-link-color; +// width: 75%; +// display: block; +// padding: 0 $topbar-link-padding; +// } +// } +// } + +// // Menu toggle button on small devices +// .toggle-topbar { +// position: absolute; +// #{$opposite-direction}: 0; +// top: 0; + +// a { +// color: $topbar-link-color; +// text-transform: $topbar-menu-link-transform; +// font-size: $topbar-menu-link-font-size; +// font-weight: $topbar-menu-link-weight; +// position: relative; +// display: block; +// padding: 0 $topbar-link-padding; +// height: $topbar-height; +// line-height: $topbar-height; +// } + +// // Adding the class "menu-icon" will add the 3-line icon people love and adore. +// &.menu-icon { +// top: 50%; +// margin-top: -16px; + +// a { +// @if $text-direction == rtl { +// text-indent: -58px; +// } +// height: 34px; +// line-height: 33px; +// padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding; +// color: $topbar-menu-link-color; +// position: relative; + +// & { +// // @include hamburger icon +// // +// // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon +// // $width - Width of hamburger icon +// // $left - If false, icon will be centered horizontally || explicitly set value in rem +// // $top - If false, icon will be centered vertically || explicitly set value in rem +// // $thickness - thickness of lines in hamburger icon, set value in px +// // $gap - spacing between the lines in hamburger icon, set value in px +// // $color - icon color +// // $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled +// // $offcanvas - Set to false of @include in topbar +// @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false); +// } +// } +// } +// } + +// // Change things up when the top-bar is expanded +// &.expanded { +// height: auto; +// background: transparent; + +// .title-area { background: $topbar-bg; } + +// .toggle-topbar { +// a { color: $topbar-menu-link-color-toggled; +// span::after { +// // Shh, don't tell, but box-shadows create the menu icon :) +// // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above +// box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled, +// 0 7px 0 1px $topbar-menu-icon-color-toggled, +// 0 14px 0 1px $topbar-menu-icon-color-toggled; +// } +// } +// } +// } +// } + +// // Right and Left Navigation that stacked by default +// .top-bar-section { +// #{$default-float}: 0; +// position: relative; +// width: auto; +// @include single-transition($default-float, $topbar-transition-speed); + +// ul { +// padding: 0; +// width: 100%; +// height: auto; +// display: block; +// font-size: $rem-base; +// margin: 0; +// } + +// .divider, +// [role="separator"] { +// border-top: $topbar-divider-border-top; +// clear: both; +// height: 1px; +// width: 100%; +// } + +// ul li { +// background: $topbar-dropdown-bg; +// & > a { +// display: block; +// width: 100%; +// color: $topbar-link-color; +// padding: 12px 0 12px 0; +// padding-#{$default-float}: $topbar-link-padding; +// font-family: $topbar-link-font-family; +// font-size: $topbar-link-font-size; +// font-weight: $topbar-link-weight; +// text-transform: $topbar-link-text-transform; + +// &.button { +// font-size: $topbar-link-font-size; +// padding-#{$opposite-direction}: $topbar-link-padding; +// padding-#{$default-float}: $topbar-link-padding; +// @include button-style($bg:$primary-color); +// } +// &.button.secondary { @include button-style($bg:$secondary-color); } +// &.button.success { @include button-style($bg:$success-color); } +// &.button.alert { @include button-style($bg:$alert-color); } +// &.button.warning { @include button-style($bg:$warning-color); } +// } + +// > button { +// font-size: $topbar-link-font-size; +// padding-#{$opposite-direction}: $topbar-link-padding; +// padding-#{$default-float}: $topbar-link-padding; +// @include button-style($bg:$primary-color); + +// &.secondary { @include button-style($bg:$secondary-color); } +// &.success { @include button-style($bg:$success-color); } +// &.alert { @include button-style($bg:$alert-color); } +// &.warning { @include button-style($bg:$warning-color); } +// } + +// // Apply the hover link color when it has that class +// &:hover:not(.has-form) > a { +// background-color: $topbar-link-bg-color-hover; +// @if ($topbar-link-bg-hover) { +// background: $topbar-link-bg-hover; +// } +// color: $topbar-link-color-hover; +// } + +// // Apply the active link color when it has that class +// &.active > a { +// background: $topbar-link-bg-active; +// color: $topbar-link-color-active; +// &:hover { +// background: $topbar-link-bg-active-hover; +// color: $topbar-link-color-active-hover; +// } +// } +// } + +// // Add some extra padding for list items contains buttons +// .has-form { padding: $topbar-link-padding; } + +// // Styling for list items that have a dropdown within them. +// .has-dropdown { +// position: relative; + +// & > a { +// &:after { +// @if ($topbar-arrows){ +// @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float); +// } +// margin-#{$opposite-direction}: $topbar-link-padding; +// margin-top: -($topbar-dropdown-toggle-size / 2) - 2; +// position: absolute; +// top: 50%; +// #{$opposite-direction}: 0; +// } +// } + +// &.moved { position: static; +// & > .dropdown { +// @include topbar-show-dropdown(); +// width: 100%; +// } +// & > a:after { +// display: none; +// } +// } +// } + +// // Styling elements inside of dropdowns +// .dropdown { +// padding: 0; +// position: absolute; +// #{$default-float}: 100%; +// top: 0; +// z-index: 99; +// @include topbar-hide-dropdown(); + +// li { +// width: 100%; +// height: auto; + +// a { +// font-weight: $topbar-dropdown-link-weight; +// padding: 8px $topbar-link-padding; +// &.parent-link { +// font-weight: $topbar-link-weight; +// } +// } + +// &.title h5, &.parent-link { +// // Back Button +// margin-bottom: 0; +// margin-top: 0; +// font-size: $topbar-back-link-size; +// a { +// color: $topbar-link-color; +// // line-height: ($topbar-height / 2); +// display: block; +// &:hover { background:none; } +// } +// } +// &.has-form { padding: 8px $topbar-link-padding; } +// .button, button { top: auto; } +// } + +// label { +// padding: 8px $topbar-link-padding 2px; +// margin-bottom: 0; +// text-transform: $topbar-dropdown-label-text-transform; +// color: $topbar-dropdown-label-color; +// font-weight: $topbar-dropdown-label-font-weight; +// font-size: $topbar-dropdown-label-font-size; +// } +// } +// } + +// .js-generated { display: block; } + + +// // Top Bar styles intended for screen sizes above the breakpoint. +// @media #{$topbar-media-query} { +// .top-bar { +// background: $topbar-bg; +// @include clearfix; +// overflow: visible; + +// .toggle-topbar { display: none; } + +// .title-area { float: $default-float; } +// .name h1 a { width: auto; } + +// input, +// .button, +// button { +// font-size: rem-calc(14); +// position: relative; +// height: $topbar-input-height; +// top: (($topbar-height - $topbar-input-height) / 2); +// } + +// &.expanded { background: $topbar-bg; } +// } + +// .contain-to-grid .top-bar { +// max-width: $row-width; +// margin: 0 auto; +// margin-bottom: $topbar-margin-bottom; +// } + +// .top-bar-section { +// @include single-transition(none,0,0); +// #{$default-float}: 0 !important; + +// ul { +// width: auto; +// height: auto !important; +// display: inline; + +// li { +// float: $default-float; +// .js-generated { display: none; } +// } +// } + +// li { +// &.hover { +// > a:not(.button) { +// background-color: $topbar-link-bg-color-hover; +// @if ($topbar-link-bg-hover) { +// background: $topbar-link-bg-hover; +// } +// color: $topbar-link-color-hover; +// } +// } +// &:not(.has-form) { +// a:not(.button) { +// padding: 0 $topbar-link-padding; +// line-height: $topbar-height; +// background: $topbar-link-bg; +// &:hover { +// background-color: $topbar-link-bg-color-hover; +// @if ($topbar-link-bg-hover) { +// background: $topbar-link-bg-hover; +// } +// } +// } +// } +// &.active:not(.has-form) { +// a:not(.button) { +// padding: 0 $topbar-link-padding; +// line-height: $topbar-height; +// color: $topbar-link-color-active; +// background: $topbar-link-bg-active; +// &:hover { +// background: $topbar-link-bg-active-hover; +// color: $topbar-link-color-active-hover; +// } +// } +// } +// } + +// .has-dropdown { +// @if($topbar-arrows){ +// & > a { +// padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important; +// &:after { +// @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top); +// margin-top: -($topbar-dropdown-toggle-size / 2); +// top: ($topbar-height / 2); +// } +// } +// } + +// &.moved { position: relative; +// & > .dropdown { +// @include topbar-hide-dropdown(); +// } +// } + +// &.hover, &.not-click:hover { +// & > .dropdown { +// @include topbar-show-dropdown(); +// } +// } +// > a:focus + .dropdown { +// @include topbar-show-dropdown(); +// } + +// .dropdown li.has-dropdown { +// & > a { +// @if ($topbar-dropdown-arrows){ +// &:after { +// border: none; +// content: "\00bb"; +// top: 1rem; +// margin-top: -1px; +// #{$opposite-direction}: 5px; +// line-height: 1.2; +// } +// } +// } +// } +// } + +// .dropdown { +// #{$default-float}: 0; +// top: auto; +// background: transparent; +// min-width: 100%; + +// li { +// a { +// color: $topbar-dropdown-link-color; +// line-height: $topbar-height; +// white-space: nowrap; +// padding: 12px $topbar-link-padding; +// background: $topbar-dropdown-link-bg; +// } + +// &:not(.has-form):not(.active) { +// & > a:not(.button) { +// color: $topbar-dropdown-link-color; +// background: $topbar-dropdown-link-bg; +// } + +// &:hover > a:not(.button) { +// color: $topbar-dropdown-link-color-hover; +// background-color: $topbar-link-bg-color-hover; +// @if ($topbar-dropdown-link-bg-hover) { +// background: $topbar-dropdown-link-bg-hover; +// } +// } +// } + +// label { +// white-space: nowrap; +// background: $topbar-dropdown-label-bg; +// } + +// // Second Level Dropdowns +// .dropdown { +// #{$default-float}: 100%; +// top: 0; +// } +// } +// } + +// & > ul > .divider, +// & > ul > [role="separator"] { +// border-bottom: none; +// border-top: none; +// border-#{$opposite-direction}: $topbar-divider-border-bottom; +// clear: none; +// height: $topbar-height; +// width: 0; +// } + +// .has-form { +// background: $topbar-link-bg; +// padding: 0 ($topbar-height / 3); +// height: $topbar-height; +// } + +// // Position overrides for ul.right and ul.left +// .#{$opposite-direction} { +// li .dropdown { +// #{$default-float}: auto; +// #{$opposite-direction}: 0; + +// li .dropdown { #{$opposite-direction}: 100%; } +// } +// } +// .#{$default-float} { +// li .dropdown { +// #{$opposite-direction}: auto; +// #{$default-float}: 0; + +// li .dropdown { #{$default-float}: 100%; } +// } +// } +// } + +// // Degrade gracefully when Javascript is disabled. Displays dropdown and changes +// // background & text color on hover. +// .no-js .top-bar-section { +// ul li { +// // Apply the hover link color when it has that class +// &:hover > a { +// background-color: $topbar-link-bg-color-hover; +// @if ($topbar-link-bg-hover) { +// background: $topbar-link-bg-hover; +// } +// color: $topbar-link-color-hover; +// } + +// // Apply the active link color when it has that class +// &:active > a { +// background: $topbar-link-bg-active; +// color: $topbar-link-color-active; +// } +// } + +// .has-dropdown { +// &:hover { +// & > .dropdown { +// @include topbar-show-dropdown(); +// } +// } +// > a:focus + .dropdown { +// @include topbar-show-dropdown(); +// } +// } +// } +// } +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_type.scss b/app/styles/app/foundation/scss/foundation/components/_type.scss new file mode 100644 index 00000000..6a19d91d --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_type.scss @@ -0,0 +1,525 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// $include-html-type-classes: $include-html-classes !default; + +// // We use these to control header font styles +// $header-font-family: $body-font-family !default; +// $header-font-weight: $font-weight-normal !default; +// $header-font-style: $font-weight-normal !default; +// $header-font-color: $jet !default; +// $header-line-height: 1.4 !default; +// $header-top-margin: .2rem !default; +// $header-bottom-margin: .5rem !default; +// $header-text-rendering: optimizeLegibility !default; + +// // We use these to control header font sizes +// $h1-font-size: rem-calc(44) !default; +// $h2-font-size: rem-calc(37) !default; +// $h3-font-size: rem-calc(27) !default; +// $h4-font-size: rem-calc(23) !default; +// $h5-font-size: rem-calc(18) !default; +// $h6-font-size: 1rem !default; + +// // We use these to control header size reduction on small screens +// $h1-font-reduction: rem-calc(10) !default; +// $h2-font-reduction: rem-calc(10) !default; +// $h3-font-reduction: rem-calc(5) !default; +// $h4-font-reduction: rem-calc(5) !default; +// $h5-font-reduction: 0 !default; +// $h6-font-reduction: 0 !default; + +// // These control how subheaders are styled. +// $subheader-line-height: 1.4 !default; +// $subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default; +// $subheader-font-weight: $font-weight-normal !default; +// $subheader-top-margin: .2rem !default; +// $subheader-bottom-margin: .5rem !default; + +// // A general styling +// $small-font-size: 60% !default; +// $small-font-color: scale-color($header-font-color, $lightness: 35%) !default; + +// // We use these to style paragraphs +// $paragraph-font-family: inherit !default; +// $paragraph-font-weight: $font-weight-normal !default; +// $paragraph-font-size: 1rem !default; +// $paragraph-line-height: 1.6 !default; +// $paragraph-margin-bottom: rem-calc(20) !default; +// $paragraph-aside-font-size: rem-calc(14) !default; +// $paragraph-aside-line-height: 1.35 !default; +// $paragraph-aside-font-style: italic !default; +// $paragraph-text-rendering: optimizeLegibility !default; + +// // We use these to style tags +// $code-color: $oil !default; +// $code-font-family: $font-family-monospace !default; +// $code-font-weight: $font-weight-normal !default; +// $code-background-color: scale-color($secondary-color, $lightness: 70%) !default; +// $code-border-size: 1px !default; +// $code-border-style: solid !default; +// $code-border-color: scale-color($code-background-color, $lightness: -10%) !default; +// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default; + +// // We use these to style anchors +// $anchor-text-decoration: none !default; +// $anchor-text-decoration-hover: none !default; +// $anchor-font-color: $primary-color !default; +// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default; + +// // We use these to style the
element +// $hr-border-width: 1px !default; +// $hr-border-style: solid !default; +// $hr-border-color: $gainsboro !default; +// $hr-margin: rem-calc(20) !default; + +// // We use these to style lists +// $list-font-family: $paragraph-font-family !default; +// $list-font-size: $paragraph-font-size !default; +// $list-line-height: $paragraph-line-height !default; +// $list-margin-bottom: $paragraph-margin-bottom !default; +// $list-style-position: outside !default; +// $list-side-margin: 1.1rem !default; +// $list-ordered-side-margin: 1.4rem !default; +// $list-side-margin-no-bullet: 0 !default; +// $list-nested-margin: rem-calc(20) !default; +// $definition-list-header-weight: $font-weight-bold !default; +// $definition-list-header-margin-bottom: .3rem !default; +// $definition-list-margin-bottom: rem-calc(12) !default; + +// // We use these to style blockquotes +// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default; +// $blockquote-padding: rem-calc(9 20 0 19) !default; +// $blockquote-border: 1px solid $gainsboro !default; +// $blockquote-cite-font-size: rem-calc(13) !default; +// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default; +// $blockquote-cite-link-color: $blockquote-cite-font-color !default; + +// // Acronym styles +// // $acronym-underline: 1px dotted $gainsboro !default; + +// // We use these to control padding and margin +// $microformat-padding: rem-calc(10 12) !default; +// $microformat-margin: rem-calc(0 0 20 0) !default; + +// // We use these to control the border styles +// $microformat-border-width: 1px !default; +// $microformat-border-style: solid !default; +// $microformat-border-color: $gainsboro !default; + +// // We use these to control full name font styles +// $microformat-fullname-font-weight: $font-weight-bold !default; +// $microformat-fullname-font-size: rem-calc(15) !default; + +// // We use this to control the summary font styles +// $microformat-summary-font-weight: $font-weight-bold !default; + +// // We use this to control abbr padding +// $microformat-abbr-padding: rem-calc(0 1) !default; + +// // We use this to control abbr font styles +// $microformat-abbr-font-weight: $font-weight-bold !default; +// $microformat-abbr-font-decoration: none !default; + +// // Text alignment class names +// $align-class-names: +// small-only, +// small, +// medium-only, +// medium, +// large-only, +// large, +// xlarge-only, +// xlarge, +// xxlarge-only, +// xxlarge; + +// // Text alignment breakpoints +// $align-class-breakpoints: +// $small-only, +// $small-up, +// $medium-only, +// $medium-up, +// $large-only, +// $large-up, +// $xlarge-only, +// $xlarge-up, +// $xxlarge-only, +// $xxlarge-up; + +// // Generates text align and justify classes +// @mixin align-classes{ +// .text-left { text-align: left !important; } +// .text-right { text-align: right !important; } +// .text-center { text-align: center !important; } +// .text-justify { text-align: justify !important; } + +// @for $i from 1 through length($align-class-names) { +// @media #{(nth($align-class-breakpoints, $i))} { +// .#{(nth($align-class-names, $i))}-text-left { text-align: left !important; } +// .#{(nth($align-class-names, $i))}-text-right { text-align: right !important; } +// .#{(nth($align-class-names, $i))}-text-center { text-align: center !important; } +// .#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; } +// } +// } +// } + +// // +// // Typography Placeholders +// // + +// // These will throw a deprecation warning if used within a media query. +// @mixin lead { +// font-size: $paragraph-font-size + rem-calc(3.5); +// line-height: 1.6; +// } + +// @mixin subheader { +// line-height: $subheader-line-height; +// color: $subheader-font-color; +// font-weight: $subheader-font-weight; +// margin-top: $subheader-top-margin; +// margin-bottom: $subheader-bottom-margin; +// } +// @include exports("type") { +// @if $include-html-type-classes { +// // Responsive Text alignment +// @include align-classes; + +// /* Typography resets */ +// div, +// dl, +// dt, +// dd, +// ul, +// ol, +// li, +// h1, +// h2, +// h3, +// h4, +// h5, +// h6, +// pre, +// form, +// p, +// blockquote, +// th, +// td { +// margin:0; +// padding:0; +// } + +// /* Default Link Styles */ +// a { +// color: $anchor-font-color; +// text-decoration: $anchor-text-decoration; +// line-height: inherit; + +// &:hover, +// &:focus { +// color: $anchor-font-color-hover; +// @if $anchor-text-decoration-hover != $anchor-text-decoration { +// text-decoration: $anchor-text-decoration-hover; +// } +// } + +// img { border:none; } +// } + +// /* Default paragraph styles */ +// p { +// font-family: $paragraph-font-family; +// font-weight: $paragraph-font-weight; +// font-size: $paragraph-font-size; +// line-height: $paragraph-line-height; +// margin-bottom: $paragraph-margin-bottom; +// text-rendering: $paragraph-text-rendering; + +// &.lead { @include lead; } + +// & aside { +// font-size: $paragraph-aside-font-size; +// line-height: $paragraph-aside-line-height; +// font-style: $paragraph-aside-font-style; +// } +// } + +// /* Default header styles */ +// h1, h2, h3, h4, h5, h6 { +// font-family: $header-font-family; +// font-weight: $header-font-weight; +// font-style: $header-font-style; +// color: $header-font-color; +// text-rendering: $header-text-rendering; +// margin-top: $header-top-margin; +// margin-bottom: $header-bottom-margin; +// line-height: $header-line-height; + +// small { +// font-size: $small-font-size; +// color: $small-font-color; +// line-height: 0; +// } +// } + +// h1 { font-size: $h1-font-size - $h1-font-reduction; } +// h2 { font-size: $h2-font-size - $h2-font-reduction; } +// h3 { font-size: $h3-font-size - $h3-font-reduction; } +// h4 { font-size: $h4-font-size - $h4-font-reduction; } +// h5 { font-size: $h5-font-size - $h5-font-reduction; } +// h6 { font-size: $h6-font-size - $h6-font-reduction; } + +// .subheader { @include subheader; } + +// hr { +// border: $hr-border-style $hr-border-color; +// border-width: $hr-border-width 0 0; +// clear: both; +// margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width)); +// height: 0; +// } + +// /* Helpful Typography Defaults */ +// em, +// i { +// font-style: italic; +// line-height: inherit; +// } + +// strong, +// b { +// font-weight: $font-weight-bold; +// line-height: inherit; +// } + +// small { +// font-size: $small-font-size; +// line-height: inherit; +// } + +// code { +// font-family: $code-font-family; +// font-weight: $code-font-weight; +// color: $code-color; +// background-color: $code-background-color; +// border-width: $code-border-size; +// border-style: $code-border-style; +// border-color: $code-border-color; +// padding: $code-padding; +// } + +// /* Lists */ +// ul, +// ol, +// dl { +// font-size: $list-font-size; +// line-height: $list-line-height; +// margin-bottom: $list-margin-bottom; +// list-style-position: $list-style-position; +// font-family: $list-font-family; +// } + +// ul { +// margin-#{$default-float}: $list-side-margin; +// &.no-bullet { +// margin-#{$default-float}: $list-side-margin-no-bullet; +// li { +// ul, +// ol { +// margin-#{$default-float}: $list-nested-margin; +// margin-bottom: 0; +// list-style: none; +// } +// } +// } +// } + +// /* Unordered Lists */ +// ul { +// li { +// ul, +// ol { +// margin-#{$default-float}: $list-nested-margin; +// margin-bottom: 0; +// } +// } +// &.square, +// &.circle, +// &.disc { +// li ul { list-style: inherit; } +// } + +// &.square { list-style-type: square; margin-#{$default-float}: $list-side-margin;} +// &.circle { list-style-type: circle; margin-#{$default-float}: $list-side-margin;} +// &.disc { list-style-type: disc; margin-#{$default-float}: $list-side-margin;} +// &.no-bullet { list-style: none; } +// } + +// /* Ordered Lists */ +// ol { +// margin-#{$default-float}: $list-ordered-side-margin; +// li { +// ul, +// ol { +// margin-#{$default-float}: $list-nested-margin; +// margin-bottom: 0; +// } +// } +// } + +// /* Definition Lists */ +// dl { +// dt { +// margin-bottom: $definition-list-header-margin-bottom; +// font-weight: $definition-list-header-weight; +// } +// dd { margin-bottom: $definition-list-margin-bottom; } +// } + +// /* Abbreviations */ +// // abbr, +// // acronym { +// // text-transform: uppercase; +// // font-size: 90%; +// // color: $body-font-color; +// // cursor: $cursor-help-value; +// // } +// // abbr { +// // text-transform: none; +// // &[title] { +// // border-bottom: $acronym-underline; +// // } +// // } + +// /* Blockquotes */ +// blockquote { +// margin: 0 0 $paragraph-margin-bottom; +// padding: $blockquote-padding; +// border-#{$default-float}: $blockquote-border; + +// cite { +// display: block; +// font-size: $blockquote-cite-font-size; +// color: $blockquote-cite-font-color; +// &:before { +// content: "\2014 \0020"; +// } + +// a, +// a:visited { +// color: $blockquote-cite-link-color; +// } +// } +// } +// blockquote, +// blockquote p { +// line-height: $paragraph-line-height; +// color: $blockquote-font-color; +// } + +// /* Microformats */ +// .vcard { +// display: inline-block; +// margin: $microformat-margin; +// border: $microformat-border-width $microformat-border-style $microformat-border-color; +// padding: $microformat-padding; + +// li { +// margin: 0; +// display: block; +// } +// .fn { +// font-weight: $microformat-fullname-font-weight; +// font-size: $microformat-fullname-font-size; +// } +// } + +// .vevent { +// .summary { font-weight: $microformat-summary-font-weight; } + +// // abbr { +// // cursor: $cursor-default-value; +// // text-decoration: $microformat-abbr-font-decoration; +// // font-weight: $microformat-abbr-font-weight; +// // border: none; +// // padding: $microformat-abbr-padding; +// // } +// } + + +// @media #{$medium-up} { +// h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; } +// h1 { font-size: $h1-font-size; } +// h2 { font-size: $h2-font-size; } +// h3 { font-size: $h3-font-size; } +// h4 { font-size: $h4-font-size; } +// h5 { font-size: $h5-font-size; } +// h6 { font-size: $h6-font-size; } +// } + +// // Only include these styles if you want them. +// @if $include-print-styles { +// /* +// * Print styles. +// * +// * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ +// * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) +// */ +// .print-only { display: none !important; } +// @media print { +// * { +// background: transparent !important; +// color: $black !important; /* Black prints faster: h5bp.com/s */ +// box-shadow: none !important; +// text-shadow: none !important; +// } + +// a, +// a:visited { text-decoration: underline;} +// a[href]:after { content: " (" attr(href) ")"; } + +// // abbr[title]:after { content: " (" attr(title) ")"; } + +// // Don't show links for images, or javascript/internal links +// .ir a:after, +// a[href^="javascript:"]:after, +// a[href^="#"]:after { content: ""; } + +// pre, +// blockquote { +// border: 1px solid $aluminum; +// page-break-inside: avoid; +// } + +// thead { display: table-header-group; /* h5bp.com/t */ } + +// tr, +// img { page-break-inside: avoid; } + +// img { max-width: 100% !important; } + +// @page { margin: 0.5cm; } + +// p, +// h2, +// h3 { +// orphans: 3; +// widows: 3; +// } + +// h2, +// h3 { page-break-after: avoid; } + +// .hide-on-print { display: none !important; } +// .print-only { display: block !important; } +// .hide-for-print { display: none !important; } +// .show-for-print { display: inherit !important; } +// } +// } + +// } +// } diff --git a/app/styles/app/foundation/scss/foundation/components/_visibility.scss b/app/styles/app/foundation/scss/foundation/components/_visibility.scss new file mode 100644 index 00000000..d3eddd42 --- /dev/null +++ b/app/styles/app/foundation/scss/foundation/components/_visibility.scss @@ -0,0 +1,408 @@ +// // Foundation by ZURB +// // foundation.zurb.com +// // Licensed under MIT Open Source + +// @import "global"; + +// // +// // Foundation Visibility Classes +// // +// $include-html-visibility-classes: $include-html-classes !default; +// $include-accessibility-classes: true !default; +// $include-table-visibility-classes: true !default; +// $include-legacy-visibility-classes: true !default; + +// // +// // Media Class Names +// // +// // Visibility Breakpoints +// $visibility-breakpoint-sizes: +// small, +// medium, +// large, +// xlarge, +// xxlarge; + +// $visibility-breakpoint-queries: +// unquote($small-up), +// unquote($medium-up), +// unquote($large-up), +// unquote($xlarge-up), +// unquote($xxlarge-up); + +// @mixin visibility-loop { +// @each $current-visibility-breakpoint in $visibility-breakpoint-sizes { +// $visibility-inherit-list: (); +// $visibility-none-list: (); + +// $visibility-visible-list: (); +// $visibility-hidden-list: (); + +// $visibility-table-list: (); +// $visibility-table-header-group-list: (); +// $visibility-table-row-group-list: (); +// $visibility-table-row-list: (); +// $visibility-table-cell-list: (); + +// @each $visibility-comparison-breakpoint in $visibility-breakpoint-sizes { +// @if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) < index($visibility-breakpoint-sizes, $current-visibility-breakpoint) { +// // Smaller than current breakpoint + +// $visibility-inherit-list: append($visibility-inherit-list, unquote( +// '.hide-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-none-list: append($visibility-none-list, unquote( +// '.show-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-visible-list: append($visibility-visible-list, unquote( +// '.hidden-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-hidden-list: append($visibility-hidden-list, unquote( +// '.visible-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-list: append($visibility-table-list, unquote( +// 'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( +// 'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( +// 'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-row-list: append($visibility-table-row-list, unquote( +// 'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( +// 'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); + +// // Foundation 4 compatibility: +// // Include .show/hide-for-[size] and .show/hide-for-[size]-down classes +// // for small, medium, and large breakpoints only +// @if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false { +// $visibility-inherit-list: append($visibility-inherit-list, unquote( +// '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-none-list: append($visibility-none-list, unquote( +// '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-visible-list: append($visibility-visible-list, unquote( +// '.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-hidden-list: append($visibility-hidden-list, unquote( +// '.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-list: append($visibility-table-list, unquote( +// 'table.hide-for-#{$visibility-comparison-breakpoint}, table.hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( +// 'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( +// 'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-row-list: append($visibility-table-row-list, unquote( +// 'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( +// 'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.hide-for-#{$visibility-comparison-breakpoint}-down, td.hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// } + +// } @else if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) > index($visibility-breakpoint-sizes, $current-visibility-breakpoint) { +// // Larger than current breakpoint + +// $visibility-inherit-list: append($visibility-inherit-list, unquote( +// '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-none-list: append($visibility-none-list, unquote( +// '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-visible-list: append($visibility-visible-list, unquote( +// '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-hidden-list: append($visibility-hidden-list, unquote( +// '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-list: append($visibility-table-list, unquote( +// 'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( +// 'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( +// 'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-row-list: append($visibility-table-row-list, unquote( +// 'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( +// 'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.hide-for-#{$visibility-comparison-breakpoint}-up, td.hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); + +// // Foundation 4 compatibility: +// // Include .show/hide-for-[size] and .show/hide-for-[size]-down classes +// // for small, medium, and large breakpoints only +// @if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false { +// $visibility-inherit-list: append($visibility-inherit-list, unquote( +// '.hide-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-none-list: append($visibility-none-list, unquote( +// '.show-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-visible-list: append($visibility-visible-list, unquote( +// '.hidden-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-hidden-list: append($visibility-hidden-list, unquote( +// '.visible-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-list: append($visibility-table-list, unquote( +// 'table.hide-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( +// 'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( +// 'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-row-list: append($visibility-table-row-list, unquote( +// 'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( +// 'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// } + +// } @else { +// // Current breakpoint + +// $visibility-inherit-list: append($visibility-inherit-list, unquote( +// '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-none-list: append($visibility-none-list, unquote( +// '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-visible-list: append($visibility-visible-list, unquote( +// '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-hidden-list: append($visibility-hidden-list, unquote( +// '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-list: append($visibility-table-list, unquote( +// 'table.show-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( +// 'thead.show-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( +// 'tbody.show-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-row-list: append($visibility-table-row-list, unquote( +// 'tr.show-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); +// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( +// 'th.show-for-#{$visibility-comparison-breakpoint}-only, td.show-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up' +// ), comma); + +// // Foundation 4 compatibility: +// // Include .show/hide-for-[size] and .show/hide-for-[size]-down classes +// // for small, medium, and large breakpoints only +// @if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false { +// $visibility-inherit-list: append($visibility-inherit-list, unquote( +// '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-none-list: append($visibility-none-list, unquote( +// '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-visible-list: append($visibility-visible-list, unquote( +// '.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-hidden-list: append($visibility-hidden-list, unquote( +// '.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-list: append($visibility-table-list, unquote( +// 'table.show-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-header-group-list: append($visibility-table-header-group-list, unquote( +// 'thead.show-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-row-group-list: append($visibility-table-row-group-list, unquote( +// 'tbody.show-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-row-list: append($visibility-table-row-list, unquote( +// 'tr.show-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// $visibility-table-cell-list: append($visibility-table-cell-list, unquote( +// 'th.show-for-#{$visibility-comparison-breakpoint}, td.show-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down' +// ), comma); +// } +// } +// } + +// /* #{$current-visibility-breakpoint} displays */ +// @media #{nth($visibility-breakpoint-queries, index($visibility-breakpoint-sizes, $current-visibility-breakpoint))} { +// #{$visibility-inherit-list} { +// display: inherit !important; +// } +// #{$visibility-none-list} { +// display: none !important; +// } +// @if $include-accessibility-classes != false { +// #{$visibility-visible-list} { +// @include element-invisible-off; +// } +// #{$visibility-hidden-list} { +// @include element-invisible; +// } +// } +// @if $include-table-visibility-classes != false { +// #{$visibility-table-list} { +// display: table !important; +// } +// #{$visibility-table-header-group-list} { +// display: table-header-group !important; +// } +// #{$visibility-table-row-group-list} { +// display: table-row-group !important; +// } +// #{$visibility-table-row-list} { +// display: table-row !important; +// } +// #{$visibility-table-cell-list} { +// display: table-cell !important; +// } +// } +// } +// } +// } + + +// @if $include-html-visibility-classes != false { + +// @include visibility-loop; + +// /* Orientation targeting */ +// .show-for-landscape, +// .hide-for-portrait { display: inherit !important; } +// .hide-for-landscape, +// .show-for-portrait { display: none !important; } + +// /* Specific visibility for tables */ +// table { +// &.hide-for-landscape, +// &.show-for-portrait { display: table !important; } +// } +// thead { +// &.hide-for-landscape, +// &.show-for-portrait { display: table-header-group !important; } +// } +// tbody { +// &.hide-for-landscape, +// &.show-for-portrait { display: table-row-group !important; } +// } +// tr { +// &.hide-for-landscape, +// &.show-for-portrait { display: table-row !important; } +// } +// td, +// th { +// &.hide-for-landscape, +// &.show-for-portrait { display: table-cell !important; } +// } + +// @media #{$landscape} { +// .show-for-landscape, +// .hide-for-portrait { display: inherit !important; } +// .hide-for-landscape, +// .show-for-portrait { display: none !important; } + +// /* Specific visibility for tables */ +// table { +// &.show-for-landscape, +// &.hide-for-portrait { display: table !important; } +// } +// thead { +// &.show-for-landscape, +// &.hide-for-portrait { display: table-header-group !important; } +// } +// tbody { +// &.show-for-landscape, +// &.hide-for-portrait { display: table-row-group !important; } +// } +// tr { +// &.show-for-landscape, +// &.hide-for-portrait { display: table-row !important; } +// } +// td, +// th { +// &.show-for-landscape, +// &.hide-for-portrait { display: table-cell !important; } +// } +// } + +// @media #{$portrait} { +// .show-for-portrait, +// .hide-for-landscape { display: inherit !important; } +// .hide-for-portrait, +// .show-for-landscape { display: none !important; } + +// /* Specific visibility for tables */ +// table { +// &.show-for-portrait, +// &.hide-for-landscape { display: table !important; } +// } +// thead { +// &.show-for-portrait, +// &.hide-for-landscape { display: table-header-group !important; } +// } +// tbody { +// &.show-for-portrait, +// &.hide-for-landscape { display: table-row-group !important; } +// } +// tr { +// &.show-for-portrait, +// &.hide-for-landscape { display: table-row !important; } +// } +// td, +// th { +// &.show-for-portrait, +// &.hide-for-landscape { display: table-cell !important; } +// } +// } + +// /* Touch-enabled device targeting */ +// .show-for-touch { display: none !important; } +// .hide-for-touch { display: inherit !important; } +// .touch .show-for-touch { display: inherit !important; } +// .touch .hide-for-touch { display: none !important; } + +// /* Specific visibility for tables */ +// table.hide-for-touch { display: table !important; } +// .touch table.show-for-touch { display: table !important; } +// thead.hide-for-touch { display: table-header-group !important; } +// .touch thead.show-for-touch { display: table-header-group !important; } +// tbody.hide-for-touch { display: table-row-group !important; } +// .touch tbody.show-for-touch { display: table-row-group !important; } +// tr.hide-for-touch { display: table-row !important; } +// .touch tr.show-for-touch { display: table-row !important; } +// td.hide-for-touch { display: table-cell !important; } +// .touch td.show-for-touch { display: table-cell !important; } +// th.hide-for-touch { display: table-cell !important; } +// .touch th.show-for-touch { display: table-cell !important; } + + +// /* Print visibility */ +// @media print { +// .show-for-print { display: block; } +// .hide-for-print { display: none; } + +// table.show-for-print { display: table !important; } +// thead.show-for-print { display: table-header-group !important; } +// tbody.show-for-print { display: table-row-group !important; } +// tr.show-for-print { display: table-row !important; } +// td.show-for-print { display: table-cell !important; } +// th.show-for-print { display: table-cell !important; } + +// } + +// } diff --git a/assets/styles/getting_started.sass b/app/styles/app/getting_started.sass similarity index 97% rename from assets/styles/getting_started.sass rename to app/styles/app/getting_started.sass index 109f5a98..252db939 100644 --- a/assets/styles/getting_started.sass +++ b/app/styles/app/getting_started.sass @@ -2,7 +2,6 @@ width: 850px margin: 0 auto padding-top: 30px - font-family: 'Source Sans Pro', Helvetica, sans-serif font-size: 17px line-height: 26px text-align: center diff --git a/assets/styles/app/github.sass b/app/styles/app/github.sass similarity index 80% rename from assets/styles/app/github.sass rename to app/styles/app/github.sass index fdf9f1b1..f7a0b394 100644 --- a/assets/styles/app/github.sass +++ b/app/styles/app/github.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #github-wrapper position: absolute @@ -32,7 +31,6 @@ text-shadow: 0 0 10px #522600 pointer-events: auto - - @include rotate(45deg) - @include box-shadow(rgba(black, 0.5) 1px 1px 10px, rgba(black, 0.07) 0 0 3px 1px inset) + transform: rotate(45deg) + box-shadow: rgba(black, 0.5) 1px 1px 10px, rgba(black, 0.07) 0 0 3px 1px inset diff --git a/assets/styles/layout.sass b/app/styles/app/layout.sass similarity index 53% rename from assets/styles/layout.sass rename to app/styles/app/layout.sass index a1c892a8..022777e9 100644 --- a/assets/styles/layout.sass +++ b/app/styles/app/layout.sass @@ -1,53 +1,22 @@ -@import "_mixins/all" -$left-width: 250px +.centered .row + max-width: 1024px -@mixin display-flex - display: -webkit-flex - display: -moz-flex - display: -ms-flexbox - display: flex - -@mixin flex($grow, $shrink, $size) - -ms-flex: $grow $shrink $size - -webkit-flex: $grow $shrink $size - -moz-flex: $grow $shrink $size - flex: $grow $shrink $size - -html, body - min-height: 100vh - -body > div:first-child - min-height: 100vh - -.application +.main, +.profile-view position: relative width: 100% min-height: 100vh - margin-top: 40px - @include display-flex -#top - position: absolute - top: -40px - left: 0 - width: 100% - min-width: 930px - height: 55px - z-index: 1000 - -#auth, #not-found +#auth, #not-found, #simple #top top: 0 #not-found #main padding: 100px 50px 0 50px - -#left, #right +#left, #right, .wrapper-main position: relative - min-height: 100% - @include flex(0, 0, 25em) #left padding: 0 0 110px 0 @@ -64,24 +33,64 @@ body > div:first-child background: inline-image('ui/clock.svg') no-repeat 0px 0px background-size: contain - -@media screen and (max-width: 980px) - #left - max-width: 300px - #main - -webkit-flex: 1 - -moz-flex: 1 - -ms-flex: 1 - flex: 1 position: relative - min-width: 539px - padding: 20px 40px 80px 30px + padding: 20px 30px 80px + +.wrapper + overflow: hidden + #main, + #left, + #right + margin-bottom: -99999px + padding-bottom: 100034px + +@media #{$medium-up} + + // layout magic http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ + .wrapper-main + overflow: hidden + height: 100% + & > div:first-child:nth-last-child(2) + width: grid-calc(20, 24) + float: left + + & > div:first-child:nth-last-child(2) ~ div + width: grid-calc(4, 24) + max-width: 180px + float: right + + .maximized + .wrapper-main + & > div:first-child:nth-last-child(2) + width: grid-calc(24, 24) + float: none + + & > div:first-child:nth-last-child(2) ~ div + display: none + +@media #{$large-up} + + #left, #right, .wrapper-main + min-height: 100vh + + #left + width: grid-calc(5, 24) + float: left + margin-left: -100% + max-width: 325px + + .wrapper-main + width: grid-calc(19, 24) + float: left + margin-left: grid-calc(5, 24) + overflow: visible + .travis-lint - background-color: #fafafa + background-color: $travis-lint-bg width: 100% - color: #9b9d9e + color: $travis-lint-color margin: 10px 0 36px 0 p padding: 10px @@ -132,3 +141,14 @@ body > div:first-child min-width: 960px #tools display: none + +a + text-decoration : none + +.application, +.dashboard + height: 100% + + +.no-padding + padding : 0 diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass new file mode 100644 index 00000000..9e1732ea --- /dev/null +++ b/app/styles/app/layouts/dashboard.sass @@ -0,0 +1,191 @@ +/* + * Dashboard + * @todo: split into components: filter, search + */ + +.wrapper-dashboard + background-color: $wrapper-bg-color + + #top + .user + a + padding-right: 0 + +.current-org-avatar + display : inline-block + height : 20px + width : 20px + vertical-align: top + margin : -5px 5px 0 0 + +#filters-search + background : $white + font-size : 14px + padding : 5px 0 5px 0 + max-height : 44px + +#filters + float : left + +#filters ul + text-align : left + display : inline + margin : 0 + padding : 0 + list-style : none + z-index : 1000 + +#filters ul li + background : $white + position : relative + display : inline-block + padding : 10px 0 10px 0 + margin-right : -4px + margin-top : 0 + cursor : pointer + border-radius : 0px + +#filters li.filters-start:hover + background-color : #fff + +#filters ul li ul + padding : 0 + position : absolute + top : 35px + left : 0 + width : 200px + display : none + opacity : 0 + visibility : hidden + box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4) + +#filters ul li ul li + display : block + line-height : 23px + padding-left : 20px + +#filters ul li ul li:first-child + border-top-left-radius : 4px + border-top-right-radius : 4px + +#filters ul li ul li:last-child + border-bottom-left-radius : 4px + border-bottom-right-radius : 4px + +#filters ul li ul li div + display : inline-block + width : 20px + height : 20px + margin-right : 5px + text-indent : -9999px + border-radius : 100px + +#filters ul li ul li:hover + background : #5e869a + color : $white + +#filters ul li:hover ul + display : block + opacity : 1 + visibility : visible + +#views + float : left + +#views ul + text-align : left + display : inline + margin : 0 + padding : 0 + list-style : none + z-index : 1000 + +#views ul li + background : $white + position : relative + display : inline-block + padding : 10px 0 10px 0 + margin-right : -4px + margin-top : 0 + cursor : pointer + border-radius : 0px + -webkit-border-radius : 0px + -moz-border-radius : 0px + +#views li.views-start:hover + background-color : #fff + +#views ul li ul + padding : 0 + position : absolute + top : 35px + left : 0 + width : 200px + display : none + opacity : 0 + visibility : hidden + box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4) + +#views ul li ul li + display : block + line-height : 23px + padding-left : 20px + +#views ul li ul li:first-child + border-top-left-radius : 4px + border-top-right-radius : 4px + +#views ul li ul li:last-child + border-bottom-left-radius : 4px + border-bottom-right-radius : 4px + +#views ul li ul li:hover + background : #5e869a + color : $white + +#views ul li:hover ul + display : block + opacity : 1 + visibility : visible + +.currently-selected + font-weight : 600 + +.arrow-down + width : 0 + height : 0 + display : inline-block + padding-top : 2px + margin-left : 5px + border-left : 5px solid transparent + border-right : 5px solid transparent + border-top : 5px solid $dashboard-text-color + +#search + float : right + +#search ul + text-align : left + margin : 0 + padding-left : 0 + list-style : none + +#search ul li + position : relative + display : inline-block + padding : 9px 0 8px 0 + margin-top : 0 + width : 158px + line-height : 17px + +.search-field + background-image : url('/images/dashboard/search-icon.svg') + background-repeat : no-repeat + background-position: right 5px center + display : inline-block + float : right + border : 1px solid #666 + padding : 0.5em + width : 300px + background-size : 16px 16px + diff --git a/app/styles/app/layouts/error.sass b/app/styles/app/layouts/error.sass new file mode 100644 index 00000000..5ea61f29 --- /dev/null +++ b/app/styles/app/layouts/error.sass @@ -0,0 +1,149 @@ +/* + * Error Pages + */ + + +.error, +.maintenance + height: 100% + overflow: hidden + + .full-size + position: absolute + top: 0 + height: 100% + width: 100% + overflow: hidden + background: + repeat: no-repeat + +.main--error + min-height: 100% + +.error-text, +.maintenance-text + position: absolute + left: 0 + right: 0 + z-index: 10 + h1 + margin: 1em 0 .4em + font-weight: 600 + color: $error-heading-color + font-size: 40px + line-height: 1 + text-align: center + @media #{$medium-up} + margin: 1.5em 0 .4em + font-size: 70px + p + padding: 0 1em + color: $error-copy-color + font-size: 18px + text-align: center + a + color: $error-copy-color + &:hover, + &:focus + color: $error-copy-color + text-decoration: underline + +.icon-twitter + display: inline-block + width: 1.1em + height: 1.1em + background: + image: url(../images/error/twitter.svg) + size: 100% auto + repeat: no-repeat + position: 0 .2em + + +/* + * Maintenance + */ +.maintenance-bg + background: linear-gradient(0deg, $maintenance-grass, $maintenance-grass 34.9%, $error-bg-gradient 35%, $white 60%, $white) + + .hill-left + background: + image: url(../images/error/maintenance-hills-left.svg) + size: 80vw auto + position: 0 62% + @media #{$medium-up} + background-size: 58vw auto + background-position: 0 62% + @media #{$large-up} + background-size: 50vw auto + background-position: 0 61% + .hill-right + display: none + background: + image: url(../images/error/maintenance-hills-right.svg) + size: 38vw auto + position: 99% 63% + @media #{$medium-up} + display: block + .shadow-left + background: + image: url(../images/error/maintenance-grass-shade-left.svg) + size: 24vw auto + position: 6% 82% + .shadow-right + background: + image: url(../images/error/maintenance-grass-shade-right.svg) + size: 17vw auto + position: 95% 89% + +.maintenance-tractor + background: + image: url(../images/error/maintenance-tractor.svg) + size: 87vw auto + position: 63% 87% + @media #{$medium-up} + background-size: auto 40vh + @media #{$large-up} + background-size: auto 40vh + +/* + * 404 + */ +.error-bg + background: linear-gradient(0deg, $error-hill-grey, $error-hill-grey 34.9%, $error-bg-gradient 35%, $white 60%, $white) + +.error-hill-left + display: none + background: + image: url(../images/error/404-hills-left.svg) + size: 30vw auto + position: 0 (100% - 37%) + @media #{$medium-up} + display: block + +.error-hill-right + background: + image: url(../images/error/404-hills-right.svg) + size: auto 20vw + position: 99% 63% + @media #{$medium-up} + background-size: 50vw auto + background-position: 99% 63% + @media #{$large-up} + background-position: 99% 61% + +.error-excavator + background: + image: url(../images/error/excavator.svg) + size: auto 25vh + position: 71% 83% + +.error-travis + background: + image: url(../images/error/pensive-travis.svg) + size: auto 60vh + position: 34% 92% + @media #{$medium-up} + background-size: auto 50vh + @media #{$large-up} + background-size: auto 60vh + diff --git a/app/styles/app/layouts/footer.sass b/app/styles/app/layouts/footer.sass new file mode 100644 index 00000000..3d28b0cf --- /dev/null +++ b/app/styles/app/layouts/footer.sass @@ -0,0 +1,74 @@ +/* + * Footer on the dashboard + */ + +a + color : $color-link + text-decoration : none + +footer + padding : 20px 0 + background-color : $footer-bg-color + min-height : 334px + font-size : 12px + line-height : 22px + margin-top : -334px /* sticky footer */ + + a + display : block + color : $footer-color + +.wrapper + padding-bottom: 334px + min-height: 100% + height: auto +@media (min-width: 640px) + .wrapper + padding-bottom: 204px + + footer + margin-top: -204px + min-height: 204px + + +footer h3 + font-size : 15px + margin : 0 0 10px 0 + padding-top : 6px + font-weight : 400 + color : $footer-h3-color + border-top : solid 4px $footer-h3-corder-color + +footer .row p + display : inline-block + margin : 0 + +footer .row ul, +footer .row li + display : block + color : $footer-color + line-height : 22px + padding : 0 + margin-top : 0 + list-style-type : none + +footer a + text-decoration : none + display : inline-block + color : $footer-color + +footer a:hover, +footer a:active + text-decoration : underline + +.status-circle + background : $pass-color + display : inline-block + height : 11px + width : 11px + text-indent : -9999px + margin-right : 5px + border-radius : 100px + -webkit-border-radius : 100px + -moz-border-radius : 100px + vertical-align: middle diff --git a/assets/styles/left.sass b/app/styles/app/left.sass similarity index 64% rename from assets/styles/left.sass rename to app/styles/app/left.sass index 8f95f077..7961690f 100644 --- a/assets/styles/left.sass +++ b/app/styles/app/left.sass @@ -1,10 +1,9 @@ -@import "_mixins/all.sass" #left #search_box height: 87px - padding: 50px 20px 0 20px - background-color: #e9e9e7 + padding: 35px 20px 90px 20px + background-color: $left-bg input[type=text] height: 28px @@ -12,8 +11,10 @@ padding: 0 0 0 10px color: $color-text font-size: $font-size-small - @include box-sizing(border-box) border: 0 background: $color-bg-input inline-image('ui/search.svg') no-repeat 95% - background-size: 5% + background-size: 3% + + @media #{$large-up} + background-size: 5% diff --git a/assets/styles/left/list.sass b/app/styles/app/left/list.sass similarity index 88% rename from assets/styles/left/list.sass rename to app/styles/app/left/list.sass index 767097ba..63a68470 100644 --- a/assets/styles/left/list.sass +++ b/app/styles/app/left/list.sass @@ -1,10 +1,18 @@ -@import "_mixins/all" #accounts, #repos + @include resetul + &.open li .info display: block + a:hover, + a:active + text-decoration: underline + + a:focus + outline: 1px dotted + li position: relative font-size: $font-size-big @@ -25,6 +33,12 @@ overflow: hidden text-overflow: ellipsis padding-right: 35px + a + display: inline-block + width: 91% + text-overflow: ellipsis + overflow: hidden + vertical-align: top .last_build position: absolute @@ -69,7 +83,7 @@ p margin: 0 -10px 0 -10px padding: 12px 35px 12px 73px - @include box-shadow($color-shadow-list-info 0 1px 8px 0 inset) + box-shadow: $color-shadow-list-info 0 1px 8px 0 inset .indicator display: none @@ -88,7 +102,7 @@ width: 20px height: 20px border: 1px solid $color-border-normal - @include rotate(45deg) + transform: rotate(45deg) &.selected .indicator display: block diff --git a/assets/styles/app/loading.sass b/app/styles/app/loading.sass similarity index 93% rename from assets/styles/app/loading.sass rename to app/styles/app/loading.sass index c3371a4e..741431fa 100644 --- a/assets/styles/app/loading.sass +++ b/app/styles/app/loading.sass @@ -1,6 +1,5 @@ -@import "_mixins/all" -.loading +div.loading, p.loading padding: 15px 25px 0 0 span padding-right: 25px diff --git a/assets/styles/main.sass b/app/styles/app/main.sass similarity index 66% rename from assets/styles/main.sass rename to app/styles/app/main.sass index 76064b22..e8e943d3 100644 --- a/assets/styles/main.sass +++ b/app/styles/app/main.sass @@ -1,14 +1,14 @@ -@import "_mixins/all" #main h3 - margin: 15px 60px 0 0 + margin: 13px 5px 0 0 font-size: $font-size-huge + line-height: 1 a - color: #50555b + color: $main-repo-link-color text-decoration: none a:hover - color: #607a84 + color: $main-repo-hover-color text-decoration: underline #stats diff --git a/assets/styles/main/annotations.sass b/app/styles/app/main/annotations.sass similarity index 90% rename from assets/styles/main/annotations.sass rename to app/styles/app/main/annotations.sass index 7fd355e7..35fe3b3c 100644 --- a/assets/styles/main/annotations.sass +++ b/app/styles/app/main/annotations.sass @@ -1,9 +1,8 @@ -@import "_mixins/all" #annotations + @include clearfix margin: 8px 0 25px 12px padding: 12px 0 0 0 - @include clearfix a text-decoration: underline diff --git a/assets/styles/main/list.sass b/app/styles/app/main/list.sass similarity index 88% rename from assets/styles/main/list.sass rename to app/styles/app/main/list.sass index eecc6f52..e01b9831 100644 --- a/assets/styles/main/list.sass +++ b/app/styles/app/main/list.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" table.list width: 100% @@ -39,10 +38,10 @@ table.list white-space: normal td:first-child - @include border-left-radius(4px) + border-left-radius: 4px td:last-child - @include border-right-radius(4px) + border-right-radius: 4px tr.message, td.message width: 100% diff --git a/assets/styles/main/log.sass b/app/styles/app/main/log.sass similarity index 94% rename from assets/styles/main/log.sass rename to app/styles/app/main/log.sass index d55c80ac..e85f6256 100644 --- a/assets/styles/main/log.sass +++ b/app/styles/app/main/log.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" pre#log position: relative @@ -123,8 +122,8 @@ pre#log border: 1px solid #bbb border-top-color: #ddd border-bottom-color: #bbb - @include border-radius(8px) - @include background(linear-gradient(#fff, #e0e0e0)) + border-radius: 8px + background: linear-gradient(#fff, #e0e0e0) label display: none @@ -149,8 +148,8 @@ pre#log width: 8px height: 8px background-color: #aaa - @include border-radius(4px) - @include box-shadow(white 1px 1px 2px) + border-radius: 4px + box-shadow: $white 1px 1px 2px &.active .status background-color: #6b0 @@ -162,7 +161,6 @@ pre#log bottom: 2px right: 2px - width: 50px margin-right: 2px padding-right: 16px text-align: right diff --git a/assets/styles/main/repository.sass b/app/styles/app/main/repository.sass similarity index 86% rename from assets/styles/main/repository.sass rename to app/styles/app/main/repository.sass index 1b74bef8..dc88f2e8 100644 --- a/assets/styles/main/repository.sass +++ b/app/styles/app/main/repository.sass @@ -1,28 +1,23 @@ -@import "_mixins/all" #repo position: relative width: 100% overflow-x: hidden - padding: 15px 0 0 10px + padding: 1px 0 0 10px h3 - display: inline-block margin-right: 5px .status-image + display: inline-block position: relative - top: 1px width: 90px height: 25px - display: inline-block - margin-left: 15px + vertical-align: top a#status-image-popup display: inline-block opacity: 1.0 - //margin-top: 8px - img border: none @@ -31,11 +26,8 @@ height: 21px display: inline-block position: relative - top: 1px - - .github-icon + vertical-align: top img - margin-top: 2px opacity: 0.65 .not-found @@ -45,7 +37,6 @@ .description, .language font-weight: normal - color: #666a72 font-size: 15px .description @@ -55,6 +46,7 @@ .language display: none padding-right: 5px + color: #666a72 .github-stats position: absolute @@ -87,3 +79,16 @@ background-size: 12px opacity: 1 padding-right: 16px + + + @media #{$large-up} + h3 + display: inline-block + .github-icon + display: inline-block + top: 17px + margin-right: 1em + .status-image + top: 18px + + diff --git a/assets/styles/main/sponsors.sass b/app/styles/app/main/sponsors.sass similarity index 100% rename from assets/styles/main/sponsors.sass rename to app/styles/app/main/sponsors.sass diff --git a/assets/styles/main/summary.sass b/app/styles/app/main/summary.sass similarity index 84% rename from assets/styles/main/summary.sass rename to app/styles/app/main/summary.sass index 84ac3397..852d47ba 100644 --- a/assets/styles/main/summary.sass +++ b/app/styles/app/main/summary.sass @@ -1,37 +1,43 @@ -@import "_mixins/all" .green .build-status - background: #549e54 inline-image('icons/state-passed-white.svg') no-repeat - background-size: 14px 14px - background-position: 12px 12px + background: + color: #549e54 + image: inline-image('icons/state-passed-white.svg') .yellow .build-status - background: #bcaf39 inline-image('icons/state-pending-white.svg') no-repeat - background-size: 14px 14px - background-position: 12px 12px + background: + color: #bcaf39 + image: inline-image('icons/state-pending-white.svg') .red .build-status - background: #b54223 inline-image('icons/state-failed-white.svg') no-repeat - background-size: 14px 14px - background-position: 12px 12px + background: + color: #b54223 + image: inline-image('icons/state-failed-white.svg') .gray .build-status - background: #a8a8a9 inline-image('icons/state-errored-white.svg') no-repeat + background: + color: #a8a8a9 + image: inline-image('icons/state-errored-white.svg') + +.build-status background-size: 14px 14px background-position: 12px 12px + background-repeat: no-repeat #new-summary @include clearfix - @include border-radius(4px) + border-radius: 4px padding: 0 11px 0 51px position: relative min-height: 155px - padding-right: 240px background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN4/+HDfwAJcAPPMJixRQAAAABJRU5ErkJggg=='), #fafafa background-size: 41px 100% background-repeat: no-repeat + @media #{$large-up} + padding-right: 240px + .mainline display: -webkit-flex display: flex @@ -94,7 +100,7 @@ text-decoration: underline .build-status - @include border-radius(4px) + border-radius: 4px color: white padding: 8px 0 font-size: 16px @@ -146,13 +152,20 @@ display: inline-block max-width: 175px line-height: 24px + color: $color-link .right - width: 220px font-size: 11px - top: 10px - right: 10px - position: absolute + + color: $color-link + a:hover + text-decoration: underline + + @media #{$large-up} + position: absolute + top: 10px + right: 10px + width: 220px .footer a @@ -168,6 +181,7 @@ display: inline-block position: relative top: 2px + font-size: $font-size-small .author float: left diff --git a/assets/styles/main/tools.sass b/app/styles/app/main/tools.sass similarity index 81% rename from assets/styles/main/tools.sass rename to app/styles/app/main/tools.sass index 4d1b040b..15062e94 100644 --- a/assets/styles/main/tools.sass +++ b/app/styles/app/main/tools.sass @@ -1,43 +1,38 @@ -@import "_mixins/all" #tools position: relative - float: right - top: 2px - width: 600px + margin-top: 5px & > a.menu-popup-button display: inline-block text-align: left - margin-top: -31px color: #fff font-size: 13px - padding: 3px 24px 2px 25px + padding: 3px 24px 3px 25px background-image: inline-image('icons/settings.svg'), inline-image('icons/dropdown-arrow-white.svg') background-size: 14px 14px, 8px 8px - background-position: 6px 6px, right 9px center + background-position: 6px 7px, right 9px center background-color: #a6adad background-repeat: no-repeat - @include border-radius(4px) - + border-radius: 4px cursor: pointer - float: right img width: 7px padding-left: 10px .menu + @include resetul + @include border-bottom-radius(4px) + margin-top: 1px z-index: 1000 display: none position: absolute - right: 0 - top: -3px width: 140px background-color: #a6adad - @include border-bottom-radius(4px) a display: block - color: #ffffff + color: $white + font-size: $font-size-small padding: 5px 25px 5px 25px &:hover:not(.disabled) background-color: #909393 @@ -47,6 +42,19 @@ cursor: default color: $color-link-disabled + @media screen and (min-width: 46em) + position: relative + top: 2px + width: 600px + float: right + & > a.menu-popup-button + margin-top: -37px + float: right + .menu + right: 0 + top: -8px + margin-top: 0 + #code-climate a text-decoration: underline @@ -60,9 +68,20 @@ margin-right: 10px #actions - float: right text-align: right + ul + @include resetul + li + display: inline + + @media #{$medium-up} + float: right + position: relative + top: 1.8em + ul + margin-top: -21px + li.restart-build a, li.restart-job a background-image: inline-image('icons/repeat.svg') @@ -125,9 +144,3 @@ opacity: 0.6 display: none visibility: hidden - - ul - margin-top: -27px - - li - display: inline diff --git a/app/styles/app/maximize.sass b/app/styles/app/maximize.sass new file mode 100644 index 00000000..fefd80e5 --- /dev/null +++ b/app/styles/app/maximize.sass @@ -0,0 +1,25 @@ +#global_slider + display: none + +.pro.maximized + #right + display: none + + #global_slider + position: absolute + background-color: $color-bg-slider + cursor: pointer + background: transparent inline-image('ui/slider-open.svg') no-repeat 6px 5px + border-top-left-radius: 4px + top: 85px + right: 0 + width: 20px + height: 20px + border-bottom-left-radius: 4px + display: block + + &:hover + background-color: $color-border-slider-hover + +#top .profile + margin-right: 15px diff --git a/assets/styles/app/misc.sass b/app/styles/app/misc.sass similarity index 91% rename from assets/styles/app/misc.sass rename to app/styles/app/misc.sass index 2b5a7a4a..0a6e4bb0 100644 --- a/assets/styles/app/misc.sass +++ b/app/styles/app/misc.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" .display display: block !important diff --git a/assets/styles/app/popup.sass b/app/styles/app/popup.sass similarity index 91% rename from assets/styles/app/popup.sass rename to app/styles/app/popup.sass index 1d8c86ca..2dcdba7a 100644 --- a/assets/styles/app/popup.sass +++ b/app/styles/app/popup.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" .help display: inline-block @@ -21,7 +20,7 @@ margin: -200px 0 0 -200px padding: 20px @include popup - @include box-sizing(border-box) + box-sizing: border-box .close position: absolute @@ -48,7 +47,8 @@ background-color: $color-bg-pre margin: 0 padding: 10px 20px - @include border-radius(4px) + border-radius: 4px + overflow-x: scroll #status-images display: none @@ -67,7 +67,7 @@ padding: 4px resize: vertical margin-bottom: 0px - @include border-radius(3px) + border-radius: 3px p:last-child margin-top: 10px @@ -93,7 +93,7 @@ border: 1px solid $color-border-light width: 505px padding: 4px - @include border-radius(3px) + border-radius: 3px #regenerate-key, #regeneration-success display: none diff --git a/assets/styles/pro.sass b/app/styles/app/pro.sass similarity index 87% rename from assets/styles/pro.sass rename to app/styles/app/pro.sass index 2dc3c6b0..a6db3606 100644 --- a/assets/styles/pro.sass +++ b/app/styles/app/pro.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" .pro #log-container @@ -104,17 +103,16 @@ .group a cursor: pointer - @import "_mixins/all" - #right - padding-bottom: 80px - + padding-top: 13px + padding-right: 20px + padding-left: 20px + color: $color-link h4 - margin: 24px 0 0 0 - + margin: 24px 0 0 ul + @include resetul margin-top: 10px - li word-wrap: break-word @@ -147,28 +145,17 @@ background-color: $color-bg-slider cursor: pointer background: transparent url(/images/ui/slider-closed.png) no-repeat 3px 38px - @include border-top-left-radius(4px) + border-top-left-radius: 4px &:hover background-color: $color-border-slider-hover - .maximized - #slider - top: 45px - #right .show-more-jobs text-decoration: underline cursor: pointer - @mixin flex($grow, $shrink, $size) - -webkit-flex: $grow $shrink $size - flex: $grow $shrink $size - #right - @include flex(1, 1, 300px) - max-width: 180px - padding: 25px 20px 80px 20px - background-color: #E9E9E7 + background-color: $right-bg border-left: 1px solid $color-border-normal #settings li.env-var span.name diff --git a/assets/styles/profile.sass b/app/styles/app/profile.sass similarity index 90% rename from assets/styles/profile.sass rename to app/styles/app/profile.sass index ff7c488b..7545fcb7 100644 --- a/assets/styles/profile.sass +++ b/app/styles/app/profile.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #profile #main @@ -6,15 +5,16 @@ h3 height: 19px - padding-bottom: 35px + padding-bottom: 50px line-height: 19px + color: $color-text img float: left width: 100px height: 100px margin: 3px 20px 0 0 - @include border-radius(100px) + border-radius: 100px background-color: $color-bg-light dl.profile diff --git a/assets/styles/profile/hooks.sass b/app/styles/app/profile/hooks.sass similarity index 91% rename from assets/styles/profile/hooks.sass rename to app/styles/app/profile/hooks.sass index aeaeb318..7d6b6b09 100644 --- a/assets/styles/profile/hooks.sass +++ b/app/styles/app/profile/hooks.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #profile #unadministerable-hooks @@ -9,12 +8,15 @@ margin-top: 5px #hooks, #unadministerable-hooks + + @include resetul + .travis-switch font-size: 10px - // @include list-base margin-top: 10px li + box-sizing: content-box position: relative height: 19px padding: 10px @@ -22,9 +24,6 @@ overflow: hidden border-bottom: 1px solid $color-border-light - &:nth-child(3) - border-top: 1px solid $color-border-light - &:nth-child(odd) background-color: $color-bg-hooks-odd .controls @@ -52,7 +51,7 @@ .controls position: absolute - top: 10px + top: 8px right: 0 white-space: nowrap a diff --git a/assets/styles/requests.sass b/app/styles/app/requests.sass similarity index 95% rename from assets/styles/requests.sass rename to app/styles/app/requests.sass index cd0227a7..efd61334 100644 --- a/assets/styles/requests.sass +++ b/app/styles/app/requests.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #request h3 diff --git a/assets/styles/right.sass b/app/styles/app/right.sass similarity index 73% rename from assets/styles/right.sass rename to app/styles/app/right.sass index 4457762b..23a00c68 100644 --- a/assets/styles/right.sass +++ b/app/styles/app/right.sass @@ -1,12 +1,10 @@ -@import "_mixins/all" #profile #right - min-width: 180px - max-width: 180px - padding: 13px 20px 80px 20px + padding-top: 13px + padding-right: 20px + padding-left: 20px background-color: #E9E9E7 - float: right border-left: 1px solid $color-border-normal h4 @@ -20,7 +18,7 @@ margin-left: -3px padding: 15px border: 1px solid #e0e0e0 - background-color: #ffffff + background-color: $white h4 margin: 0 diff --git a/assets/styles/right/lists.sass b/app/styles/app/right/lists.sass similarity index 95% rename from assets/styles/right/lists.sass rename to app/styles/app/right/lists.sass index 0ad786c8..71e61b07 100644 --- a/assets/styles/right/lists.sass +++ b/app/styles/app/right/lists.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #right .tabs @@ -15,7 +14,7 @@ border-bottom-color: $color-border-light white-space: nowrap cursor: pointer - @include border-top-radius(2px) + border-top-radius: 2px font-size: 10px &:hover @@ -100,5 +99,5 @@ width: 8px height: 8px margin-right: 3px - @include border-radius(4px) + border-radius: 4px diff --git a/assets/styles/right/sponsors.sass b/app/styles/app/right/sponsors.sass similarity index 90% rename from assets/styles/right/sponsors.sass rename to app/styles/app/right/sponsors.sass index a4b05d49..bdb1813b 100644 --- a/assets/styles/right/sponsors.sass +++ b/app/styles/app/right/sponsors.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #right .sponsors @@ -11,7 +10,7 @@ width: 205px margin: 0 0 8px 0 border: 1px solid $color-border-light - @include border-radius(8px) + border-radius: 8px list-style-type: none a @@ -21,7 +20,7 @@ z-index: 200 overflow: hidden width: 205px - @include border-radius(8px) + border-radius: 8px .platinum height: 130px diff --git a/assets/styles/settings.sass b/app/styles/app/settings.sass similarity index 88% rename from assets/styles/settings.sass rename to app/styles/app/settings.sass index 005c5cfc..9e8dadf1 100644 --- a/assets/styles/settings.sass +++ b/app/styles/app/settings.sass @@ -1,5 +1,7 @@ #settings - min-width: 830px + ul + @include resetul + .settings-form margin: 30px 0 30px 0 @@ -37,6 +39,9 @@ .field padding-bottom: 10px + clear: left + @media screen and (min-width: 47em) + clear: none .field:after visibility: hidden display: block @@ -45,6 +50,10 @@ clear: both height: 0 + .travis-switch + display: block + margin-top: 4px + label display: inline-block @@ -111,10 +120,9 @@ background-repeat: no-repeat background-size: 0.5em padding-left: 26px - width: 142px .add-env-var, .add-ssh-key - color: #ffffff + color: $white background-color: #97a3aa border-radius: 4px padding: 8px 12px 8px 12px @@ -199,6 +207,10 @@ span.error margin-left: 0 + display: none + + &.show + display: inline-block label.name, label.value display: none @@ -236,15 +248,6 @@ margin: 10px 40px 0 0 padding-bottom: 10px overflow: auto - display: flex - display: -webkit-flex - display: -moz-flex - -webkit-align-items: center - -moz-align-items: center - align-items: center - justify-content: left - -webkit-justify-content: left - -moz-justify-content: left border-bottom: 1px solid #F1F1F1 width: 100% @@ -265,34 +268,29 @@ margin-top: 4px height: 20px - span.name, span.value - display: inline-block + .name, + .value line-height: 20px position: relative font-size: 15px - word-wrap: break-word .equals margin: 0 10px 0 14px - span.name + .name width: 250px margin: 0 10px 0 20px text-align: left - span.value + .value + display: block width: auto text-align: left - min-width: 158px max-width: 390px min-height: 25px - display: flex - display: -webkit-flex - display: -moz-flex - -webkit-align-items: center - -moz-align-items: center - align-items: center - justify-content: left - -webkit-justify-content: left - -moz-justify-content: left - padding: 8px 12px + padding: 7px 12px 3px + + @media #{$medium-up} + .value, + .name + display: inline-block diff --git a/assets/styles/stats.sass b/app/styles/app/stats.sass similarity index 81% rename from assets/styles/stats.sass rename to app/styles/app/stats.sass index 0a6e72b4..aecdcf56 100644 --- a/assets/styles/stats.sass +++ b/app/styles/app/stats.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" #repo_count_container, #build_count_container diff --git a/assets/styles/status.sass b/app/styles/app/status.sass similarity index 94% rename from assets/styles/status.sass rename to app/styles/app/status.sass index 8e701646..2ddd2618 100644 --- a/assets/styles/status.sass +++ b/app/styles/app/status.sass @@ -1,4 +1,3 @@ -@import "_mixins/all" .status display: inline-block @@ -76,6 +75,12 @@ table.list .number a color: $color-text-status-gray + .number a + display: inline-block + text-decoration: none + &:hover + text-decoration: underline + #workers .status background-color: $color-bg-status-waiting diff --git a/assets/styles/tabs.sass b/app/styles/app/tabs.sass similarity index 71% rename from assets/styles/tabs.sass rename to app/styles/app/tabs.sass index 198a1a42..94a1c02c 100644 --- a/assets/styles/tabs.sass +++ b/app/styles/app/tabs.sass @@ -1,28 +1,33 @@ -@import "_mixins/all" +/* + * It's a nightmare to overwrite this + * @todo refactor and get rid of all IDs + */ + .tabs - height: 29px - + @include resetul li - display: inline-block height: 28px vertical-align: top - background-color: #f8f8f8 + background-color: $tab-nav-inactive-bg border-radius: 4px 4px 0px 0px padding: 0 12px 0 12px margin-right: 10px white-space: nowrap cursor: pointer - - &:hover - background-color: $color-bg-tab-hover + @media #{$medium-up} + height: 29px + li + display: inline-block + &:hover + background-color: $tab-nav-inactive-bg-hover .active background-color: $color-bg-tab-active border-bottom-color: $color-bg-tab-active a - color: #666666 + color: $color-text font-weight: 600 h5 @@ -38,12 +43,16 @@ #left + .tabs margin: -28px 20px 0 15px #tab_search:not(.active) display: none + #tab_recent.hidden + display: none + #tab_owned display: none #tab_owned.display @@ -66,48 +75,52 @@ #main .tabs border-bottom: 3px solid #f5f5f6 - li - height: 30px + height: 29px background-color: #f5f5f6 margin-right: 0 - + overflow: hidden &:hover background-color: #e1e8eb - a text-decoration: none .active - background-color: #d8e2e6 - border-bottom-color: #d8e2e6 - + display: block + background-color: $tab-active-bg + border-bottom-color: $tab-active-bg &:hover - background-color: #d8e2e6 - + background-color: $tab-active-bg a color: #6c878e + @media #{$medium-up} + display: inline-block .tab margin-top: 15px - ul.navigation - height: 40px - line-height: 40px + @include resetul border-bottom: 1px solid #EAEAEA - li - display: inline-block margin-right: 10px - a color: #ACACAC font-weight: 600 font-size: 14px - a.active color: #55888E + @media #{$small-up} + li + display: inline-block + @media #{$medium-up} + height: 40px + line-height: 40px + #builds + a + display: inline + +.tabs--main #tab_build, #tab_job, #tab_request, diff --git a/assets/styles/tipsy.css b/app/styles/app/tipsy.scss similarity index 100% rename from assets/styles/tipsy.css rename to app/styles/app/tipsy.scss diff --git a/app/styles/app/top.sass b/app/styles/app/top.sass new file mode 100644 index 00000000..3904a624 --- /dev/null +++ b/app/styles/app/top.sass @@ -0,0 +1,238 @@ + +#top + font-size: $font-size-normal + background : $topbar-bg + + #logo + position: relative + float : left + width : 123px + height : 55px + margin-right : 14px + z-index: 999 + text-indent : -9999px + background : $logo-red inline-image('ui/travis-logo.svg') no-repeat 20px 18px + a + display: block + + ul + @include resetul + line-height: 30px + + #navigation + height: 0 + overflow: hidden + &.is-open + height: auto + + a, span + color: $white + text-decoration: none + + li + border-top: 1px solid $topbar-bg-darker + a, span + display: block + padding: 0 12px + &:hover + color: $color-link-top-highlight + + a.werehiring + background-color: $topbar-bg-darker + border-radius: 4px + padding: 8px 16px + line-height: 20px + margin-right: 80px + display: inline + + li.traviscicom + a + padding-left: 0px + + @media #{$medium-up} + overflow: visible + height: 55px + + #navigation + height: auto + overflow: visible + ul + line-height: 55px + position: relative + top: 3px + li + display: inline-block + border: none + + @media #{$medium-only} + li.traviscicom + display: none + + .nav-burger + overflow: auto + @media #{$medium-up} + display: none + + #burger + float: right + font-size: 50px + background: none + border: none + line-height: 1 + color: $white + outline: none !important + @include clearfix + &:hover + cursor: pointer + + .menu + position: relative + + &.signed-out + ul + display: none + .handle + margin: 0 + + &:hover > ul + display: block + + ul li a + padding-left: 3em + + @media #{$medium-up} + ul + display: none + position: absolute + z-index: 300 + right: 0px + top: 52px + width: 100% + background-color: $color-bg-dropdown + li + display: block + li a + display: block + line-height: 24px + white-space: nowrap + padding: 5px 20px + &:hover + background-color: $color-bg-dropdown-highlight + + .menu.community + min-width: 120px + + .user + text-align: right + + .menu.profile + .signing-in + background: inline-image('ui/spinner.svg') no-repeat 110px 22px + + img + width: 30px + height: 30px + border-radius: 100px + + ul + min-width: 145px + a + padding: 5px 25px 5px 45px + + @media #{$medium-up} + float: right + + .handle > * + display: none + padding: 0 15px 0 45px + .signed-out, .signing-in + min-width: 110px + &.signed-out .signed-out + display: block + &.signing-in .signing-in + display: inline-block + &.signed-in .signed-in + display: block + + &:not(.signed-in):hover ul + display: none + + +#home #navigation .home, +#stats #navigation .stats, +#profile #navigation .profile + background-color: transparent + a + color: #ffffff + a:hover + color: $color-link-top-highlight + + +// .status-graph +// background : url('/images/dashboard/health-stats.svg') no-repeat +// background : contain +// margin-top : 17px +// height : 18px +// width : 78px +// text-indent : -9999px + +// #user +// text-align : right +// cursor : pointer + +// #user p +// display : none + +#top img + margin: 10px 10px 7px 10px + width : 30px + height : 30px + border-radius: 100px + @media #{$medium-up} + float : right + margin : 10px 0 0 10px + +// #user ul +// text-align : left +// display : inline +// margin : 0 +// padding : 15px 0 17px 0 +// list-style : none +// z-index : 1000 + +// #user ul li ul +// padding : 0 +// position : absolute +// top : 55px +// right : 0 +// width : 150px +// display : none +// opacity : 0 +// visibility : hidden + +// #user ul li ul li +// background : $topbar-bg +// color : $white +// display : block +// line-height : 18px +// padding : 8px 18px +// margin : 0 + +// #user ul li ul li:last-child +// border-bottom-left-radius : 4px +// border-bottom-right-radius : 4px + +// #user ul li ul li:hover +// background : #5e869a +// color : $white +// a +// color: $white + + +// #user ul li:hover ul +// display : block +// opacity : 1 +// visibility : visible +// #user .handle a +// display: inline + diff --git a/app/templates/.gitkeep b/app/templates/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/assets/scripts/app/templates/account.hbs b/app/templates/account.hbs similarity index 92% rename from assets/scripts/app/templates/account.hbs rename to app/templates/account.hbs index 05e13dd4..54c9119e 100644 --- a/assets/scripts/app/templates/account.hbs +++ b/app/templates/account.hbs @@ -20,7 +20,7 @@

{{else}}

- Last synchronized from GitHub: {{formatTime user.syncedAt}} + Last synchronized from GitHub: {{format-time user.syncedAt}} Sync now @@ -34,7 +34,7 @@

{{hook.description}}

- {{#link-to "settings" hook.repo class="repo-settings-icon tool-tip" title="Repository settings"}}{{/link-to}} + {{#link-to "settings" hook.ownerName hook.name class="repo-settings-icon tool-tip" title="Repository settings"}}{{/link-to}} {{travis-switch action="toggle" target=hook toggleAutomatically="false"}}
diff --git a/assets/scripts/app/templates/loading.hbs b/app/templates/accounts-list/empty.hbs similarity index 100% rename from assets/scripts/app/templates/loading.hbs rename to app/templates/accounts-list/empty.hbs diff --git a/assets/scripts/app/templates/accounts.hbs b/app/templates/accounts.hbs similarity index 100% rename from assets/scripts/app/templates/accounts.hbs rename to app/templates/accounts.hbs diff --git a/assets/scripts/app/templates/annotations/list.hbs b/app/templates/annotations/list.hbs similarity index 100% rename from assets/scripts/app/templates/annotations/list.hbs rename to app/templates/annotations/list.hbs diff --git a/app/templates/application.hbs b/app/templates/application.hbs new file mode 100644 index 00000000..54b490eb --- /dev/null +++ b/app/templates/application.hbs @@ -0,0 +1,8 @@ +{{outlet}} + + +{{#if config.pro}} +
+
  +
+{{/if}} diff --git a/assets/scripts/app/templates/auth/signin.hbs b/app/templates/auth/signin.hbs similarity index 100% rename from assets/scripts/app/templates/auth/signin.hbs rename to app/templates/auth/signin.hbs diff --git a/assets/scripts/app/templates/builds/show.hbs b/app/templates/build.hbs similarity index 69% rename from assets/scripts/app/templates/builds/show.hbs rename to app/templates/build.hbs index 615deabe..ddb6e2b9 100644 --- a/assets/scripts/app/templates/builds/show.hbs +++ b/app/templates/build.hbs @@ -10,11 +10,11 @@
- {{#if build.isFinished}}ran{{else}}running{{/if}} for {{formatDuration build.duration}} + {{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}}
- {{formatTime build.finishedAt}} + {{format-time build.finishedAt}}
{{#if build.tagName}} @@ -24,14 +24,14 @@ {{/if}}
- Commit {{formatSha commit.sha}} + Commit {{format-sha commit.sha}}
{{#if build.pullRequest}} #{{build.pullRequestNumber}}: {{build.pullRequestTitle}} {{else}} {{#if build.commit.compareUrl}} - Compare {{shortCompareShas build.commit.compareUrl}} + Compare {{short-compare-shas build.commit.compareUrl}} {{/if}} {{/if}}
@@ -43,20 +43,20 @@
- - {{formatMessage build.commit.subject repoBinding=build.repo}} + - {{format-message build.commit.subject repoBinding=build.repo}}
- 
{{formatMessage build.commit.body repoBinding=build.repo pre=true}}
+ 
{{format-message build.commit.body repoBinding=build.repo pre=true}}
{{#if commit.authorName}} -
{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
+
{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
{{/if}} {{#unless commit.authorIsCommitter}} {{#if commit.committerName}} -
{{commit.committerName}} committed
+
{{commit.committerName}} committed
{{/if}} {{/unless}}
diff --git a/assets/scripts/app/templates/builds/list.hbs b/app/templates/builds.hbs similarity index 59% rename from assets/scripts/app/templates/builds/list.hbs rename to app/templates/builds.hbs index 221b16eb..7978bf25 100644 --- a/assets/scripts/app/templates/builds/list.hbs +++ b/app/templates/builds.hbs @@ -22,46 +22,46 @@ {{#each build in controller itemController="buildsItem"}} - {{#view Travis.BuildsItemView contextBinding="build"}} + - {{#if id}} - {{#link-to "build" repo this}} - {{number}} + {{#if build.id}} + {{#link-to "build" build.repo build}} + {{build.number}} {{/link-to}} {{/if}} - {{{formatMessage commit.message short="true" repoBinding=build.repo}}} + {{{format-message build.commit.message short="true" repoBinding=build.repo}}} - - {{formatCommit commit}} + + {{format-commit build.commit}} - {{commit.committerName}} + {{build.commit.committerName}} {{#if isPullRequestsList}} - - #{{pullRequestNumber}} + + #{{build.pullRequestNumber}} {{/if}} - - {{formatDuration duration}} + + {{format-duration build.duration}} - - {{formatTime finishedAt}} + + {{format-time build.finishedAt}} - {{/view}} + {{/each}} {{#if displayShowMoreButton}}

- {{view view.ShowMoreButton}} + {{view 'show-more-button'}} {{#if isLoading}} {{/if}} diff --git a/assets/scripts/app/templates/builds/not_found.hbs b/app/templates/builds/not-found.hbs similarity index 100% rename from assets/scripts/app/templates/builds/not_found.hbs rename to app/templates/builds/not-found.hbs diff --git a/assets/scripts/app/templates/caches.hbs b/app/templates/caches.hbs similarity index 94% rename from assets/scripts/app/templates/caches.hbs rename to app/templates/caches.hbs index 9f11b2ad..a8efb9e1 100644 --- a/assets/scripts/app/templates/caches.hbs +++ b/app/templates/caches.hbs @@ -13,7 +13,7 @@

    - {{#each cache in caches itemController="cacheItem"}} + {{#each cache in caches itemController="cachesItem"}}
  • Slug: {{cache.slug}}, Last modified: {{cache.last_modified}}, diff --git a/assets/scripts/app/templates/components/travis-switch.hbs b/app/templates/components/travis-switch.hbs similarity index 100% rename from assets/scripts/app/templates/components/travis-switch.hbs rename to app/templates/components/travis-switch.hbs diff --git a/assets/scripts/app/templates/application.hbs b/app/templates/dashboard.hbs similarity index 100% rename from assets/scripts/app/templates/application.hbs rename to app/templates/dashboard.hbs diff --git a/app/templates/dashboard/loading.hbs b/app/templates/dashboard/loading.hbs new file mode 100644 index 00000000..7a59046c --- /dev/null +++ b/app/templates/dashboard/loading.hbs @@ -0,0 +1,12 @@ +
    +
    +
    +
    +
    +
    + {{!--
    +

    Hold tight.
    + We're consulting the internet.

    +
    --}} +
    +
    diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs new file mode 100644 index 00000000..f28712ac --- /dev/null +++ b/app/templates/dashboard/repositories.hbs @@ -0,0 +1,61 @@ + + +
    +
    + {{#each repo in filteredRepositories}} +
    +
    +
    +
    +
    +

    {{repo.owner.login}}

    +

    {{#link-to "repo" repo.owner.login repo.name}}{{repo.name}}{{/link-to}}

    +
    {{format-duration repo.last_build.duration}}
    +
    {{format-time repo.last_build.finished_at}}
    +

    + {{#link-to "build" repo.owner.login repo.name repo.last_build.id}} + #{{repo.last_build.number}} {{repo.last_build.state}} + {{/link-to}} +

    +
    +
    +
    +
    +
    + {{/each}} +
    +
    diff --git a/app/templates/env-vars.hbs b/app/templates/env-vars.hbs new file mode 100644 index 00000000..152ebe68 --- /dev/null +++ b/app/templates/env-vars.hbs @@ -0,0 +1,20 @@ +{{outlet}} + +
      + {{#each vars itemController="envVar"}} + {{#unless isNew}} +
    • + {{#if isEditing}} + {{partial 'env_vars/form'}} + {{else}} + Edit + + Delete + + {{name}} + {{value}} + {{/if}} +
      • + {{/unless}} + {{/each}} +
    diff --git a/assets/scripts/app/templates/env_vars/_form.hbs b/app/templates/env-vars/_form.hbs similarity index 96% rename from assets/scripts/app/templates/env_vars/_form.hbs rename to app/templates/env-vars/_form.hbs index 3042cd7c..646a6df0 100644 --- a/assets/scripts/app/templates/env_vars/_form.hbs +++ b/app/templates/env-vars/_form.hbs @@ -12,7 +12,7 @@ {{else}} {{value}} {{/if}} -
    +
    {{travis-switch active=public class="value"}} {{#label for="secure" class="public"}}Display value in build logs{{/label}} diff --git a/assets/scripts/app/templates/env_vars/index.hbs b/app/templates/env-vars/index.hbs similarity index 100% rename from assets/scripts/app/templates/env_vars/index.hbs rename to app/templates/env-vars/index.hbs diff --git a/assets/scripts/app/templates/env_vars/new.hbs b/app/templates/env-vars/new.hbs similarity index 100% rename from assets/scripts/app/templates/env_vars/new.hbs rename to app/templates/env-vars/new.hbs diff --git a/app/templates/error404.hbs b/app/templates/error404.hbs new file mode 100644 index 00000000..d408249b --- /dev/null +++ b/app/templates/error404.hbs @@ -0,0 +1,10 @@ +
    +
    +
    +
    +
    +
    +
    +

    404: Something's Missing

    +

    We're sorry! It seems like this page cannot be found.

    +
    diff --git a/assets/scripts/app/templates/events/list.hbs b/app/templates/events/list.hbs similarity index 86% rename from assets/scripts/app/templates/events/list.hbs rename to app/templates/events/list.hbs index bc29f881..eaf24b0a 100644 --- a/assets/scripts/app/templates/events/list.hbs +++ b/app/templates/events/list.hbs @@ -11,9 +11,9 @@ {{#each event in view.events}} - {{#view Travis.EventsItemView contextBinding="event"}} + {{#view "events-item" contextBinding="event"}} - {{formatTime createdAt}} + {{format-time createdAt}} {{event.event_}} diff --git a/assets/scripts/app/templates/first_sync.hbs b/app/templates/first-sync.hbs similarity index 100% rename from assets/scripts/app/templates/first_sync.hbs rename to app/templates/first-sync.hbs diff --git a/assets/scripts/app/templates/no_owned_repos.hbs b/app/templates/getting-started.hbs similarity index 100% rename from assets/scripts/app/templates/no_owned_repos.hbs rename to app/templates/getting-started.hbs diff --git a/app/templates/helpers/label.hbs b/app/templates/helpers/label.hbs new file mode 100644 index 00000000..411baadd --- /dev/null +++ b/app/templates/helpers/label.hbs @@ -0,0 +1 @@ +{{view.content}} diff --git a/app/templates/helpers/travis-errors.hbs b/app/templates/helpers/travis-errors.hbs new file mode 100644 index 00000000..1f8c68c6 --- /dev/null +++ b/app/templates/helpers/travis-errors.hbs @@ -0,0 +1 @@ +{{#each error in view.errors}}{{error.message}}{{/each}} diff --git a/assets/scripts/app/templates/insufficient_oauth_permissions.hbs b/app/templates/insufficient-oauth-permissions.hbs similarity index 100% rename from assets/scripts/app/templates/insufficient_oauth_permissions.hbs rename to app/templates/insufficient-oauth-permissions.hbs diff --git a/assets/scripts/app/templates/jobs/show.hbs b/app/templates/job.hbs similarity index 84% rename from assets/scripts/app/templates/jobs/show.hbs rename to app/templates/job.hbs index 9dfdfd01..c77b5179 100644 --- a/assets/scripts/app/templates/jobs/show.hbs +++ b/app/templates/job.hbs @@ -11,11 +11,11 @@
    - {{#if job.isFinished}}ran{{else}}running{{/if}} for {{formatDuration job.duration}} + {{#if job.isFinished}}ran{{else}}running{{/if}} for {{format-duration job.duration}}
    - {{formatTime job.finishedAt}} + {{format-time job.finishedAt}}
    {{#if job.tagName}} @@ -25,14 +25,14 @@ {{/if}}
    -
    Commit {{formatSha job.commit.sha}}
    +
    Commit {{format-sha job.commit.sha}}
    {{#if job.build.pullRequest}}
    #{{job.build.pullRequestNumber}}: {{job.build.pullRequestTitle}}
    {{else}} {{#if job.build.commit.compareUrl}} -
    Compare {{shortCompareShas job.build.commit.compareUrl}}
    +
    Compare {{short-compare-shas job.build.commit.compareUrl}}
    {{/if}} {{/if}}
    @@ -43,10 +43,10 @@
- - {{formatMessage job.commit.subject repoBinding=job.repo}} + - {{format-message job.commit.subject repoBinding=job.repo}}
- 
{{formatMessage job.commit.body repoBinding=job.repo pre=true}}
+ 
{{format-message job.commit.body repoBinding=job.repo pre=true}}
diff --git a/assets/scripts/app/templates/jobs/list.hbs b/app/templates/jobs.hbs similarity index 95% rename from assets/scripts/app/templates/jobs/list.hbs rename to app/templates/jobs.hbs index c9aee3f9..adc08d93 100644 --- a/assets/scripts/app/templates/jobs/list.hbs +++ b/app/templates/jobs.hbs @@ -30,10 +30,10 @@ {{/if}} - {{formatDuration duration}} + {{format-duration duration}} - {{formatTime finishedAt}} + {{format-time finishedAt}} {{#each value in configValues}} {{value}} diff --git a/assets/scripts/app/templates/jobs/log.hbs b/app/templates/jobs/log.hbs similarity index 100% rename from assets/scripts/app/templates/jobs/log.hbs rename to app/templates/jobs/log.hbs diff --git a/assets/scripts/app/templates/jobs/pre.hbs b/app/templates/jobs/pre.hbs similarity index 88% rename from assets/scripts/app/templates/jobs/pre.hbs rename to app/templates/jobs/pre.hbs index 76aafb56..c8793760 100644 --- a/assets/scripts/app/templates/jobs/pre.hbs +++ b/app/templates/jobs/pre.hbs @@ -12,7 +12,7 @@ 

 
-  To Top
+  Top
 
   {{#if view.limited}}
     

diff --git a/app/templates/layouts/dashboard.hbs b/app/templates/layouts/dashboard.hbs
new file mode 100644
index 00000000..34a3685d
--- /dev/null
+++ b/app/templates/layouts/dashboard.hbs
@@ -0,0 +1,82 @@
+

+  

+    

+      

+        
+        
    
+          
  • Docs
    • 
+          
  • Blog
    • 
+        
+          
  • 
+            
    
+              {{#if auth.signedOut}}
+                Sign in with GitHub
+              {{/if}}
+              {{#if auth.signedIn}}
+                {{#link-to "profile" class="signed-in"}}{{auth.userName}}{{/link-to}}
+              {{/if}}
+              {{#if auth.signingIn}}
+                Signing In
+              {{/if}}
+            
    
+            
+          
    • 
+        

+      

+    

+
+    {{yield}}
+
+  

+
+  
+

diff --git a/app/templates/layouts/error.hbs b/app/templates/layouts/error.hbs
new file mode 100644
index 00000000..d4401b49
--- /dev/null
+++ b/app/templates/layouts/error.hbs
@@ -0,0 +1,38 @@
+

+  

+    
+    

+      
+    

+    
    
+      
  • Blog
    • 
+      
  • Status
    • 
+    
+      
  • 
+        
    
+          {{#if auth.signedOut}}
+            Sign in with GitHub
+          {{/if}}
+          {{#if auth.signedIn}}
+            {{#link-to "profile" class="signed-in"}}{{auth.userName}}{{/link-to}}
+          {{/if}}
+          {{#if auth.signingIn}}
+            Signing In
+          {{/if}}
+        
    
+        
+      
    • 
+    

+  

+

+
+

+  {{yield}}
+

diff --git a/assets/scripts/app/templates/layouts/flash.hbs b/app/templates/layouts/flash.hbs
similarity index 72%
rename from assets/scripts/app/templates/layouts/flash.hbs
rename to app/templates/layouts/flash.hbs
index 193d0d8c..635ad6a1 100644
--- a/assets/scripts/app/templates/layouts/flash.hbs
+++ b/app/templates/layouts/flash.hbs
@@ -1,5 +1,5 @@
 {{#each flash in controller}}
-  {{#view Travis.FlashItemView flashBinding="flash"}}
+  {{#view "flash-item" flashBinding="flash"}}
     
{{{flash.message}}}

     
   {{/view}}
diff --git a/app/templates/layouts/home.hbs b/app/templates/layouts/home.hbs
new file mode 100644
index 00000000..b2977b03
--- /dev/null
+++ b/app/templates/layouts/home.hbs
@@ -0,0 +1,23 @@
+

+  
+  

+    {{render "top"}}
+  

+
+  

+    

+      {{render "flash"}}
+      {{yield}}
+    

+    {{#if config.pro}}
+      
+    {{/if}}
+  

+
+  
+
+

diff --git a/app/templates/layouts/profile.hbs b/app/templates/layouts/profile.hbs
new file mode 100644
index 00000000..8aa1ac64
--- /dev/null
+++ b/app/templates/layouts/profile.hbs
@@ -0,0 +1,37 @@
+

+  

+    {{render "top"}}
+  

+
+  

+    

+      {{render "flash"}}
+      {{yield}}
+    

+
+    
+  

+
+  
+
+

diff --git a/assets/scripts/app/templates/layouts/simple.hbs b/app/templates/layouts/simple.hbs
similarity index 100%
rename from assets/scripts/app/templates/layouts/simple.hbs
rename to app/templates/layouts/simple.hbs
diff --git a/assets/scripts/app/templates/layouts/support.hbs b/app/templates/layouts/support.hbs
similarity index 91%
rename from assets/scripts/app/templates/layouts/support.hbs
rename to app/templates/layouts/support.hbs
index fe2557ab..e7ec03aa 100644
--- a/assets/scripts/app/templates/layouts/support.hbs
+++ b/app/templates/layouts/support.hbs
@@ -1,7 +1,7 @@
 

   
How can we help?

   
    
-    {{#if config.billing_endpoint}}
+    {{#if config.billingEndpoint}}
       
  • Support Ticket
    • 
     {{/if}}
     
  • Live Chat
    • 
diff --git a/assets/scripts/app/templates/main/loading.hbs b/app/templates/loading.hbs
similarity index 100%
rename from assets/scripts/app/templates/main/loading.hbs
rename to app/templates/loading.hbs
diff --git a/assets/scripts/app/templates/main.hbs b/app/templates/main.hbs
similarity index 100%
rename from assets/scripts/app/templates/main.hbs
rename to app/templates/main.hbs
diff --git a/assets/scripts/app/templates/main/error.hbs b/app/templates/main/error.hbs
similarity index 100%
rename from assets/scripts/app/templates/main/error.hbs
rename to app/templates/main/error.hbs
diff --git a/assets/scripts/app/templates/profile/loading.hbs b/app/templates/main/loading.hbs
similarity index 100%
rename from assets/scripts/app/templates/profile/loading.hbs
rename to app/templates/main/loading.hbs
diff --git a/app/templates/maintenance.hbs b/app/templates/maintenance.hbs
new file mode 100644
index 00000000..957b4ab8
--- /dev/null
+++ b/app/templates/maintenance.hbs
@@ -0,0 +1,11 @@
+
    
+  
    
+  
    
+  
    
+  
    
+
    
+
    
+
    
+  
    Under Maintenance
    
+  
    Stay up to date with Travis CI by following us 
    
+
    
diff --git a/assets/scripts/app/templates/not_found.hbs b/app/templates/not-found.hbs
similarity index 100%
rename from assets/scripts/app/templates/not_found.hbs
rename to app/templates/not-found.hbs
diff --git a/assets/scripts/app/templates/pro/repos/show/empty.hbs b/app/templates/pro/repos/show/empty.hbs
similarity index 100%
rename from assets/scripts/app/templates/pro/repos/show/empty.hbs
rename to app/templates/pro/repos/show/empty.hbs
diff --git a/assets/scripts/app/templates/profile.hbs b/app/templates/profile.hbs
similarity index 100%
rename from assets/scripts/app/templates/profile.hbs
rename to app/templates/profile.hbs
diff --git a/assets/scripts/app/templates/profile/accounts.hbs b/app/templates/profile/accounts.hbs
similarity index 87%
rename from assets/scripts/app/templates/profile/accounts.hbs
rename to app/templates/profile/accounts.hbs
index 3a02f44f..89b547b5 100644
--- a/assets/scripts/app/templates/profile/accounts.hbs
+++ b/app/templates/profile/accounts.hbs
@@ -8,7 +8,7 @@
 

 
 

-  {{#collection Travis.AccountsListView contentBinding="controller"}}
+  {{#collection "accounts-list" contentBinding="controller"}}
     {{#link-to "account" view.account class="name"}}{{view.name}}{{/link-to}}
     

       Repositories:
diff --git a/assets/scripts/app/templates/repo/loading.hbs b/app/templates/profile/loading.hbs
similarity index 100%
rename from assets/scripts/app/templates/repo/loading.hbs
rename to app/templates/profile/loading.hbs
diff --git a/assets/scripts/app/templates/profile/repo.hbs b/app/templates/profile/repo.hbs
similarity index 100%
rename from assets/scripts/app/templates/profile/repo.hbs
rename to app/templates/profile/repo.hbs
diff --git a/assets/scripts/app/templates/profile/show.hbs b/app/templates/profile/show.hbs
similarity index 88%
rename from assets/scripts/app/templates/profile/show.hbs
rename to app/templates/profile/show.hbs
index e90482ad..b243e92f 100644
--- a/assets/scripts/app/templates/profile/show.hbs
+++ b/app/templates/profile/show.hbs
@@ -1,6 +1,6 @@
 
{{view.name}}

 
-{{#if config.billing_endpoint}}
+{{#if config.billingEndpoint}}
   {{#if view.subscribed}}
     
       Subscription active!
@@ -18,7 +18,7 @@
   {{/if}}
 {{/if}}
 
-{{view Travis.ProfileTabsView}}
+{{view 'profile-tabs'}}
 
 

   {{outlet}}
diff --git a/assets/scripts/app/templates/profile/tabs.hbs b/app/templates/profile/tabs.hbs
similarity index 93%
rename from assets/scripts/app/templates/profile/tabs.hbs
rename to app/templates/profile/tabs.hbs
index cc1feea6..38c2a174 100644
--- a/assets/scripts/app/templates/profile/tabs.hbs
+++ b/app/templates/profile/tabs.hbs
@@ -11,7 +11,7 @@
       
     
   {{/if}}
-  {{#if config.billing_endpoint}}
+  {{#if config.billingEndpoint}}
     
  • 
       
    
         Billing
diff --git a/assets/scripts/app/templates/profile/tabs/user.hbs b/app/templates/profile/tabs/user.hbs
similarity index 100%
rename from assets/scripts/app/templates/profile/tabs/user.hbs
rename to app/templates/profile/tabs/user.hbs
diff --git a/assets/scripts/app/templates/queues/show.hbs b/app/templates/queue.hbs
similarity index 75%
rename from assets/scripts/app/templates/queues/show.hbs
rename to app/templates/queue.hbs
index f4e47aa9..7229b182 100644
--- a/assets/scripts/app/templates/queues/show.hbs
+++ b/app/templates/queue.hbs
@@ -1,10 +1,10 @@
 
      
   
    • 
-    
      Queue ({{controller.length}})
      
+    
      Queue ({{length}})
      
     
        
-      {{#if controller.length}}
+      {{#if length}}
         {{#each job in controller}}
-          {{#view Travis.QueueItemView jobBinding="job"}}
+          
      • 
             {{#if job.repo.slug}}
               {{#link-to "job" job.repo job}}
                 
@@ -13,7 +13,7 @@
                 #{{job.number}}
               {{/link-to}}
             {{/if}}
-          {{/view}}
+          
        • 
         {{/each}}
       {{else}}
         There are no jobs
diff --git a/assets/scripts/app/templates/remove_log.hbs b/app/templates/remove-log.hbs
similarity index 100%
rename from assets/scripts/app/templates/remove_log.hbs
rename to app/templates/remove-log.hbs
diff --git a/assets/scripts/app/templates/repos/show.hbs b/app/templates/repo.hbs
similarity index 93%
rename from assets/scripts/app/templates/repos/show.hbs
rename to app/templates/repo.hbs
index 0be0cf77..537ae360 100644
--- a/assets/scripts/app/templates/repos/show.hbs
+++ b/app/templates/repo.hbs
@@ -1,6 +1,6 @@
 
        
   {{#if view.isEmpty}}
-    {{view Travis.ReposEmptyView}}
+    {{view 'repos-empty'}}
   {{else}}
     {{#if repo.isLoaded}}
       
        
@@ -17,10 +17,10 @@
 
       
        {{description}}
        
 
-      {{view 'repo-show-tabs'}}
       {{view 'repo-actions'}}
+      {{view 'repo-show-tabs'}}
 
-      
        
+      
        
         {{outlet}}
       
        
     {{else}}
diff --git a/assets/scripts/app/templates/settings/loading.hbs b/app/templates/repo/loading.hbs
similarity index 100%
rename from assets/scripts/app/templates/settings/loading.hbs
rename to app/templates/repo/loading.hbs
diff --git a/app/templates/repos-list/empty.hbs b/app/templates/repos-list/empty.hbs
new file mode 100644
index 00000000..0277cf2e
--- /dev/null
+++ b/app/templates/repos-list/empty.hbs
@@ -0,0 +1 @@
+
        Loading
        
diff --git a/assets/scripts/app/templates/repos/list.hbs b/app/templates/repos.hbs
similarity index 82%
rename from assets/scripts/app/templates/repos/list.hbs
rename to app/templates/repos.hbs
index 574414ba..2988d1cc 100644
--- a/assets/scripts/app/templates/repos/list.hbs
+++ b/app/templates/repos.hbs
@@ -16,8 +16,10 @@
         
        
         {{#with repo.lastBuildHash as lastBuild}}
           {{#if repo.slug}}
-            {{#link-to "build" repo lastBuild.id
-            class="last_build"}}{{lastBuild.number}}{{/link-to}}
+            {{#if lastBuild.id}}
+              {{#link-to "build" repo lastBuild.id
+                 class="last_build"}}{{lastBuild.number}}{{/link-to}}
+             {{/if}}
           {{/if}}
         {{/with}}
 
@@ -25,13 +27,13 @@
         
        
           Duration:
           
-            {{formatDuration repo.lastBuildDuration}}
+            {{format-duration repo.lastBuildDuration}}
           
         
        
         
        
           Finished:
           
-            {{formatTime repo.lastBuildFinishedAt}}
+            {{format-time repo.lastBuildFinishedAt}}
           
         
        
         {{/if}}
diff --git a/assets/scripts/app/templates/repos/list/tabs.hbs b/app/templates/repos/list/tabs.hbs
similarity index 100%
rename from assets/scripts/app/templates/repos/list/tabs.hbs
rename to app/templates/repos/list/tabs.hbs
diff --git a/assets/scripts/app/templates/repos/show/actions.hbs b/app/templates/repos/show/actions.hbs
similarity index 95%
rename from assets/scripts/app/templates/repos/show/actions.hbs
rename to app/templates/repos/show/actions.hbs
index 504d70c2..c262912b 100644
--- a/assets/scripts/app/templates/repos/show/actions.hbs
+++ b/app/templates/repos/show/actions.hbs
@@ -44,8 +44,7 @@
     {{#if view.jobIdForLog}}
       {{#if view.displayRemoveLog}}
         
      • 
-          
+          
         
        • 
       {{/if}}
     {{/if}}
diff --git a/assets/scripts/app/templates/repos/show/tabs.hbs b/app/templates/repos/show/tabs.hbs
similarity index 98%
rename from assets/scripts/app/templates/repos/show/tabs.hbs
rename to app/templates/repos/show/tabs.hbs
index 8b8174b8..7c9e17fb 100644
--- a/assets/scripts/app/templates/repos/show/tabs.hbs
+++ b/app/templates/repos/show/tabs.hbs
@@ -1,4 +1,4 @@
-
          
+
            
   
          • 
     
            
       {{#if repo.slug}}
diff --git a/assets/scripts/app/templates/repos/show/tools.hbs b/app/templates/repos/show/tools.hbs
similarity index 96%
rename from assets/scripts/app/templates/repos/show/tools.hbs
rename to app/templates/repos/show/tools.hbs
index 26d351e8..87f897f4 100644
--- a/assets/scripts/app/templates/repos/show/tools.hbs
+++ b/app/templates/repos/show/tools.hbs
@@ -10,7 +10,7 @@
     
          • 
       {{#link-to "requests" view.repo}}Requests{{/link-to}}
     
            • 
-    {{#if config.caches_enabled}}
+    {{#if view.displayCachesLink}}
       
          • 
         {{#link-to "caches" view.repo}}Caches{{/link-to}}
       
            • 
@@ -56,7 +56,7 @@
   
            
     Integrating Code Climate's test coverage reporting with your test
     suite on Travis CI allows to track changes in coverage over time. If you haven't tried it out already, sign
+    {{bind-attr href=config.codeClimateUrl}}" target="_blank">sign
     up today to improve your code's quality. New customers get 20% off for the first three months!
   
            
 
diff --git a/assets/scripts/app/templates/request.hbs b/app/templates/request.hbs
similarity index 87%
rename from assets/scripts/app/templates/request.hbs
rename to app/templates/request.hbs
index 82264dcc..0f556e01 100644
--- a/assets/scripts/app/templates/request.hbs
+++ b/app/templates/request.hbs
@@ -7,7 +7,7 @@
       #{{pullRequestNumber}}
       pull request.
     {{else}}
-      This request is based on a commit {{formatCommit commit}} by {{commit.authorName}}
+      This request is based on a commit {{format-commit commit}} by {{commit.authorName}}
       pushed to
       {{#if branchName}}
         to {{branchName}}
diff --git a/assets/scripts/app/templates/requests.hbs b/app/templates/requests.hbs
similarity index 83%
rename from assets/scripts/app/templates/requests.hbs
rename to app/templates/requests.hbs
index 7ce6cfcb..5d9c7e9f 100644
--- a/assets/scripts/app/templates/requests.hbs
+++ b/app/templates/requests.hbs
@@ -25,7 +25,7 @@
           
           {{id}}
         
-        {{githubCommitLink repo.slug commit.sha}}
+        {{github-commit-link repo.slug commit.sha}}
         
           {{#if build}}
             {{#link-to "build" build}}#{{build.number}}{{/link-to}}
@@ -33,7 +33,7 @@
             -
           {{/if}}
         
-        {{{formatMessage commit.message short="true" repoBinding=build.repo}}}
+        {{{format-message commit.message short="true" repoBinding=build.repo}}}
         {{type}}
         {{message}}
       
diff --git a/assets/scripts/app/templates/jobs.hbs b/app/templates/running-jobs.hbs
similarity index 100%
rename from assets/scripts/app/templates/jobs.hbs
rename to app/templates/running-jobs.hbs
diff --git a/assets/scripts/app/templates/settings.hbs b/app/templates/settings.hbs
similarity index 88%
rename from assets/scripts/app/templates/settings.hbs
rename to app/templates/settings.hbs
index ec0f6259..ad5a438d 100644
--- a/assets/scripts/app/templates/settings.hbs
+++ b/app/templates/settings.hbs
@@ -1,7 +1,8 @@
 
              
   
            • {{#link-to "settings.index"}}General Settings{{/link-to}}
              • 
   
            • {{#link-to "env_vars"}}Environment Variables{{/link-to}}
              • 
-  {{#if config.ssh_key_enabled}}
+
+  {{#if config.endpoints.sshKey}}
     
            • {{#link-to "ssh_key"}}SSH Key{{/link-to}}
              • 
   {{/if}}
 
            
diff --git a/assets/scripts/app/templates/settings/index.hbs b/app/templates/settings/index.hbs
similarity index 100%
rename from assets/scripts/app/templates/settings/index.hbs
rename to app/templates/settings/index.hbs
diff --git a/app/templates/settings/loading.hbs b/app/templates/settings/loading.hbs
new file mode 100644
index 00000000..0277cf2e
--- /dev/null
+++ b/app/templates/settings/loading.hbs
@@ -0,0 +1 @@
+
            Loading
            
diff --git a/app/templates/show-more-button.hbs b/app/templates/show-more-button.hbs
new file mode 100644
index 00000000..ac193f34
--- /dev/null
+++ b/app/templates/show-more-button.hbs
@@ -0,0 +1 @@
+{{view.label}}
diff --git a/assets/scripts/app/templates/layouts/sidebar.hbs b/app/templates/sidebar.hbs
similarity index 74%
rename from assets/scripts/app/templates/layouts/sidebar.hbs
rename to app/templates/sidebar.hbs
index a3578949..1eafabb1 100644
--- a/assets/scripts/app/templates/layouts/sidebar.hbs
+++ b/app/templates/sidebar.hbs
@@ -1,4 +1,4 @@
-
            
+
            
   
             
 
            
 
@@ -16,4 +16,4 @@
 
 {{render "runningJobs"}}
 
-{{view Travis.QueueView}}
+{{render "queue"}}
diff --git a/assets/scripts/app/templates/ssh_key.hbs b/app/templates/ssh-key.hbs
similarity index 100%
rename from assets/scripts/app/templates/ssh_key.hbs
rename to app/templates/ssh-key.hbs
diff --git a/assets/scripts/app/templates/ssh_key/_form.hbs b/app/templates/ssh-key/_form.hbs
similarity index 100%
rename from assets/scripts/app/templates/ssh_key/_form.hbs
rename to app/templates/ssh-key/_form.hbs
diff --git a/assets/scripts/app/templates/stats/show.hbs b/app/templates/stats/show.hbs
similarity index 100%
rename from assets/scripts/app/templates/stats/show.hbs
rename to app/templates/stats/show.hbs
diff --git a/assets/scripts/app/templates/status_images.hbs b/app/templates/status-images.hbs
similarity index 84%
rename from assets/scripts/app/templates/status_images.hbs
rename to app/templates/status-images.hbs
index 677e2ca3..4c30aacd 100644
--- a/assets/scripts/app/templates/status_images.hbs
+++ b/app/templates/status-images.hbs
@@ -10,5 +10,5 @@
 
 
            
   
-  {{view Travis.StatusImageInput valueBinding="view.statusString" class="url" rows=3}}
+  {{view 'status-image-input' valueBinding="view.statusString" class="url" rows=3}}
 
            
diff --git a/assets/scripts/app/templates/layouts/top.hbs b/app/templates/top.hbs
similarity index 87%
rename from assets/scripts/app/templates/layouts/top.hbs
rename to app/templates/top.hbs
index eb7462d8..dcd73aa1 100644
--- a/assets/scripts/app/templates/layouts/top.hbs
+++ b/app/templates/top.hbs
@@ -1,10 +1,14 @@
 {{#link-to "main"}}
-  
            
+  
 {{/link-to}}
 
-
            ',
+    DEFAULTS = {
+      text: '',
+      submit: 'Send feedback',
+      cancel: 'cancel',
+      your_email: 'Your email address:',
+      your_comment: 'Your message:',
+      feedback_sending: 'Sending...',
+      feedback_sent: 'Your feedback was sent!
            We will get back to you as soon as possible!',
+      feedback_error: 'There was a problem sending your message.
            Please contact support directly.

            close this message'
+    };
+
+  function vendored(property, value){
+    var string = '';
+    for(var i=0;i= 0; ix = _i += -1) {
+      if (this.items[ix].key < item.key) {
+        return ix + 1;
+      }
+    }
+  },
+  indexOf: function() {
+    return this.items.indexOf.apply(this.items, arguments);
+  },
+  slice: function() {
+    return this.items.slice.apply(this.items, arguments);
+  },
+  each: function(func) {
+    return this.items.slice().forEach(func);
+  },
+  map: function(func) {
+    return this.items.map(func);
+  }
+});
+
+Object.defineProperty(Log.Nodes.prototype, 'first', {
+  get: function() {
+    return this.items[0];
+  }
+});
+
+Object.defineProperty(Log.Nodes.prototype, 'last', {
+  get: function() {
+    return this.items[this.length - 1];
+  }
+});
+
+Object.defineProperty(Log.Nodes.prototype, 'length', {
+  get: function() {
+    return this.items.length;
+  }
+});
+
+Log.Part = function(id, num, string) {
+  Log.Node.apply(this, arguments);
+  this.string = string || '';
+  this.string = this.string.replace(/\033\[1000D/gm, '\r');
+  this.string = this.string.replace(/\r+\n/gm, '\n');
+  this.strings = this.string.split(/^/gm) || [];
+  this.slices = ((function() {
+    var _results;
+    _results = [];
+    while (this.strings.length > 0) {
+      _results.push(this.strings.splice(0, Log.SLICE));
+    }
+    return _results;
+  }).call(this));
+  return this;
+};
+
+Log.extend(Log.Part, {
+  create: function(log, num, string) {
+    var part;
+    part = new Log.Part(num.toString(), num, string);
+    log.addChild(part);
+    return part.process(0, -1);
+  }
+});
+
+Log.Part.prototype = Log.extend(new Log.Node, {
+  remove: function() {},
+  process: function(slice, num) {
+    var node, span, spans, string, _i, _j, _len, _len1, _ref, _ref1, _ref2, _ref3, _ref4,
+      _this = this;
+    _ref = this.slices[slice] || [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      string = _ref[_i];
+      if ((_ref1 = this.log.limit) != null ? _ref1.limited : void 0) {
+        return;
+      }
+      spans = [];
+      _ref2 = Log.Deansi.apply(string);
+      for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
+        node = _ref2[_j];
+        span = Log.Span.create(this, "" + this.id + "-" + (num += 1), num, node.text, node["class"]);
+        span.render();
+        spans.push(span);
+      }
+      if ((_ref3 = spans[0]) != null ? (_ref4 = _ref3.line) != null ? _ref4.cr : void 0 : void 0) {
+        spans[0].line.clear();
+      }
+    }
+    if (!(slice >= this.slices.length - 1)) {
+      return setTimeout((function() {
+        return _this.process(slice + 1, num);
+      }), Log.TIMEOUT);
+    }
+  }
+});
+
+newLineAtTheEndRegexp = new RegExp("\n$");
+
+newLineRegexp = new RegExp("\n");
+
+rRegexp = new RegExp("\r");
+
+removeCarriageReturns = function(string) {
+  var index;
+  index = string.lastIndexOf("\r");
+  if (index === -1) {
+    return string;
+  }
+  return string.substr(index + 1);
+};
+
+Log.Span = function(id, num, text, classes) {
+  var fold, time, _ref;
+  Log.Node.apply(this, arguments);
+  if (fold = text.match(Log.FOLD)) {
+    this.fold = true;
+    this.event = fold[1];
+    this.text = this.name = fold[2];
+  } else if (time = text.match(Log.TIME)) {
+    this.time = true;
+    this.event = time[1];
+    this.name = time[2];
+    this.stats = time[3];
+  } else {
+    this.text = text;
+    this.text = removeCarriageReturns(this.text);
+    this.text = this.text.replace(newLineAtTheEndRegexp, '');
+    this.nl = !!((_ref = text[text.length - 1]) != null ? _ref.match(newLineRegexp) : void 0);
+    this.cr = !!text.match(rRegexp);
+    this["class"] = this.cr && ['clears'] || classes;
+  }
+  return this;
+};
+
+Log.extend(Log.Span, {
+  create: function(parent, id, num, text, classes) {
+    var span;
+    span = new Log.Span(id, num, text, classes);
+    parent.addChild(span);
+    return span;
+  },
+  render: function(parent, id, num, text, classes) {
+    var span;
+    span = this.create(parent, id, num, text, classes);
+    return span.render();
+  }
+});
+
+Log.Span.prototype = Log.extend(new Log.Node, {
+  render: function() {
+    var tail;
+    if (this.time && this.event === 'end' && this.prev) {
+      if (Log.DEBUG) {
+        console.log("S.0 insert " + this.id + " after prev " + this.prev.id);
+      }
+      this.nl = this.prev.nl;
+      this.log.insert(this.data, {
+        after: this.prev.element
+      });
+      this.line = this.prev.line;
+    } else if (!this.fold && this.prev && !this.prev.fold && !this.prev.nl) {
+      if (Log.DEBUG) {
+        console.log("S.1 insert " + this.id + " after prev " + this.prev.id);
+      }
+      this.log.insert(this.data, {
+        after: this.prev.element
+      });
+      this.line = this.prev.line;
+    } else if (!this.fold && this.next && !this.next.fold && !this.next.time) {
+      if (Log.DEBUG) {
+        console.log("S.2 insert " + this.id + " before next " + this.next.id);
+      }
+      this.log.insert(this.data, {
+        before: this.next.element
+      });
+      this.line = this.next.line;
+    } else {
+      this.line = Log.Line.create(this.log, [this]);
+      this.line.render();
+    }
+    if (this.nl && (tail = this.tail).length > 0) {
+      this.split(tail);
+    }
+    if (this.time) {
+      return this.log.times.add(this);
+    }
+  },
+  remove: function() {
+    Log.Node.prototype.remove.apply(this);
+    if (this.line) {
+      return this.line.remove(this);
+    }
+  },
+  split: function(spans) {
+    var line, span, _i, _len;
+    if (Log.DEBUG) {
+      console.log("S.4 split [" + (spans.map(function(span) {
+        return span.id;
+      }).join(', ')) + "]");
+    }
+    for (_i = 0, _len = spans.length; _i < _len; _i++) {
+      span = spans[_i];
+      this.log.remove(span.element);
+    }
+    line = Log.Line.create(this.log, spans);
+    line.render();
+    if (line.cr) {
+      return line.clear();
+    }
+  },
+  clear: function() {
+    if (this.prev && this.isSibling(this.prev) && this.isSequence(this.prev)) {
+      this.prev.clear();
+      return this.prev.remove();
+    }
+  },
+  isSequence: function(other) {
+    return this.parent.num - other.parent.num === this.log.children.indexOf(this.parent) - this.log.children.indexOf(other.parent);
+  },
+  isSibling: function(other) {
+    var _ref, _ref1;
+    return ((_ref = this.element) != null ? _ref.parentNode : void 0) === ((_ref1 = other.element) != null ? _ref1.parentNode : void 0);
+  },
+  siblings: function(type) {
+    var siblings, span;
+    siblings = [];
+    while ((span = (span || this)[type]) && this.isSibling(span)) {
+      siblings.push(span);
+    }
+    return siblings;
+  }
+});
+
+Object.defineProperty(Log.Span.prototype, 'data', {
+  get: function() {
+    return {
+      id: this.id,
+      type: 'span',
+      text: this.text,
+      "class": this["class"],
+      time: this.time
+    };
+  }
+});
+
+Object.defineProperty(Log.Span.prototype, 'line', {
+  get: function() {
+    return this._line;
+  },
+  set: function(line) {
+    if (this.line) {
+      this.line.remove(this);
+    }
+    this._line = line;
+    if (this.line) {
+      return this.line.add(this);
+    }
+  }
+});
+
+Object.defineProperty(Log.Span.prototype, 'element', {
+  get: function() {
+    return document.getElementById(this.id);
+  }
+});
+
+Object.defineProperty(Log.Span.prototype, 'head', {
+  get: function() {
+    return this.siblings('prev').reverse();
+  }
+});
+
+Object.defineProperty(Log.Span.prototype, 'tail', {
+  get: function() {
+    return this.siblings('next');
+  }
+});
+
+Log.Line = function(log) {
+  this.log = log;
+  this.spans = [];
+  return this;
+};
+
+Log.extend(Log.Line, {
+  create: function(log, spans) {
+    var line, span, _i, _len;
+    if ((span = spans[0]) && span.fold) {
+      line = new Log.Fold(log, span.event, span.name);
+    } else {
+      line = new Log.Line(log);
+    }
+    for (_i = 0, _len = spans.length; _i < _len; _i++) {
+      span = spans[_i];
+      span.line = line;
+    }
+    return line;
+  }
+});
+
+Log.extend(Log.Line.prototype, {
+  add: function(span) {
+    var ix;
+    if (span.cr) {
+      this.cr = true;
+    }
+    if (this.spans.indexOf(span) > -1) {
+
+    } else if ((ix = this.spans.indexOf(span.prev)) > -1) {
+      return this.spans.splice(ix + 1, 0, span);
+    } else if ((ix = this.spans.indexOf(span.next)) > -1) {
+      return this.spans.splice(ix, 0, span);
+    } else {
+      return this.spans.push(span);
+    }
+  },
+  remove: function(span) {
+    var ix;
+    if ((ix = this.spans.indexOf(span)) > -1) {
+      return this.spans.splice(ix, 1);
+    }
+  },
+  render: function() {
+    var fold;
+    if ((fold = this.prev) && fold.event === 'start' && fold.active) {
+      if (this.next && !this.next.fold) {
+        if (Log.DEBUG) {
+          console.log("L.0 insert " + this.id + " before next " + this.next.id);
+        }
+        return this.element = this.log.insert(this.data, {
+          before: this.next.element
+        });
+      } else {
+        if (Log.DEBUG) {
+          console.log("L.0 insert " + this.id + " into fold " + fold.id);
+        }
+        fold = this.log.folds.folds[fold.name].fold;
+        return this.element = this.log.insert(this.data, {
+          into: fold
+        });
+      }
+    } else if (this.prev) {
+      if (Log.DEBUG) {
+        console.log("L.1 insert " + this.spans[0].id + " after prev " + this.prev.id);
+      }
+      return this.element = this.log.insert(this.data, {
+        after: this.prev.element
+      });
+    } else if (this.next) {
+      if (Log.DEBUG) {
+        console.log("L.2 insert " + this.spans[0].id + " before next " + this.next.id);
+      }
+      return this.element = this.log.insert(this.data, {
+        before: this.next.element
+      });
+    } else {
+      if (Log.DEBUG) {
+        console.log("L.3 insert " + this.spans[0].id + " into #log");
+      }
+      return this.element = this.log.insert(this.data);
+    }
+  },
+  clear: function() {
+    var cr, _i, _len, _ref, _results;
+    _ref = this.crs;
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      cr = _ref[_i];
+      _results.push(cr.clear());
+    }
+    return _results;
+  }
+});
+
+Object.defineProperty(Log.Line.prototype, 'id', {
+  get: function() {
+    var _ref;
+    return (_ref = this.spans[0]) != null ? _ref.id : void 0;
+  }
+});
+
+Object.defineProperty(Log.Line.prototype, 'data', {
+  get: function() {
+    return {
+      type: 'paragraph',
+      nodes: this.nodes
+    };
+  }
+});
+
+Object.defineProperty(Log.Line.prototype, 'nodes', {
+  get: function() {
+    return this.spans.map(function(span) {
+      return span.data;
+    });
+  }
+});
+
+Object.defineProperty(Log.Line.prototype, 'prev', {
+  get: function() {
+    var _ref;
+    return (_ref = this.spans[0].prev) != null ? _ref.line : void 0;
+  }
+});
+
+Object.defineProperty(Log.Line.prototype, 'next', {
+  get: function() {
+    var _ref;
+    return (_ref = this.spans[this.spans.length - 1].next) != null ? _ref.line : void 0;
+  }
+});
+
+Object.defineProperty(Log.Line.prototype, 'crs', {
+  get: function() {
+    return this.spans.filter(function(span) {
+      return span.cr;
+    });
+  }
+});
+
+Log.Fold = function(log, event, name) {
+  Log.Line.apply(this, arguments);
+  this.fold = true;
+  this.event = event;
+  this.name = name;
+  return this;
+};
+
+Log.Fold.prototype = Log.extend(new Log.Line, {
+  render: function() {
+    var element, _ref;
+    if (this.prev && this.prev.element) {
+      if (Log.DEBUG) {
+        console.log("F.1 insert " + this.id + " after prev " + this.prev.id);
+      }
+      element = this.prev.element;
+      this.element = this.log.insert(this.data, {
+        after: element
+      });
+    } else if (this.next) {
+      if (Log.DEBUG) {
+        console.log("F.2 insert " + this.id + " before next " + this.next.id);
+      }
+      element = this.next.element || this.next.element.parentNode;
+      this.element = this.log.insert(this.data, {
+        before: element
+      });
+    } else {
+      if (Log.DEBUG) {
+        console.log("F.3 insert " + this.id);
+      }
+      this.element = this.log.insert(this.data);
+    }
+    if (this.span.next && ((_ref = this.span.prev) != null ? _ref.isSibling(this.span.next) : void 0)) {
+      this.span.prev.split([this.span.next].concat(this.span.next.tail));
+    }
+    return this.active = this.log.folds.add(this.data);
+  }
+});
+
+Object.defineProperty(Log.Fold.prototype, 'id', {
+  get: function() {
+    return "fold-" + this.event + "-" + this.name;
+  }
+});
+
+Object.defineProperty(Log.Fold.prototype, 'span', {
+  get: function() {
+    return this.spans[0];
+  }
+});
+
+Object.defineProperty(Log.Fold.prototype, 'data', {
+  get: function() {
+    return {
+      type: 'fold',
+      id: this.id,
+      event: this.event,
+      name: this.name
+    };
+  }
+});
+
+Log.prototype = Log.extend(new Log.Node, {
+  set: function(num, string) {
+    if (this.parts[num]) {
+      return console.log("part " + num + " exists");
+    } else {
+      this.parts[num] = true;
+      return Log.Part.create(this, num, string);
+    }
+  },
+  insert: function(data, pos) {
+    this.trigger('insert', data, pos);
+    return this.renderer.insert(data, pos);
+  },
+  remove: function(node) {
+    this.trigger('remove', node);
+    return this.renderer.remove(node);
+  },
+  hide: function(node) {
+    this.trigger('hide', node);
+    return this.renderer.hide(node);
+  },
+  trigger: function() {
+    var args, ix, listener, _i, _len, _ref, _results;
+    args = [this].concat(Array.prototype.slice.apply(arguments));
+    _ref = this.listeners;
+    _results = [];
+    for (ix = _i = 0, _len = _ref.length; _i < _len; ix = ++_i) {
+      listener = _ref[ix];
+      _results.push(listener.notify.apply(listener, args));
+    }
+    return _results;
+  }
+});
+
+Log.Listener = function() {};
+
+Log.extend(Log.Listener.prototype, {
+  notify: function(log, event) {
+    if (this[event]) {
+      return this[event].apply(this, [log].concat(Array.prototype.slice.call(arguments, 2)));
+    }
+  }
+});
+
+Log.Folds = function(log) {
+  this.log = log;
+  this.folds = {};
+  return this;
+};
+
+Log.extend(Log.Folds.prototype, {
+  add: function(data) {
+    var fold, _base, _name;
+    fold = (_base = this.folds)[_name = data.name] || (_base[_name] = new Log.Folds.Fold);
+    fold.receive(data, {
+      autoCloseFold: this.log.autoCloseFold
+    });
+    return fold.active;
+  }
+});
+
+Log.Folds.Fold = function() {
+  return this;
+};
+
+Log.extend(Log.Folds.Fold.prototype, {
+  receive: function(data, options) {
+    this[data.event] = data.id;
+    if (this.start && this.end && !this.active) {
+      return this.activate(options);
+    }
+  },
+  activate: function(options) {
+    var fragment, nextSibling, node, parentNode, toRemove, _i, _len, _ref;
+    options || (options = {});
+    if (Log.DEBUG) {
+      console.log("F.n - activate " + this.start);
+    }
+    toRemove = this.fold.parentNode;
+    parentNode = toRemove.parentNode;
+    nextSibling = toRemove.nextSibling;
+    parentNode.removeChild(toRemove);
+    fragment = document.createDocumentFragment();
+    _ref = this.nodes;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      node = _ref[_i];
+      fragment.appendChild(node);
+    }
+    this.fold.appendChild(fragment);
+    parentNode.insertBefore(toRemove, nextSibling);
+    this.fold.setAttribute('class', this.classes(options['autoCloseFold']));
+    return this.active = true;
+  },
+  classes: function(autoCloseFold) {
+    var classes;
+    classes = this.fold.getAttribute('class').split(' ');
+    classes.push('fold');
+    if (!autoCloseFold) {
+      classes.push('open');
+    }
+    if (this.fold.childNodes.length > 2) {
+      classes.push('active');
+    }
+    return classes.join(' ');
+  }
+});
+
+Object.defineProperty(Log.Folds.Fold.prototype, 'fold', {
+  get: function() {
+    return this._fold || (this._fold = document.getElementById(this.start));
+  }
+});
+
+Object.defineProperty(Log.Folds.Fold.prototype, 'nodes', {
+  get: function() {
+    var node, nodes;
+    node = this.fold;
+    nodes = [];
+    while ((node = node.nextSibling) && node.id !== this.end) {
+      nodes.push(node);
+    }
+    return nodes;
+  }
+});
+
+Log.Times = function(log) {
+  this.log = log;
+  this.times = {};
+  return this;
+};
+
+Log.extend(Log.Times.prototype, {
+  add: function(node) {
+    var time, _base, _name;
+    time = (_base = this.times)[_name = node.name] || (_base[_name] = new Log.Times.Time);
+    return time.receive(node);
+  },
+  duration: function(name) {
+    if (this.times[name]) {
+      return this.times[name].duration;
+    }
+  }
+});
+
+Log.Times.Time = function() {
+  return this;
+};
+
+Log.extend(Log.Times.Time.prototype, {
+  receive: function(node) {
+    this[node.event] = node;
+    if (Log.DEBUG) {
+      console.log("T.0 - " + node.event + " " + node.name);
+    }
+    if (this.start && this.end) {
+      return this.finish();
+    }
+  },
+  finish: function() {
+    var element;
+    if (Log.DEBUG) {
+      console.log("T.1 - finish " + this.start.name);
+    }
+    element = document.getElementById(this.start.id);
+    if (element) {
+      return this.update(element);
+    }
+  },
+  update: function(element) {
+    element.setAttribute('class', 'duration');
+    element.setAttribute('title', "This command finished after " + this.duration + " seconds.");
+    return element.lastChild.nodeValue = "" + this.duration + "s";
+  }
+});
+
+Object.defineProperty(Log.Times.Time.prototype, 'duration', {
+  get: function() {
+    var duration;
+    duration = this.stats.duration / 1000 / 1000 / 1000;
+    return duration.toFixed(2);
+  }
+});
+
+Object.defineProperty(Log.Times.Time.prototype, 'stats', {
+  get: function() {
+    var stat, stats, _i, _len, _ref;
+    if (!(this.end && this.end.stats)) {
+      return {};
+    }
+    stats = {};
+    _ref = this.end.stats.split(',');
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      stat = _ref[_i];
+      stat = stat.split('=');
+      stats[stat[0]] = stat[1];
+    }
+    return stats;
+  }
+});
+
+Log.Deansi = {
+  CLEAR_ANSI: /(?:\033)(?:\[0?c|\[[0356]n|\[7[lh]|\[\?25[lh]|\(B|H|\[(?:\d+(;\d+){,2})?G|\[(?:[12])?[JK]|[DM]|\[0K)/gm,
+  apply: function(string) {
+    var nodes,
+      _this = this;
+    if (!string) {
+      return [];
+    }
+    string = string.replace(this.CLEAR_ANSI, '');
+    nodes = ansiparse(string).map(function(part) {
+      return _this.node(part);
+    });
+    return nodes;
+  },
+  node: function(part) {
+    var classes, node;
+    node = {
+      type: 'span',
+      text: part.text
+    };
+    if (classes = this.classes(part)) {
+      node["class"] = classes.join(' ');
+    }
+    return node;
+  },
+  classes: function(part) {
+    var result;
+    result = [];
+    result = result.concat(this.colors(part));
+    if (result.length > 0) {
+      return result;
+    }
+  },
+  colors: function(part) {
+    var colors;
+    colors = [];
+    if (part.foreground) {
+      colors.push(part.foreground);
+    }
+    if (part.background) {
+      colors.push("bg-" + part.background);
+    }
+    if (part.bold) {
+      colors.push('bold');
+    }
+    if (part.italic) {
+      colors.push('italic');
+    }
+    if (part.underline) {
+      colors.push('underline');
+    }
+    return colors;
+  },
+  hidden: function(part) {
+    if (part.text.match(/\r/)) {
+      part.text = part.text.replace(/^.*\r/gm, '');
+      return true;
+    }
+  }
+};
+
+Log.Limit = function(max_lines) {
+  this.max_lines = max_lines || 1000;
+  return this;
+};
+
+Log.Limit.prototype = Log.extend(new Log.Listener, {
+  count: 0,
+  insert: function(log, node, pos) {
+    if (node.type === 'paragraph' && !node.hidden) {
+      return this.count += 1;
+    }
+  }
+});
+
+Object.defineProperty(Log.Limit.prototype, 'limited', {
+  get: function() {
+    return this.count >= this.max_lines;
+  }
+});
+
+Log.Renderer = function() {
+  this.frag = document.createDocumentFragment();
+  this.para = this.createParagraph();
+  this.span = this.createSpan();
+  this.text = document.createTextNode('');
+  this.fold = this.createFold();
+  return this;
+};
+
+Log.extend(Log.Renderer.prototype, {
+  insert: function(data, pos) {
+    var after, before, into, node;
+    node = this.render(data);
+    if (into = pos != null ? pos.into : void 0) {
+      if (typeof into === 'String') {
+        into = document.getElementById(pos != null ? pos.into : void 0);
+      }
+      if (pos != null ? pos.prepend : void 0) {
+        this.prependTo(node, into);
+      } else {
+        this.appendTo(node, into);
+      }
+    } else if (after = pos != null ? pos.after : void 0) {
+      if (typeof after === 'String') {
+        after = document.getElementById(pos);
+      }
+      this.insertAfter(node, after);
+    } else if (before = pos != null ? pos.before : void 0) {
+      if (typeof before === 'String') {
+        before = document.getElementById(pos != null ? pos.before : void 0);
+      }
+      this.insertBefore(node, before);
+    } else {
+      this.insertBefore(node);
+    }
+    return node;
+  },
+  hide: function(node) {
+    node.setAttribute('class', this.addClass(node.getAttribute('class'), 'hidden'));
+    return node;
+  },
+  remove: function(node) {
+    if (node) {
+      node.parentNode.removeChild(node);
+    }
+    return node;
+  },
+  render: function(data) {
+    var frag, node, type, _i, _len;
+    if (data instanceof Array) {
+      frag = this.frag.cloneNode(true);
+      for (_i = 0, _len = data.length; _i < _len; _i++) {
+        node = data[_i];
+        node = this.render(node);
+        if (node) {
+          frag.appendChild(node);
+        }
+      }
+      return frag;
+    } else {
+      data.type || (data.type = 'paragraph');
+      type = data.type[0].toUpperCase() + data.type.slice(1);
+      return this["render" + type](data);
+    }
+  },
+  renderParagraph: function(data) {
+    var node, para, type, _i, _len, _ref;
+    para = this.para.cloneNode(true);
+    if (data.id) {
+      para.setAttribute('id', data.id);
+    }
+    if (data.hidden) {
+      para.setAttribute('style', 'display: none;');
+    }
+    _ref = data.nodes || [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      node = _ref[_i];
+      type = node.type[0].toUpperCase() + node.type.slice(1);
+      node = this["render" + type](node);
+      para.appendChild(node);
+    }
+    return para;
+  },
+  renderFold: function(data) {
+    var fold;
+    fold = this.fold.cloneNode(true);
+    fold.setAttribute('id', data.id || ("fold-" + data.event + "-" + data.name));
+    fold.setAttribute('class', "fold-" + data.event);
+    if (data.event === 'start') {
+      fold.lastChild.lastChild.nodeValue = data.name;
+    } else {
+      fold.removeChild(fold.lastChild);
+    }
+    return fold;
+  },
+  renderSpan: function(data) {
+    var span;
+    span = this.span.cloneNode(true);
+    if (data.id) {
+      span.setAttribute('id', data.id);
+    }
+    if (data["class"]) {
+      span.setAttribute('class', data["class"]);
+    }
+    span.lastChild.nodeValue = data.text || '';
+    return span;
+  },
+  renderText: function(data) {
+    var text;
+    text = this.text.cloneNode(true);
+    text.nodeValue = data.text;
+    return text;
+  },
+  createParagraph: function() {
+    var para;
+    para = document.createElement('p');
+    para.appendChild(document.createElement('a'));
+    return para;
+  },
+  createFold: function() {
+    var fold;
+    fold = document.createElement('div');
+    fold.appendChild(this.createSpan());
+    fold.lastChild.setAttribute('class', 'fold-name');
+    return fold;
+  },
+  createSpan: function() {
+    var span;
+    span = document.createElement('span');
+    span.appendChild(document.createTextNode(' '));
+    return span;
+  },
+  insertBefore: function(node, other) {
+    var log;
+    if (other) {
+      return other.parentNode.insertBefore(node, other);
+    } else {
+      log = document.getElementById('log');
+      return log.insertBefore(node, log.firstChild);
+    }
+  },
+  insertAfter: function(node, other) {
+    if (other.nextSibling) {
+      return this.insertBefore(node, other.nextSibling);
+    } else {
+      return this.appendTo(node, other.parentNode);
+    }
+  },
+  prependTo: function(node, other) {
+    if (other.firstChild) {
+      return other.insertBefore(node, other.firstChild);
+    } else {
+      return appendTo(node, other);
+    }
+  },
+  appendTo: function(node, other) {
+    return other.appendChild(node);
+  },
+  addClass: function(classes, string) {
+    if (classes != null ? classes.indexOf(string) : void 0) {
+      return;
+    }
+    if (classes) {
+      return "" + classes + " " + string;
+    } else {
+      return string;
+    }
+  }
+});
+
+window.Log = Log;
diff --git a/waiter/Rakefile b/waiter/Rakefile
new file mode 100644
index 00000000..bcfc8d23
--- /dev/null
+++ b/waiter/Rakefile
@@ -0,0 +1,6 @@
+$: << 'lib'
+task :update_emojis do
+  s = Dir.glob('assets/images/emoji/*.png').map {|png| png.split('/', 4)[3].gsub('.png', '')}.map{|png| "'#{png}'"}.join(", ")
+  e = "@EmojiDictionary = [#{s}]"
+  File.open("assets/scripts/config/emoij.coffee", "w") {|f| f.write(e) }
+end
diff --git a/config.ru b/waiter/config.ru
similarity index 97%
rename from config.ru
rename to waiter/config.ru
index fd155ce1..e502a914 100644
--- a/config.ru
+++ b/waiter/config.ru
@@ -59,7 +59,7 @@ run Travis::Web::App.build(
   pusher_host:     ENV['PUSHER_HOST'] || 'ws.pusherapp.com',
   pusher_path:     ENV['PUSHER_PATH'],
   ga_code:         ENV['GA_CODE'],
-  root:            File.expand_path('../public', __FILE__),
+  root:            File.expand_path('../../dist', __FILE__),
   server_start:    Time.now,
   caches_enabled:  ENV['CACHES_ENABLED'],
   ssh_key_enabled: ENV['SSH_KEY_ENABLED'],
diff --git a/lib/travis/web.rb b/waiter/lib/travis/web.rb
similarity index 100%
rename from lib/travis/web.rb
rename to waiter/lib/travis/web.rb
diff --git a/lib/travis/web/allow.rb b/waiter/lib/travis/web/allow.rb
similarity index 100%
rename from lib/travis/web/allow.rb
rename to waiter/lib/travis/web/allow.rb
diff --git a/lib/travis/web/api_redirect.rb b/waiter/lib/travis/web/api_redirect.rb
similarity index 100%
rename from lib/travis/web/api_redirect.rb
rename to waiter/lib/travis/web/api_redirect.rb
diff --git a/lib/travis/web/app.rb b/waiter/lib/travis/web/app.rb
similarity index 63%
rename from lib/travis/web/app.rb
rename to waiter/lib/travis/web/app.rb
index 037298b1..51a78baf 100644
--- a/lib/travis/web/app.rb
+++ b/waiter/lib/travis/web/app.rb
@@ -3,6 +3,7 @@ require 'rack/ssl'
 require 'rack/protection'
 require 'delegate'
 require 'time'
+require 'json'
 
 class Travis::Web::App
   autoload :AltVersions,    'travis/web/app/alt_versions'
@@ -42,19 +43,17 @@ class Travis::Web::App
       builder.use Rack::Protection::FrameOptions
       builder.use Rack::Protection::PathTraversal
       builder.use Rack::ConditionalGet
-      builder.use Travis::Web::App::AltVersions
       builder.run new(options)
       builder.to_app
     end
   end
 
-  attr_reader :routers, :version, :age, :options, :root, :server_start
+  attr_reader :routers,  :age, :options, :root, :server_start
 
   def initialize(options = {})
     @options      = options
     @server_start = options.fetch(:server_start)
     @root         = options.fetch(:root)
-    @version      = File.read File.expand_path('version', root)
     @age          = 60 * 60 * 24 * 365
     @routers      = { default: create_router }
   end
@@ -88,8 +87,8 @@ class Travis::Web::App
           'Cache-Control'    => cache_control(file),
           'Content-Location' => path_for(file),
           'Content-Type'     => mime_type(file),
-          'Expires'          => (server_start + age).httpdate,
-          'ETag'             => %Q{"#{version}"}
+          'Expires'          => expires(file),
+          'ETag'             => fingerprint(file)
         }
       else
         set_config(content, options) if config_needed?(file)
@@ -100,10 +99,10 @@ class Travis::Web::App
           'Cache-Control'    => cache_control(file),
           'Content-Location' => path_for(file),
           'Content-Type'     => mime_type(file),
-          'ETag'             => %Q{"#{version}"},
           'Last-Modified'    => server_start.httpdate,
-          'Expires'          => (server_start + age).httpdate,
-          'Vary'             => vary_for(file)
+          'Expires'          => expires(file),
+          'Vary'             => vary_for(file),
+          'ETag'             => Digest::MD5.hexdigest(content)
         }
       end
 
@@ -119,26 +118,35 @@ class Travis::Web::App
     end
 
     def index?(file)
-      file.end_with?('index.html')
+      file == File.join(root, 'index.html') || file == 'index.html'
     end
 
-    def fingerprinted?(file)
+    def fingerprint(file)
       basename = File.basename(file)
-      basename =~ /-[a-f0-9]{32}.(css|js)$/
+      extname  = File.extname(file)
+      if result = basename.scan(/.+-([a-f0-9]{32})#{extname}$/)
+        result.flatten[0]
+      end
     end
+    alias fingerprinted? fingerprint
 
     def cache_control(file)
       case path_for(file)
-      when '/'        then "public, must-revalidate"
-      when '/version' then "no-cache"
+      when '/'        then "public, must-revalidate, max-age=0"
       else "public, max-age=#{age}"
       end
     end
 
+    def expires(file)
+      case path_for(file)
+      when '/' then '0'
+      else (server_start + age).httpdate
+      end
+    end
+
     def vary_for(file)
       case path_for(file)
       when '/'         then 'Accept'
-      when '/version'  then '*'
       else ''
       end
     end
@@ -163,19 +171,39 @@ class Travis::Web::App
     end
 
     def set_config(string, opts = {})
-      string.gsub! %r(]*>) do
-        %()
-      end
+      # TODO: clean up
+      config = {}
+      config['apiEndpoint'] = options[:api_endpoint] if options[:api_endpoint]
+      config['pagesEndpoint'] = options[:pages_endpoint] if options[:pages_endpoint]
+      config['billingEndpoint'] = options[:billing_endpoint] if options[:billing_endpoint]
+      config['sourceEndpoint'] = options[:source_endpoint] if options[:source_endpoint]
+      pusher = {}
+      pusher['key'] = options[:pusher_key] if options[:pusher_key]
+      pusher['host'] = options[:pusher_host] if options[:pusher_host]
+      pusher['path'] = options[:pusher_path] if options[:pusher_path]
+      config['pusher'] = pusher
 
-      string.gsub! %r{(src|href)="(?:\/?)((styles|scripts)\/[^"]*)"} do
-        src = if options[:assets_host]
-          "#{options[:assets_host].chomp('/')}/#{$2}"
-        elsif opts[:alt]
-          "#{S3_URL}/#{opts[:alt]}/#{$2}"
-        else
-          "/#{$2}"
-        end
-        %(#{$1}="#{src}")
+      config['gaCode'] = options[:ga_code] if options[:ga_code]
+      config['pro'] = options[:pro] if options[:pro]
+      config['enterprise'] = options[:enterprise] if options[:enterprise]
+
+      config['codeClimate'] = options[:code_climate] if options[:code_climate]
+      config['codeClimateUrl'] = options[:code_climate_url] if options[:code_climate_url]
+      config['charmKey'] = options[:charm_key] if options[:charm_key]
+
+      config['endpoints'] = {
+        'sshKey' => options[:ssh_key_enabled],
+        'caches' => options[:caches_enabled]
+      }
+
+      regexp = %r(