mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-01 02:03:22 +00:00
Merging in master
This commit is contained in:
Rob H
8
Gemfile
8
Gemfile
@@ -29,7 +29,6 @@ gem 'truncate_html'
|
||||
gem 'representative_view'
|
||||
gem 'rabl'
|
||||
gem 'oj'
|
||||
gem 'chili', :github => 'openfoodfoundation/chili'
|
||||
gem 'deface', :github => 'spree/deface', :ref => '1110a13'
|
||||
gem 'paperclip'
|
||||
gem 'geocoder'
|
||||
@@ -69,8 +68,8 @@ group :test, :development do
|
||||
gem 'rspec-rails'
|
||||
gem 'shoulda-matchers'
|
||||
gem 'factory_girl_rails', :require => false
|
||||
gem 'faker'
|
||||
gem 'capybara'
|
||||
gem 'capybara-screenshot'
|
||||
gem 'database_cleaner', '0.7.1', :require => false
|
||||
gem 'simplecov', :require => false
|
||||
gem 'awesome_print'
|
||||
@@ -85,11 +84,6 @@ group :test do
|
||||
gem 'webmock'
|
||||
end
|
||||
|
||||
group :chili do
|
||||
gem 'eaterprises_feature', path: 'lib/chili/eaterprises_feature'
|
||||
gem 'local_organics_feature', path: 'lib/chili/local_organics_feature'
|
||||
end
|
||||
|
||||
group :development do
|
||||
gem 'pry-debugger'
|
||||
gem 'debugger-linecache'
|
||||
|
||||
61
Gemfile.lock
61
Gemfile.lock
@@ -6,17 +6,9 @@ GIT
|
||||
actionpack (~> 3.0)
|
||||
activemodel (~> 3.0)
|
||||
|
||||
GIT
|
||||
remote: git://github.com/openfoodfoundation/chili.git
|
||||
revision: b82608623d504eb39f852115b138a53af5f89505
|
||||
specs:
|
||||
chili (3.1.0)
|
||||
deface (~> 1.0.0.rc2)
|
||||
rails (~> 3.2)
|
||||
|
||||
GIT
|
||||
remote: git://github.com/openfoodfoundation/spree.git
|
||||
revision: 1c133672652e1ee8b6c8d694efe258e62378062e
|
||||
revision: da651b40f5c6cdd32e00b060729eb9aefd4f615f
|
||||
branch: 1-3-stable
|
||||
specs:
|
||||
spree (1.3.3)
|
||||
@@ -103,20 +95,6 @@ GIT
|
||||
activemodel (>= 3.0)
|
||||
railties (>= 3.0)
|
||||
|
||||
PATH
|
||||
remote: lib/chili/eaterprises_feature
|
||||
specs:
|
||||
eaterprises_feature (0.0.1)
|
||||
chili (~> 3.1)
|
||||
rails (~> 3.2.11)
|
||||
|
||||
PATH
|
||||
remote: lib/chili/local_organics_feature
|
||||
specs:
|
||||
local_organics_feature (0.0.1)
|
||||
chili (~> 3.1)
|
||||
rails (~> 3.2.11)
|
||||
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
@@ -134,16 +112,16 @@ GEM
|
||||
rack-test (~> 0.6.1)
|
||||
sprockets (~> 2.2.1)
|
||||
active_link_to (1.0.0)
|
||||
active_utils (2.0.1)
|
||||
active_utils (2.0.2)
|
||||
activesupport (>= 2.3.11)
|
||||
i18n
|
||||
activemerchant (1.40.0)
|
||||
activemerchant (1.43.0)
|
||||
active_utils (~> 2.0, >= 2.0.1)
|
||||
activesupport (>= 2.3.14, < 5.0.0)
|
||||
builder (>= 2.1.2, < 4.0.0)
|
||||
i18n (~> 0.5)
|
||||
json (~> 1.7)
|
||||
money (< 6.0.0)
|
||||
money (< 7.0.0)
|
||||
nokogiri (~> 1.4)
|
||||
activemodel (3.2.17)
|
||||
activesupport (= 3.2.17)
|
||||
@@ -162,9 +140,10 @@ GEM
|
||||
acts_as_list (0.1.4)
|
||||
addressable (2.3.3)
|
||||
andand (1.3.3)
|
||||
angular-rails-templates (0.0.7)
|
||||
angular-rails-templates (0.1.1)
|
||||
railties (>= 3.1)
|
||||
sprockets
|
||||
tilt
|
||||
angularjs-rails (1.2.13)
|
||||
ansi (1.4.2)
|
||||
arel (3.0.3)
|
||||
@@ -188,13 +167,16 @@ GEM
|
||||
rack (>= 1.0.0)
|
||||
rack-test (>= 0.5.4)
|
||||
xpath (~> 2.0)
|
||||
capybara-screenshot (0.3.19)
|
||||
capybara (>= 1.0, < 3)
|
||||
launchy
|
||||
celluloid (0.15.2)
|
||||
timers (~> 1.1.0)
|
||||
chunky_png (1.3.0)
|
||||
climate_control (0.0.3)
|
||||
activesupport (>= 3.0)
|
||||
cliver (0.3.2)
|
||||
cocaine (0.5.1)
|
||||
cocaine (0.5.4)
|
||||
climate_control (>= 0.0.3, < 1.0)
|
||||
coderay (1.0.9)
|
||||
coffee-rails (3.2.2)
|
||||
@@ -204,7 +186,7 @@ GEM
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.3.3)
|
||||
colorize (0.6.0)
|
||||
colorize (0.7.2)
|
||||
columnize (0.3.6)
|
||||
comfortable_mexican_sofa (1.6.24)
|
||||
active_link_to (~> 1.0.0)
|
||||
@@ -250,8 +232,6 @@ GEM
|
||||
factory_girl_rails (3.3.0)
|
||||
factory_girl (~> 3.3.0)
|
||||
railties (>= 3.0.0)
|
||||
faker (1.0.1)
|
||||
i18n (~> 0.4)
|
||||
ffaker (1.15.0)
|
||||
ffi (1.9.3)
|
||||
fog (1.14.0)
|
||||
@@ -299,8 +279,8 @@ GEM
|
||||
highline (1.6.18)
|
||||
hike (1.2.3)
|
||||
http_parser.rb (0.5.3)
|
||||
httparty (0.11.0)
|
||||
multi_json (~> 1.0)
|
||||
httparty (0.13.1)
|
||||
json (~> 1.8)
|
||||
multi_xml (>= 0.5.2)
|
||||
i18n (0.6.9)
|
||||
immigrant (0.1.6)
|
||||
@@ -334,13 +314,13 @@ GEM
|
||||
treetop (~> 1.4.8)
|
||||
method_source (0.8.1)
|
||||
mime-types (1.25.1)
|
||||
mini_portile (0.5.2)
|
||||
mini_portile (0.5.3)
|
||||
momentjs-rails (2.5.1)
|
||||
railties (>= 3.1)
|
||||
money (5.0.0)
|
||||
i18n (~> 0.4)
|
||||
json
|
||||
multi_json (1.9.2)
|
||||
multi_json (1.10.0)
|
||||
multi_xml (0.5.5)
|
||||
net-scp (1.1.2)
|
||||
net-ssh (>= 2.6.5)
|
||||
@@ -399,7 +379,7 @@ GEM
|
||||
rdoc (~> 3.4)
|
||||
thor (>= 0.14.6, < 2.0)
|
||||
raindrops (0.9.0)
|
||||
rake (10.1.1)
|
||||
rake (10.3.1)
|
||||
ransack (0.7.2)
|
||||
actionpack (~> 3.0)
|
||||
activerecord (~> 3.0)
|
||||
@@ -461,7 +441,7 @@ GEM
|
||||
therubyracer (0.12.0)
|
||||
libv8 (~> 3.16.14.0)
|
||||
ref
|
||||
thor (0.19.0)
|
||||
thor (0.19.1)
|
||||
tilt (1.4.1)
|
||||
timecop (0.6.2.2)
|
||||
timers (1.1.0)
|
||||
@@ -474,7 +454,7 @@ GEM
|
||||
sprockets (>= 2.0.0)
|
||||
turn (0.8.3)
|
||||
ansi
|
||||
tzinfo (0.3.38)
|
||||
tzinfo (0.3.39)
|
||||
uglifier (1.2.4)
|
||||
execjs (>= 0.3.0)
|
||||
multi_json (>= 1.0.2)
|
||||
@@ -512,7 +492,7 @@ DEPENDENCIES
|
||||
aws-sdk
|
||||
bugsnag
|
||||
capybara
|
||||
chili!
|
||||
capybara-screenshot
|
||||
coffee-rails (~> 3.2.1)
|
||||
comfortable_mexican_sofa
|
||||
compass-rails
|
||||
@@ -520,9 +500,7 @@ DEPENDENCIES
|
||||
db2fog
|
||||
debugger-linecache
|
||||
deface!
|
||||
eaterprises_feature!
|
||||
factory_girl_rails
|
||||
faker
|
||||
foreigner
|
||||
foundation-icons-sass-rails
|
||||
foundation-rails
|
||||
@@ -539,7 +517,6 @@ DEPENDENCIES
|
||||
jquery-rails
|
||||
json_spec
|
||||
letter_opener
|
||||
local_organics_feature!
|
||||
momentjs-rails
|
||||
newrelic_rpm
|
||||
oj
|
||||
|
||||
BIN
app/assets/images/producers/producers-pg-bg.jpg
Normal file
BIN
app/assets/images/producers/producers-pg-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
@@ -10,7 +10,10 @@
|
||||
#= require ../shared/bindonce.min.js
|
||||
#= require ../shared/ng-infinite-scroll.min.js
|
||||
#= require ../shared/angular-local-storage.js
|
||||
#= require_tree ../../templates
|
||||
|
||||
#= require angular-rails-templates
|
||||
#= require_tree ../templates
|
||||
#
|
||||
#= require angular-backstretch.js
|
||||
#= require angular-flash.min.js
|
||||
#= require moment
|
||||
|
||||
@@ -1,14 +1,6 @@
|
||||
Darkswarm.controller "ForgotSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
|
||||
$scope.spree_user = SpreeUser.spree_user
|
||||
Darkswarm.controller "ForgotCtrl", ($scope, $http, $location, AuthenticationService) ->
|
||||
$scope.path = "/forgot"
|
||||
$scope.sent = false
|
||||
Navigation.paths.push $scope.path
|
||||
|
||||
$scope.active = ->
|
||||
$location.path() == $scope.path
|
||||
|
||||
$scope.select = ->
|
||||
Navigation.navigate($scope.path)
|
||||
|
||||
$scope.submit = ->
|
||||
if $scope.spree_user.email != null
|
||||
@@ -0,0 +1,8 @@
|
||||
Darkswarm.controller "LoginCtrl", ($scope, $http, $location, AuthenticationService) ->
|
||||
$scope.path = "/login"
|
||||
|
||||
$scope.submit = ->
|
||||
$http.post("/user/spree_user/sign_in", {spree_user: $scope.spree_user}).success (data)->
|
||||
location.href = location.origin + location.pathname # Strips out hash fragments
|
||||
.error (data) ->
|
||||
$scope.errors = data.message
|
||||
@@ -1,17 +1,9 @@
|
||||
Darkswarm.controller "SignupSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
|
||||
$scope.spree_user = SpreeUser.spree_user
|
||||
Darkswarm.controller "SignupCtrl", ($scope, $http, $location, AuthenticationService) ->
|
||||
$scope.path = "/signup"
|
||||
Navigation.paths.push $scope.path
|
||||
$scope.errors =
|
||||
email: null
|
||||
password: null
|
||||
|
||||
$scope.active = ->
|
||||
$location.path() == $scope.path
|
||||
|
||||
$scope.select = ->
|
||||
Navigation.navigate($scope.path)
|
||||
|
||||
$scope.submit = ->
|
||||
$http.post("/user/spree_user", {spree_user: $scope.spree_user}).success (data)->
|
||||
location.href = location.origin + location.pathname # Strips out hash fragments
|
||||
@@ -1,5 +0,0 @@
|
||||
Darkswarm.controller "AuthenticationActionsCtrl", ($scope, Navigation, storage, Sidebar) ->
|
||||
$scope.Sidebar = Sidebar
|
||||
|
||||
$scope.toggle = (path)->
|
||||
Navigation.navigate(path)
|
||||
@@ -0,0 +1,7 @@
|
||||
Darkswarm.controller "AuthenticationCtrl", ($scope, AuthenticationService, SpreeUser)->
|
||||
$scope.open = AuthenticationService.open
|
||||
$scope.toggle = AuthenticationService.toggle
|
||||
|
||||
$scope.spree_user = SpreeUser.spree_user
|
||||
$scope.active = AuthenticationService.active
|
||||
$scope.select = AuthenticationService.select
|
||||
@@ -1,9 +1,9 @@
|
||||
Darkswarm.controller "HubNodeCtrl", ($scope, Navigation, $location, $anchorScroll, $templateCache, CurrentHub) ->
|
||||
Darkswarm.controller "HubNodeCtrl", ($scope, HashNavigation, $location, $anchorScroll, $templateCache, CurrentHub) ->
|
||||
$scope.toggle = ->
|
||||
Navigation.navigate $scope.hub.path
|
||||
HashNavigation.toggle $scope.hub.hash
|
||||
|
||||
$scope.open = ->
|
||||
$location.path() == $scope.hub.path
|
||||
HashNavigation.active $scope.hub.hash
|
||||
|
||||
$scope.current = ->
|
||||
$scope.hub.id is CurrentHub.id
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
Darkswarm.controller "LoginSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
|
||||
$scope.spree_user = SpreeUser.spree_user
|
||||
$scope.path = "/login"
|
||||
Navigation.paths.push $scope.path
|
||||
|
||||
$scope.active = ->
|
||||
$location.path() == $scope.path
|
||||
|
||||
$scope.select = ->
|
||||
Navigation.navigate($scope.path)
|
||||
|
||||
|
||||
$scope.submit = ->
|
||||
$http.post("/user/spree_user/sign_in", {spree_user: $scope.spree_user}).success (data)->
|
||||
location.href = location.origin + location.pathname # Strips out hash fragments
|
||||
.error (data) ->
|
||||
$scope.errors = data.message
|
||||
@@ -0,0 +1,9 @@
|
||||
Darkswarm.controller "ProducerNodeCtrl", ($scope, Navigation, $anchorScroll) ->
|
||||
$scope.toggle = ->
|
||||
Navigation.navigate $scope.producer.path
|
||||
|
||||
$scope.open = ->
|
||||
Navigation.active($scope.producer.path)
|
||||
|
||||
if $scope.open()
|
||||
$anchorScroll()
|
||||
@@ -0,0 +1,2 @@
|
||||
Darkswarm.controller "ProducersCtrl", ($scope, Producers) ->
|
||||
$scope.Producers = Producers
|
||||
@@ -0,0 +1,2 @@
|
||||
Darkswarm.controller "TmpCtrl", ($scope)->
|
||||
$scope.test = {foo: "bar"}
|
||||
@@ -5,7 +5,7 @@ window.Darkswarm = angular.module("Darkswarm", ["ngResource",
|
||||
'infinite-scroll',
|
||||
'angular-flash.service',
|
||||
'templates',
|
||||
'backstretch']).config ($httpProvider, $tooltipProvider) ->
|
||||
'backstretch']).config ($httpProvider, $tooltipProvider, $locationProvider) ->
|
||||
$httpProvider.defaults.headers.post['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content')
|
||||
$httpProvider.defaults.headers.put['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content')
|
||||
$httpProvider.defaults.headers['common']['X-Requested-With'] = 'XMLHttpRequest'
|
||||
|
||||
@@ -7,4 +7,4 @@ Darkswarm.filter "sensible_timeframe", (date_in_wordsFilter)->
|
||||
if moment().add('days', 2) < moment(date)
|
||||
"Orders open"
|
||||
else
|
||||
"Closing in #{date_in_wordsFilter(date)}"
|
||||
"Closing #{date_in_wordsFilter(date)}"
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
Darkswarm.filter 'filterHubs', ->
|
||||
Darkswarm.filter 'hubs', (Matcher)->
|
||||
(hubs, text) ->
|
||||
hubs ||= []
|
||||
text ?= ""
|
||||
match = (matched)->
|
||||
matched.toLowerCase().indexOf(text.toLowerCase()) != -1
|
||||
|
||||
hubs.filter (hub)->
|
||||
match(hub.name) or match(hub.address.zipcode) or match(hub.address.city)
|
||||
hubs.filter (hub)=>
|
||||
Matcher.match [
|
||||
hub.name, hub.address.zipcode, hub.address.city, hub.address.state
|
||||
], text
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
Darkswarm.filter 'filterProducers', (hubsFilter)->
|
||||
(producers, text) ->
|
||||
producers ||= []
|
||||
text ?= ""
|
||||
|
||||
hubsFilter(producers, text)
|
||||
@@ -0,0 +1,24 @@
|
||||
Darkswarm.factory "AuthenticationService", (Navigation, $modal, $location)->
|
||||
new class AuthenticationService
|
||||
selectedPath: "/login"
|
||||
|
||||
constructor: ->
|
||||
if $location.path() in ["/login", "/signup", "/forgot"]
|
||||
@open()
|
||||
|
||||
open: (path = false)=>
|
||||
@modalInstance = $modal.open
|
||||
templateUrl: 'authentication.html'
|
||||
@modalInstance.result.then @close, @close
|
||||
@selectedPath = path || @selectedPath
|
||||
Navigation.navigate @selectedPath
|
||||
|
||||
|
||||
select: (path)=>
|
||||
@selectedPath = path
|
||||
Navigation.navigate @selectedPath
|
||||
|
||||
active: Navigation.active
|
||||
|
||||
close: ->
|
||||
Navigation.navigate "/"
|
||||
@@ -0,0 +1,17 @@
|
||||
Darkswarm.factory 'HashNavigation', ($location) ->
|
||||
new class HashNavigation
|
||||
hash: null
|
||||
|
||||
active: (hash)->
|
||||
$location.hash() == hash
|
||||
|
||||
navigate: (hash)->
|
||||
@hash = hash
|
||||
$location.hash(@hash)
|
||||
|
||||
toggle: (hash = false)->
|
||||
@hash = hash || @hash
|
||||
if $location.hash() == @hash
|
||||
$location.hash("")
|
||||
else
|
||||
@navigate(hash)
|
||||
@@ -0,0 +1,5 @@
|
||||
Darkswarm.factory "Matcher", ->
|
||||
new class Matcher
|
||||
match: (properties, text)->
|
||||
properties.some (prop)->
|
||||
prop.toLowerCase().indexOf(text.toLowerCase()) != -1
|
||||
@@ -1,14 +1,21 @@
|
||||
Darkswarm.factory 'Navigation', ($location) ->
|
||||
new class Navigation
|
||||
paths: []
|
||||
path: null
|
||||
|
||||
navigate: (path = false)->
|
||||
@path = path || @path || @paths[0]
|
||||
active: (path)->
|
||||
$location.path() == path
|
||||
|
||||
navigate: (path)=>
|
||||
@path = path
|
||||
$location.path(@path)
|
||||
|
||||
toggle: (path = false)=>
|
||||
console.log "toggling"
|
||||
@path = path || @path
|
||||
if $location.path() == @path
|
||||
$location.path("/")
|
||||
else
|
||||
$location.path(@path)
|
||||
@navigate(path)
|
||||
|
||||
go: (path)->
|
||||
window.location.pathname = path
|
||||
|
||||
@@ -8,7 +8,7 @@ Darkswarm.factory 'Order', ($resource, Product, order, $http, CheckoutFormState,
|
||||
@order.shipping_method_id ||= parseInt(Object.keys(@order.shipping_methods)[0])
|
||||
|
||||
submit: ->
|
||||
$http.put('/shop/checkout', {order: @preprocess()}).success (data, status)=>
|
||||
$http.put('/checkout', {order: @preprocess()}).success (data, status)=>
|
||||
Navigation.go data.path
|
||||
.error (response, status)=>
|
||||
@errors = response.errors
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
Darkswarm.factory 'Producers', (producers) ->
|
||||
new class Producers
|
||||
constructor: ->
|
||||
@producers = producers
|
||||
@@ -1,43 +0,0 @@
|
||||
// Make sure the charset is set appropriately
|
||||
@charset "UTF-8";
|
||||
|
||||
// This includes all of the foundation global elements that are needed to work with any of the other files.
|
||||
@import "foundation4/foundation/variables";
|
||||
|
||||
// Foundation Components
|
||||
@import
|
||||
"foundation4/foundation/components/global",
|
||||
"foundation4/foundation/components/grid",
|
||||
"foundation4/foundation/components/visibility",
|
||||
"foundation4/foundation/components/block-grid",
|
||||
"foundation4/foundation/components/type",
|
||||
"foundation4/foundation/components/buttons",
|
||||
"foundation4/foundation/components/forms",
|
||||
"foundation4/foundation/components/button-groups",
|
||||
"foundation4/foundation/components/dropdown-buttons",
|
||||
"foundation4/foundation/components/split-buttons",
|
||||
"foundation4/foundation/components/flex-video",
|
||||
"foundation4/foundation/components/section",
|
||||
"foundation4/foundation/components/top-bar",
|
||||
"foundation4/foundation/components/orbit",
|
||||
"foundation4/foundation/components/reveal",
|
||||
"foundation4/foundation/components/joyride",
|
||||
"foundation4/foundation/components/clearing",
|
||||
"foundation4/foundation/components/alert-boxes",
|
||||
"foundation4/foundation/components/breadcrumbs",
|
||||
"foundation4/foundation/components/custom-forms",
|
||||
"foundation4/foundation/components/keystrokes",
|
||||
"foundation4/foundation/components/labels",
|
||||
"foundation4/foundation/components/inline-lists",
|
||||
"foundation4/foundation/components/pagination",
|
||||
"foundation4/foundation/components/panels",
|
||||
"foundation4/foundation/components/pricing-tables",
|
||||
"foundation4/foundation/components/progress-bars",
|
||||
"foundation4/foundation/components/side-nav",
|
||||
"foundation4/foundation/components/sub-nav",
|
||||
"foundation4/foundation/components/switch",
|
||||
"foundation4/foundation/components/magellan",
|
||||
"foundation4/foundation/components/tables",
|
||||
"foundation4/foundation/components/thumbs",
|
||||
"foundation4/foundation/components/tooltips",
|
||||
"foundation4/foundation/components/dropdown";
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,107 +0,0 @@
|
||||
//
|
||||
// Alert Box Variables
|
||||
//
|
||||
$include-html-alert-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control alert padding.
|
||||
$alert-padding-top: em-calc(11) !default;
|
||||
$alert-padding-default-float: $alert-padding-top !default;
|
||||
$alert-padding-opposite-direction: $alert-padding-top + em-calc(10) !default;
|
||||
$alert-padding-bottom: $alert-padding-top + em-calc(1) !default;
|
||||
|
||||
// We use these to control text style.
|
||||
$alert-font-weight: bold !default;
|
||||
$alert-font-size: em-calc(14) !default;
|
||||
$alert-font-color: #fff !default;
|
||||
$alert-font-color-alt: darken($secondary-color, 60%) !default;
|
||||
|
||||
// We use this for close hover effect.
|
||||
$alert-function-factor: 10% !default;
|
||||
|
||||
// We use these to control border styles.
|
||||
$alert-border-style: solid !default;
|
||||
$alert-border-width: 1px !default;
|
||||
$alert-border-color: darken($primary-color, $alert-function-factor) !default;
|
||||
$alert-bottom-margin: em-calc(20) !default;
|
||||
|
||||
// We use these to style the close buttons
|
||||
$alert-close-color: #333 !default;
|
||||
$alert-close-position: em-calc(5) !default;
|
||||
$alert-close-font-size: em-calc(22) !default;
|
||||
$alert-close-opacity: 0.3 !default;
|
||||
$alert-close-opacity-hover: 0.5 !default;
|
||||
$alert-close-padding: 5px 4px 4px !default;
|
||||
|
||||
// We use this to control border radius
|
||||
$alert-radius: $global-radius !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;
|
||||
}
|
||||
|
||||
// We use this mixin to add alert styles
|
||||
@mixin alert-style($bg:$primary-color) {
|
||||
|
||||
// This find 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: darken($bg, $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-position + em-calc(2);
|
||||
#{$opposite-direction}: $alert-close-position;
|
||||
color: $alert-close-color;
|
||||
opacity: $alert-close-opacity;
|
||||
&:hover,
|
||||
&:focus { opacity: $alert-close-opacity-hover; }
|
||||
}
|
||||
|
||||
// We use this to quickly create alerts with a single mixin.
|
||||
@mixin alert($bg:$primary-color, $radius:false) {
|
||||
@include alert-base;
|
||||
@include alert-style($bg);
|
||||
@include radius($radius);
|
||||
}
|
||||
|
||||
@if $include-html-alert-classes != false {
|
||||
|
||||
/* Foundation Alerts */
|
||||
.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); }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
//
|
||||
// Block Grid Variables
|
||||
//
|
||||
$include-html-grid-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control the maximum number of block grid elements per row
|
||||
$block-grid-elements: 12 !default;
|
||||
$block-grid-default-spacing: em-calc(20) !default;
|
||||
|
||||
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
|
||||
$block-grid-media-queries: true !default;
|
||||
|
||||
//
|
||||
// Block Grid Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create different block-grids. You can apply per-row and spacing options.
|
||||
// Setting $base-style to false will ommit default styles.
|
||||
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
|
||||
|
||||
@if $base-style {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0 (-$spacing/2);
|
||||
@include clearfix;
|
||||
|
||||
&>li {
|
||||
display: inline;
|
||||
height: auto;
|
||||
float: $default-float;
|
||||
padding: 0 ($spacing/2) $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@if $per-row {
|
||||
&>li {
|
||||
width: 100%/$per-row;
|
||||
padding: 0 ($spacing/2) $spacing;
|
||||
|
||||
&:nth-of-type(n) { clear: none; }
|
||||
&:nth-of-type(#{$per-row}n+1) { clear: both; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $include-html-grid-classes {
|
||||
/* Foundation Block Grids for below small breakpoint */
|
||||
@media only screen {
|
||||
[class*="block-grid-"] { @include block-grid; }
|
||||
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
.small-block-grid-#{($i)} {
|
||||
@include block-grid($i,$block-grid-default-spacing,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Foundation Block Grids for above small breakpoint */
|
||||
@media #{$small} {
|
||||
/* Remove small grid clearing */
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
.small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
|
||||
}
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
.large-block-grid-#{($i)} {
|
||||
@include block-grid($i,$block-grid-default-spacing,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
//
|
||||
// Breadcrumb Variables
|
||||
//
|
||||
$include-html-nav-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to set the background color for the breadcrumb container.
|
||||
$crumb-bg: lighten($secondary-color, 5%) !default;
|
||||
|
||||
// We use these to set the padding around the breadcrumbs.
|
||||
$crumb-padding: em-calc(9 14 9) !default;
|
||||
$crumb-side-padding: em-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: darken($crumb-bg, $crumb-function-factor) !default;
|
||||
$crumb-radius: $global-radius !default;
|
||||
|
||||
// We use these to set various text styles for breadcrumbs.
|
||||
$crumb-font-size: em-calc(11) !default;
|
||||
$crumb-font-color: $primary-color !default;
|
||||
$crumb-font-color-current: #333 !default;
|
||||
$crumb-font-color-unavailable: #999 !default;
|
||||
$crumb-font-transform: uppercase !default;
|
||||
$crumb-link-decor: underline !default;
|
||||
|
||||
// We use these to control the slash between breadcrumbs
|
||||
$crumb-slash-color: #aaa !default;
|
||||
$crumb-slash: "/" !default;
|
||||
|
||||
//
|
||||
// Breakcrumb 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;
|
||||
text-transform: $crumb-font-transform;
|
||||
|
||||
&:hover a, &:focus a { text-decoration: $crumb-link-decor; }
|
||||
|
||||
a,
|
||||
span {
|
||||
text-transform: $crumb-font-transform;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes != false {
|
||||
|
||||
/* Breadcrumbs */
|
||||
.breadcrumbs {
|
||||
@include crumb-container;
|
||||
@include radius($crumb-radius);
|
||||
|
||||
&>* {
|
||||
@include crumbs;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
//
|
||||
// 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: em-calc(10) !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;
|
||||
@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:$default-float) {
|
||||
|
||||
// We use this to control the flow, or remove those styles completely.
|
||||
@if $float {
|
||||
margin: 0 0 0 (-$button-border-width);
|
||||
float: $float;
|
||||
// Make sure the first child doesn't get the negative margin.
|
||||
&:first-child { margin-#{$default-float}: 0; }
|
||||
}
|
||||
|
||||
// We use these to control left and right radius on first/last buttons in the group.
|
||||
@if $radius == true {
|
||||
&:first-child,
|
||||
&:first-child > a,
|
||||
&:first-child > button,
|
||||
&:first-child > .button { @include side-radius($default-float, $button-radius); }
|
||||
&:last-child,
|
||||
&:last-child > a,
|
||||
&:last-child > button,
|
||||
&:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
|
||||
}
|
||||
@else if $radius {
|
||||
&:first-child,
|
||||
&:first-child > a,
|
||||
&:first-child > button,
|
||||
&:first-child > .button { @include side-radius($default-float, $radius); }
|
||||
&:last-child,
|
||||
&:last-child > a,
|
||||
&:last-child > button,
|
||||
&:last-child > .button { @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%; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Only include these CSS classes if $include-html-classes: true
|
||||
@if $include-html-button-classes != false {
|
||||
|
||||
/* Button Groups */
|
||||
.button-group { @include button-group-container;
|
||||
|
||||
&> * { @include button-group-style(); }
|
||||
|
||||
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
|
||||
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
|
||||
|
||||
@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); }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
//
|
||||
// Button Variables
|
||||
//
|
||||
$include-html-button-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to build padding for buttons.
|
||||
$button-med: em-calc(12) !default;
|
||||
$button-tny: em-calc(7) !default;
|
||||
$button-sml: em-calc(9) !default;
|
||||
$button-lrg: em-calc(16) !default;
|
||||
|
||||
// We use this to control the display property.
|
||||
$button-display: inline-block !default;
|
||||
$button-margin-bottom: em-calc(20) !default;
|
||||
|
||||
// We use these to control button text styles.
|
||||
$button-font-family: inherit !default;
|
||||
$button-font-color: #fff !default;
|
||||
$button-font-color-alt: #333 !default;
|
||||
$button-font-med: em-calc(16) !default;
|
||||
$button-font-tny: em-calc(11) !default;
|
||||
$button-font-sml: em-calc(13) !default;
|
||||
$button-font-lrg: em-calc(20) !default;
|
||||
$button-font-weight: bold !default;
|
||||
$button-font-align: center !default;
|
||||
|
||||
// We use these to control various hover effects.
|
||||
$button-function-factor: 10% !default;
|
||||
|
||||
// We use these to control button border styles.
|
||||
$button-border-width: 1px !default;
|
||||
$button-border-style: solid !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 for disabled buttons.
|
||||
$button-disabled-opacity: 0.6 !default;
|
||||
|
||||
|
||||
//
|
||||
// Button Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a default button base.
|
||||
@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;
|
||||
}
|
||||
@if $display { display: $display; }
|
||||
}
|
||||
|
||||
// We use this mixin to add button size styles
|
||||
@mixin button-size($padding:$button-med, $full-width:false, $is-input: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 + em-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; }
|
||||
@else { font-size: $padding - em-calc(2); }
|
||||
}
|
||||
|
||||
// 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 + em-calc(1);
|
||||
} @else if $padding == false {
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// <input>'s and <button>'s take on strange padding. We added this to help fix that.
|
||||
@if $is-input == $button-lrg {
|
||||
padding-top: $is-input + em-calc(.5);
|
||||
padding-bottom: $is-input + em-calc(.5);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@else if $is-input {
|
||||
padding-top: $is-input + em-calc(1);
|
||||
padding-bottom: $is-input;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to add button color styles
|
||||
@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
|
||||
|
||||
// We control which background styles are used,
|
||||
// these can be removed by setting $bg:false
|
||||
@if $bg {
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
border-color: darken($bg, $button-function-factor);
|
||||
&:hover,
|
||||
&:focus { background-color: darken($bg, $button-function-factor); }
|
||||
|
||||
// We control the text color for you based on the background color.
|
||||
@if $bg-lightness > 70% {
|
||||
color: $button-font-color-alt;
|
||||
&:hover,
|
||||
&:focus { color: $button-font-color-alt; }
|
||||
}
|
||||
@else {
|
||||
color: $button-font-color;
|
||||
&:hover,
|
||||
&:focus { color: $button-font-color; }
|
||||
}
|
||||
}
|
||||
|
||||
// We can set $disabled:true to create a disabled transparent button.
|
||||
@if $disabled {
|
||||
cursor: $cursor-default-value;
|
||||
opacity: $button-disabled-opacity;
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
box-shadow: none;
|
||||
&:hover,
|
||||
&:focus { background-color: $bg; }
|
||||
}
|
||||
|
||||
// We can control how much button radius us used.
|
||||
@if $radius == true { @include radius($button-radius); }
|
||||
@else if $radius { @include radius($radius); }
|
||||
|
||||
}
|
||||
|
||||
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
|
||||
@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
|
||||
@include button-base;
|
||||
@include button-size($padding, $full-width, $is-input);
|
||||
@include button-style($bg, $radius, $disabled);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Classes
|
||||
//
|
||||
|
||||
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||
@if $include-html-button-classes != false {
|
||||
|
||||
// Default styles applied outside of media query
|
||||
button, .button {
|
||||
@include button-base;
|
||||
@include button-size;
|
||||
@include button-style;
|
||||
|
||||
&.secondary { @include button-style($bg:$secondary-color); }
|
||||
&.success { @include button-style($bg:$success-color); }
|
||||
&.alert { @include button-style($bg:$alert-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: em-calc(12); }
|
||||
&.right-align { text-align: right; padding-right: em-calc(12); }
|
||||
|
||||
&.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
|
||||
&.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
|
||||
&.success { @include button-style($bg:$success-color, $disabled:true); }
|
||||
&.alert { @include button-style($bg:$alert-color, $disabled:true); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button, .button {
|
||||
@include button-size($padding:false, $is-input:$button-med);
|
||||
&.tiny { @include button-size($padding:false, $is-input:$button-tny); }
|
||||
&.small { @include button-size($padding:false, $is-input:$button-sml); }
|
||||
&.large { @include button-size($padding:false, $is-input:$button-lrg); }
|
||||
}
|
||||
|
||||
// Styles for any browser or device that support media queries
|
||||
@media only screen {
|
||||
|
||||
button, .button {
|
||||
@include inset-shadow();
|
||||
@include single-transition(background-color);
|
||||
|
||||
&.large { @include button-size($padding:false, $full-width:false); }
|
||||
&.small { @include button-size($padding:false, $full-width:false); }
|
||||
&.tiny { @include button-size($padding:false, $full-width:false); }
|
||||
|
||||
&.radius { @include button-style($bg:false, $radius:true); }
|
||||
&.round { @include button-style($bg:false, $radius:$button-round); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Additional styles for screens larger than 768px
|
||||
@media #{$small} {
|
||||
|
||||
button, .button {
|
||||
@include button-base($style:false, $display:inline-block);
|
||||
@include button-size($padding:false, $full-width:false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,227 +0,0 @@
|
||||
//
|
||||
// Clearing Variables
|
||||
//
|
||||
$include-html-clearing-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to set the background colors for parts of Clearing.
|
||||
$clearing-bg: #111 !default;
|
||||
$clearing-caption-bg: $clearing-bg !default;
|
||||
$clearing-carousel-bg: #111 !default;
|
||||
$clearing-img-bg: $clearing-bg !default;
|
||||
|
||||
// We use these to style the close button
|
||||
$clearing-close-color: #fff !default;
|
||||
$clearing-close-size: 40px !default;
|
||||
|
||||
// We use these to style the arrows
|
||||
$clearing-arrow-size: 16px !default;
|
||||
$clearing-arrow-color: $clearing-close-color !default;
|
||||
|
||||
// We use these to style captions
|
||||
$clearing-caption-font-color: #fff !default;
|
||||
$clearing-caption-padding: 10px 30px !default;
|
||||
|
||||
// We use these to make the image and carousel height and style
|
||||
$clearing-active-img-height: 75% !default;
|
||||
$clearing-carousel-height: 150px !default;
|
||||
$clearing-carousel-thumb-width: 175px !default;
|
||||
$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
|
||||
|
||||
@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 */
|
||||
[data-clearing] {
|
||||
@include clearfix;
|
||||
margin-bottom: 0;
|
||||
margin-#{$default-float}: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: $default-float;
|
||||
margin-#{$opposite-direction}: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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: #ccc; }
|
||||
}
|
||||
|
||||
.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 #{$small} {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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.5; }
|
||||
|
||||
.clearing-assembled .clearing-container {
|
||||
|
||||
.carousel {
|
||||
background: $clearing-carousel-bg;
|
||||
height: $clearing-carousel-height;
|
||||
margin-top: 5px;
|
||||
|
||||
& > ul {
|
||||
display: block;
|
||||
z-index: 999;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
margin-#{$default-float}: 0;
|
||||
position: relative;
|
||||
#{$default-float}: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: $clearing-carousel-thumb-width;
|
||||
height: inherit;
|
||||
padding: 0;
|
||||
float: $default-float;
|
||||
overflow: hidden;
|
||||
margin-#{$opposite-direction}: 1px;
|
||||
position: relative;
|
||||
cursor: $cursor-pointer-value;
|
||||
opacity: 0.4;
|
||||
|
||||
&.fix-height {
|
||||
img {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.th {
|
||||
border: none;
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: $cursor-pointer-value !important;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
&.visible { opacity: 1; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,278 +0,0 @@
|
||||
//
|
||||
// Custom Form Variables
|
||||
//
|
||||
$include-html-custom-form-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the basic form styles input styles
|
||||
$custom-form-border-color: #ccc !default;
|
||||
$custom-form-border-size: 1px !default;
|
||||
$custom-form-bg: #fff !default;
|
||||
$custom-form-bg-disabled: #ddd !default;
|
||||
$custom-form-input-size: 16px !default;
|
||||
$custom-form-check-color: #222 !default;
|
||||
$custom-form-check-size: 16px !default;
|
||||
$custom-form-radio-size: 8px !default;
|
||||
$custom-form-checkbox-radius: 0 !default;
|
||||
|
||||
// We use these to style the custom select form element.
|
||||
$custom-select-bg: #fff !default;
|
||||
$custom-select-fade-to-color: #f3f3f3 !default;
|
||||
$custom-select-border-color: #ddd !default;
|
||||
$custom-select-triangle-color: #aaa !default;
|
||||
$custom-select-triangle-color-open: #222 !default;
|
||||
$custom-select-height: em-calc(13) + ($form-spacing * 1.5) !default;
|
||||
$custom-select-margin-bottom: em-calc(20) !default;
|
||||
$custom-select-font-color-selected: #141414 !default;
|
||||
$custom-select-disabled-color: #888 !default;
|
||||
|
||||
// We use these to control the style of the custom select dropdown element.
|
||||
$custom-dropdown-height: 200px !default;
|
||||
$custom-dropdown-bg: #fff !default;
|
||||
$custom-dropdown-border-color: darken(#fff, 20%) !default;
|
||||
$custom-dropdown-border-width: 1px !default;
|
||||
$custom-dropdown-border-style: solid !default;
|
||||
$custom-dropdown-font-color: #555 !default;
|
||||
$custom-dropdown-font-size: em-calc(14) !default;
|
||||
$custom-dropdown-color-selected: #eeeeee !default;
|
||||
$custom-dropdown-font-color-selected: #000 !default;
|
||||
$custom-dropdown-shadow: 0 2px 2px 0 rgba(0,0,0,0.1) !default;
|
||||
$custom-dropdown-offset-top: auto !default;
|
||||
$custom-dropdown-list-padding: em-calc(4) !default;
|
||||
$custom-dropdown-default-float-padding: em-calc(6) !default;
|
||||
$custom-dropdown-opposite-padding: em-calc(38) !default;
|
||||
$custom-dropdown-list-item-min-height: em-calc(24) !default;
|
||||
$custom-dropdown-width-small: 134px !default;
|
||||
$custom-dropdown-width-medium: 254px !default;
|
||||
$custom-dropdown-width-large: 434px !default;
|
||||
|
||||
// We decided not to make a mixin for the custom forms because
|
||||
// they rely on a very specific class naming structure.
|
||||
// We may look at updating this in the future.
|
||||
@mixin custom-form-input($radius:0px, $mark-size:0px) {
|
||||
@include radius($radius);
|
||||
$custom-form-input-padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
|
||||
@if $custom-form-input-padding >= 0 {
|
||||
padding: $custom-form-input-padding;
|
||||
} @else {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||
@if $include-html-custom-form-classes != false {
|
||||
|
||||
/* Custom Checkbox and Radio Inputs */
|
||||
form.custom {
|
||||
|
||||
.hidden-field {
|
||||
margin-#{$default-float}: -99999px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.custom {
|
||||
display: inline-block;
|
||||
width: $custom-form-input-size;
|
||||
height: $custom-form-input-size;
|
||||
position: relative;
|
||||
top:-1px; /* fix centering issue */
|
||||
vertical-align: middle;
|
||||
border: solid $custom-form-border-size $custom-form-border-color;
|
||||
background: $custom-form-bg;
|
||||
|
||||
&.checkbox {
|
||||
@include custom-form-input($radius:$custom-form-checkbox-radius, $mark-size:$custom-form-check-size);
|
||||
}
|
||||
|
||||
&.radio {
|
||||
@include custom-form-input($radius:1000px, $mark-size:$custom-form-radio-size);
|
||||
}
|
||||
|
||||
&.checkbox {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
font-size: $custom-form-check-size;
|
||||
color: $custom-form-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio.checked {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: $custom-form-radio-size;
|
||||
height: $custom-form-radio-size;
|
||||
@include radius(1000px);
|
||||
background: $custom-form-check-color;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox.checked {
|
||||
&:before {
|
||||
content: "\00d7";
|
||||
color: $custom-form-check-color;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
margin-top: 4px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Select Options and Dropdowns */
|
||||
form.custom {
|
||||
.custom.dropdown {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: $custom-select-height;
|
||||
margin-bottom: $custom-select-margin-bottom;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background: $custom-dropdown-bg;
|
||||
@if $experimental {
|
||||
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
|
||||
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
||||
box-shadow: none;
|
||||
font-size: $custom-dropdown-font-size;
|
||||
vertical-align: top;
|
||||
|
||||
ul {
|
||||
overflow-y: auto;
|
||||
max-height: $custom-dropdown-height;
|
||||
}
|
||||
|
||||
.current {
|
||||
cursor:default;
|
||||
white-space: nowrap;
|
||||
line-height: $custom-select-height - em-calc(1);
|
||||
color: $input-font-color;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin-#{$default-float}: $form-spacing / 2;
|
||||
margin-#{$opposite-direction}: $custom-select-height;
|
||||
}
|
||||
|
||||
.selector {
|
||||
cursor:default;
|
||||
position: absolute;
|
||||
width: $form-spacing * 2.5;
|
||||
height: $custom-select-height;
|
||||
display: block;
|
||||
#{$opposite-direction}: 0;
|
||||
top: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@include css-triangle(5px, $custom-select-triangle-color, top);
|
||||
position: absolute;
|
||||
#{$default-float}: ($form-spacing * 2.5) / 2 - em-calc(5);
|
||||
top: 50%;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.open {
|
||||
a.selector {
|
||||
&:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: $custom-select-disabled-color;
|
||||
&:after { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
&.open ul {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
min-width:100%;
|
||||
@include box-sizing(content-box);
|
||||
}
|
||||
|
||||
&.small { max-width: $custom-dropdown-width-small; }
|
||||
&.medium { max-width: $custom-dropdown-width-medium; }
|
||||
&.large { max-width: $custom-dropdown-width-large; }
|
||||
&.expand { width: 100% !important; }
|
||||
|
||||
&.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
|
||||
&.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
|
||||
&.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
|
||||
}
|
||||
|
||||
.error .custom.dropdown {
|
||||
@include form-error-color;
|
||||
background: rgba($alert-color, 0.1);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.error .custom.dropdown + small.error {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.custom.dropdown ul {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
display: none;
|
||||
margin: 0;
|
||||
#{$default-float}: -$input-border-width;
|
||||
top: $custom-dropdown-offset-top;
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $custom-dropdown-shadow;
|
||||
}
|
||||
box-shadow: $custom-dropdown-shadow;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $custom-dropdown-bg;
|
||||
border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
|
||||
font-size: $em-base;
|
||||
|
||||
li {
|
||||
color: $custom-dropdown-font-color;
|
||||
font-size: $custom-dropdown-font-size;
|
||||
cursor: $cursor-default-value;
|
||||
padding-top: $custom-dropdown-list-padding;
|
||||
padding-bottom: $custom-dropdown-list-padding;
|
||||
padding-#{$default-float}: $custom-dropdown-default-float-padding;
|
||||
padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
|
||||
min-height: $custom-dropdown-list-item-min-height;
|
||||
line-height: $custom-dropdown-list-item-min-height;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
|
||||
&.selected {
|
||||
background: $custom-dropdown-color-selected;
|
||||
color: $custom-dropdown-font-color-selected;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken($custom-dropdown-color-selected, 4%);
|
||||
color: $custom-dropdown-font-color-selected;
|
||||
}
|
||||
&.selected:hover {
|
||||
background: $custom-dropdown-color-selected;
|
||||
cursor: $cursor-default-value;
|
||||
color: $custom-dropdown-font-color-selected;
|
||||
}
|
||||
}
|
||||
|
||||
&.show { display: block; }
|
||||
}
|
||||
|
||||
/* Custom input, disabled */
|
||||
.custom.disabled { background: $custom-form-bg-disabled; }
|
||||
}
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
//
|
||||
// Dropdown Button 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: #fff !default;
|
||||
$dropdown-button-pip-color-alt: #333 !default;
|
||||
|
||||
// We use these to style tiny dropdown buttons
|
||||
$dropdown-button-padding-tny: $button-tny * 5 !default;
|
||||
$dropdown-button-pip-size-tny: $button-tny !default;
|
||||
$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
|
||||
$dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(1) !default;
|
||||
|
||||
// We use these to style small dropdown buttons
|
||||
$dropdown-button-padding-sml: $button-sml * 5 !default;
|
||||
$dropdown-button-pip-size-sml: $button-sml !default;
|
||||
$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
|
||||
$dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1) !default;
|
||||
|
||||
// We use these to style medium dropdown buttons
|
||||
$dropdown-button-padding-med: $button-med * 4 + em-calc(3) !default;
|
||||
$dropdown-button-pip-size-med: $button-med - em-calc(3) !default;
|
||||
$dropdown-button-pip-opposite-med: $button-med * 2 !default;
|
||||
$dropdown-button-pip-top-med: -$button-med / 2 + em-calc(2) !default;
|
||||
|
||||
// We use these to style large dropdown buttons
|
||||
$dropdown-button-padding-lrg: $button-lrg * 4 !default;
|
||||
$dropdown-button-pip-size-lrg: $button-lrg - em-calc(6) !default;
|
||||
$dropdown-button-pip-opposite-lrg: $button-lrg + em-calc(12) !default;
|
||||
$dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3) !default;
|
||||
|
||||
//
|
||||
// Dropdown Button Mixin
|
||||
//
|
||||
|
||||
// We use this mixin to build off of the button mixin and add dropdown button styles
|
||||
@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
|
||||
|
||||
// We add in base styles, but they can be negated by setting to 'false'.
|
||||
@if $base-style {
|
||||
position: relative;
|
||||
|
||||
// This creates the base styles for the triangle pip
|
||||
&:before {
|
||||
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;
|
||||
&:before {
|
||||
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;
|
||||
&:before {
|
||||
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;
|
||||
&:before {
|
||||
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;
|
||||
&:before {
|
||||
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 {
|
||||
&:before { border-color: $pip-color transparent transparent transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-button-classes {
|
||||
|
||||
/* Dropdown Button */
|
||||
.dropdown.button { @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:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
//
|
||||
// Dropdown Variables
|
||||
//
|
||||
$include-html-button-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;
|
||||
$f-dropdown-margin-top: 2px !default;
|
||||
|
||||
// We use this to control the background color
|
||||
$f-dropdown-bg: #fff !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: darken(#fff, 20%) !default;
|
||||
|
||||
// We use these to style the triangle pip.
|
||||
$f-dropdown-triangle-size: 6px !default;
|
||||
$f-dropdown-triangle-color: #fff !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: #555 !default;
|
||||
$f-dropdown-font-size: em-calc(14) !default;
|
||||
$f-dropdown-list-padding: em-calc(5, 10) !default;
|
||||
$f-dropdown-line-height: em-calc(18) !default;
|
||||
$f-dropdown-list-hover-bg: #eeeeee !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: em-calc(20) !default;
|
||||
|
||||
//
|
||||
// Dropdown 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.
|
||||
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
list-style: $f-dropdown-list-style;
|
||||
margin-#{$default-float}: 0;
|
||||
|
||||
> *: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: $em-base;
|
||||
z-index: 99;
|
||||
}
|
||||
@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: $em-base;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@if $triangle {
|
||||
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: 99;
|
||||
}
|
||||
&: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: 98;
|
||||
}
|
||||
|
||||
&.right:before {
|
||||
left: auto;
|
||||
right: $f-dropdown-triangle-side-offset;
|
||||
}
|
||||
&.right:after {
|
||||
left: auto;
|
||||
right: $f-dropdown-triangle-side-offset - 1;
|
||||
}
|
||||
}
|
||||
|
||||
@if $max-width { max-width: $max-width; }
|
||||
@else { max-width: $f-dropdown-max-width; }
|
||||
|
||||
}
|
||||
|
||||
// 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; }
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: $f-dropdown-list-padding;
|
||||
color: $f-dropdown-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-button-classes != false {
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.f-dropdown {
|
||||
max-width: 100%;
|
||||
#{$default-float}: $dropdown-mobile-default-float;
|
||||
}
|
||||
}
|
||||
|
||||
/* Foundation Dropdowns */
|
||||
.f-dropdown {
|
||||
@include dropdown-container(list);
|
||||
// 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; }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
//
|
||||
// Flex Video Variables
|
||||
//
|
||||
$include-html-media-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control video container padding and margins
|
||||
$flex-video-padding-top: em-calc(25) !default;
|
||||
$flex-video-padding-bottom: 67.5% !default;
|
||||
$flex-video-margin-bottom: em-calc(16) !default;
|
||||
|
||||
// We use this to control widescreen bottom padding
|
||||
$flex-video-widescreen-padding-bottom: 57.25% !default;
|
||||
|
||||
//
|
||||
// Flex Video 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%;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-html-media-classes != false {
|
||||
|
||||
/* Flex Video */
|
||||
.flex-video { @include flex-video-container; }
|
||||
|
||||
}
|
||||
@@ -1,409 +0,0 @@
|
||||
//
|
||||
// Form 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: em-calc(16) !default;
|
||||
|
||||
// We use these to style the labels in different ways
|
||||
$form-label-pointer: pointer !default;
|
||||
$form-label-font-size: em-calc(14) !default;
|
||||
$form-label-font-weight: 500 !default;
|
||||
$form-label-font-color: lighten(#000, 30%) !default;
|
||||
$form-label-bottom-margin: em-calc(3) !default;
|
||||
$input-font-family: inherit !default;
|
||||
$input-font-color: rgba(0,0,0,0.75) !default;
|
||||
$input-font-size: em-calc(14) !default;
|
||||
$input-bg-color: #fff !default;
|
||||
$input-focus-bg-color: darken(#fff, 2%) !default;
|
||||
$input-border-color: darken(#fff, 20%) !default;
|
||||
$input-focus-border-color: darken(#fff, 40%) !default;
|
||||
$input-border-style: solid !default;
|
||||
$input-border-width: 1px !default;
|
||||
$input-disabled-bg: #ddd !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: #ddd !default;
|
||||
$fieldset-padding: em-calc(20) !default;
|
||||
$fieldset-margin: em-calc(18 0) !default;
|
||||
|
||||
// We use these to style the legends when you use them
|
||||
$legend-bg: #fff !default;
|
||||
$legend-font-weight: bold !default;
|
||||
$legend-padding: em-calc(0 3) !default;
|
||||
|
||||
// We use these to style the prefix and postfix input elements
|
||||
$input-prefix-bg: darken(#fff, 5%) !default;
|
||||
$input-prefix-border-color: darken(#fff, 20%) !default;
|
||||
$input-prefix-border-size: 1px !default;
|
||||
$input-prefix-border-type: solid !default;
|
||||
$input-prefix-overflow: hidden !default;
|
||||
$input-prefix-font-color: #333 !default;
|
||||
$input-prefix-font-color-alt: #fff !default;
|
||||
|
||||
// We use these to style the error states for inputs and labels
|
||||
$input-error-message-padding: em-calc(6 4) !default;
|
||||
$input-error-message-top: 0;
|
||||
$input-error-message-font-size: em-calc(12) !default;
|
||||
$input-error-message-font-weight: bold !default;
|
||||
$input-error-message-font-color: #fff !default;
|
||||
$input-error-message-font-color-alt: #333 !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;
|
||||
|
||||
//
|
||||
// Form 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 {
|
||||
-moz-border-radius-bottom#{$opposite-direction}: 0;
|
||||
-moz-border-radius-top#{$opposite-direction}: 0;
|
||||
-webkit-border-bottom-#{$opposite-direction}-radius: 0;
|
||||
-webkit-border-top-#{$opposite-direction}-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
input.column,
|
||||
input.columns,
|
||||
textarea.column,
|
||||
textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
|
||||
}
|
||||
|
||||
// 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: $input-border-width $input-border-style $input-border-color;
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $input-box-shadow;
|
||||
}
|
||||
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) - em-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;
|
||||
}
|
||||
|
||||
// Disabled background input background color
|
||||
&[disabled] { background-color: $input-disabled-bg; }
|
||||
}
|
||||
|
||||
// We use this mixin to create form labels
|
||||
@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;
|
||||
margin-bottom: $form-label-bottom-margin;
|
||||
}
|
||||
|
||||
// Alignment options
|
||||
@if $alignment == right {
|
||||
float: none;
|
||||
text-align: right;
|
||||
}
|
||||
@else if $alignment == inline {
|
||||
margin: 0 0 $form-spacing 0;
|
||||
padding: $form-spacing / 2 + em-calc($input-border-width * 2) 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: ($form-label-font-size + ($form-spacing * 1.5) - em-calc(1));
|
||||
line-height: ($form-label-font-size + ($form-spacing * 1.5) - em-calc(1));
|
||||
}
|
||||
|
||||
// We use this mixin to create prefix label styles
|
||||
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
border-color: darken($bg, 10%);
|
||||
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 $is-button {
|
||||
padding-#{$default-float}: 0;
|
||||
padding-#{$opposite-direction}: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
line-height: em-calc(34);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to create postfix label styles
|
||||
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
border-color: darken($bg, 15%);
|
||||
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 $is-button {
|
||||
padding-#{$default-float}: 0;
|
||||
padding-#{$opposite-direction}: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
line-height: em-calc(34);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to style fieldsets
|
||||
@mixin fieldset {
|
||||
border: $fieldset-border-style $fieldset-border-width $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}: em-calc(-3);
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to control border and background color of error inputs
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this simple mixin to style labels for error inputs
|
||||
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
||||
|
||||
// We use this mixin to create error message styles
|
||||
@mixin form-error-message($bg:$alert-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;
|
||||
|
||||
// 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; }
|
||||
}
|
||||
|
||||
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||
@if $include-html-form-classes != false {
|
||||
/* 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: capitalize;
|
||||
color: lighten($form-label-font-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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,false); @include postfix(false,true); }
|
||||
.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
|
||||
|
||||
.prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
|
||||
.postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
|
||||
.prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
|
||||
.postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
|
||||
|
||||
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
|
||||
span.prefix,label.prefix { @include prefix();
|
||||
&.radius { @include radius(0); @include side-radius(left, $global-radius); }
|
||||
}
|
||||
span.postfix,label.postfix { @include postfix();
|
||||
&.radius { @include radius(0); @include side-radius(right, $global-radius); }
|
||||
}
|
||||
|
||||
/* Input groups will automatically style first and last elements of the group */
|
||||
.input-group {
|
||||
&.radius {
|
||||
&>*:first-child, &>*:first-child * {
|
||||
@include side-radius($default-float, $global-radius);
|
||||
}
|
||||
&>*:last-child, &>*:last-child * {
|
||||
@include side-radius($opposite-direction, $global-radius);
|
||||
}
|
||||
}
|
||||
&.round {
|
||||
&>*:first-child, &>*:first-child * {
|
||||
@include side-radius($default-float, $button-round);
|
||||
}
|
||||
&>*:last-child, &>*:last-child * {
|
||||
@include side-radius($opposite-direction, $button-round);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* We use this to get basic styling on all basic form elements */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="week"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="time"],
|
||||
input[type="url"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
@include form-element;
|
||||
@if not $input-include-glowing-effect {
|
||||
@include single-transition(all, 0.15s, linear);
|
||||
}
|
||||
}
|
||||
|
||||
/* Adjust margin for form elements below */
|
||||
input[type="file"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
select {
|
||||
margin: 0 0 $form-spacing 0;
|
||||
}
|
||||
|
||||
/* Normalize file input width */
|
||||
input[type="file"] {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* We add basic fieldset styling */
|
||||
fieldset {
|
||||
@include fieldset;
|
||||
}
|
||||
|
||||
/* Error Handling */
|
||||
|
||||
[data-abide] {
|
||||
.error small.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 {
|
||||
@include form-error-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label,
|
||||
label.error {
|
||||
@include form-label-error-color;
|
||||
}
|
||||
|
||||
> small,
|
||||
small.error {
|
||||
@include form-error-message;
|
||||
}
|
||||
|
||||
span.error-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
input.error,
|
||||
textarea.error {
|
||||
@include form-error-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.error select {
|
||||
@include form-error-color;
|
||||
}
|
||||
|
||||
label.error { @include form-label-error-color; }
|
||||
|
||||
}
|
||||
@@ -1,363 +0,0 @@
|
||||
//
|
||||
// Global Foundation Mixins
|
||||
//
|
||||
|
||||
$experimental: true !default;
|
||||
|
||||
// We use this to control border radius.
|
||||
@mixin radius($radius:$global-radius) {
|
||||
@if $radius {
|
||||
@if $experimental {
|
||||
-webkit-border-radius: $radius;
|
||||
}
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to create equal side border radius on elements.
|
||||
@mixin side-radius($side, $radius:$global-radius) {
|
||||
@if $side == left {
|
||||
@if $experimental {
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
}
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@else if $side == right {
|
||||
@if $experimental {
|
||||
-moz-border-radius-topright: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
}
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
@else if $side == top {
|
||||
@if $experimental {
|
||||
-moz-border-radius-topright: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
}
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@else if $side == bottom {
|
||||
@if $experimental {
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
}
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// We can control whether or not we have inset shadows edges.
|
||||
@mixin inset-shadow($active:true) {
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||
}
|
||||
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||
|
||||
@if $active { &:active {
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
|
||||
}
|
||||
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
||||
}
|
||||
|
||||
// We use this to add transitions to elements
|
||||
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
||||
@if $experimental {
|
||||
-webkit-transition: $property $speed $ease;
|
||||
-moz-transition: $property $speed $ease;
|
||||
}
|
||||
transition: $property $speed $ease;
|
||||
}
|
||||
|
||||
// We use this to add box-sizing across browser prefixes
|
||||
@mixin box-sizing($type:border-box) {
|
||||
@if $experimental {
|
||||
-moz-box-sizing: $type;
|
||||
-webkit-box-sizing: $type;
|
||||
}
|
||||
box-sizing: $type;
|
||||
}
|
||||
|
||||
// We use this to create equilateral triangles
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to do clear floats
|
||||
@mixin clearfix() {
|
||||
*zoom:1;
|
||||
&:before, &:after { content: " "; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
|
||||
// We use this to add a glowing effect to block elements
|
||||
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
|
||||
@if $experimental {
|
||||
-webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
|
||||
-moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
|
||||
}
|
||||
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
|
||||
|
||||
&:#{$selector} {
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: 0 0 5px $glowing-effect-color;
|
||||
-moz-box-shadow: 0 0 5px $glowing-effect-color;
|
||||
}
|
||||
box-shadow: 0 0 5px $glowing-effect-color;
|
||||
border-color: $glowing-effect-color;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Foundation Variables
|
||||
//
|
||||
|
||||
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
||||
// for compatibility with brower-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 effect the grid breakpoints,
|
||||
// set $em-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: 150% !default;
|
||||
|
||||
// This is the default html and body font-size for the base em value.
|
||||
$em-base: 16px !default;
|
||||
|
||||
// It strips the unit of measure and returns it
|
||||
@function strip-unit($num) {
|
||||
@return $num / ($num * 0 + 1);
|
||||
}
|
||||
|
||||
// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of em's.
|
||||
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported
|
||||
// em-calc(10 20 30px 40);
|
||||
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
|
||||
// em-calc((10, 20, 30, 40px));
|
||||
// Optionally call with a different base (eg: 8px) to calculate em.
|
||||
// em-calc(16px 32px 48px, 8px);
|
||||
// If you require to comma separate your list
|
||||
// em-calc((16px, 32px, 48), 8px);
|
||||
|
||||
@function convert-to-em($value, $base-value: $em-base) {
|
||||
$value: strip-unit($value) / strip-unit($base-value) * 1em;
|
||||
@if ($value == 0em) { $value: 0; } // Turn 0em into 0
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function em-calc($values, $base-value: $em-base) {
|
||||
$max: length($values);
|
||||
|
||||
@if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }
|
||||
|
||||
$emValues: ();
|
||||
@for $i from 1 through $max {
|
||||
$emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
|
||||
}
|
||||
@return $emValues;
|
||||
}
|
||||
|
||||
// Support for the old syntax
|
||||
|
||||
@function emCalc($values){
|
||||
@return em-calc($values);
|
||||
}
|
||||
|
||||
// Maybe you want to create rems with pixels
|
||||
// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
|
||||
// @function remCalc($pxWidth) {
|
||||
// @return $pxWidth / $rem-base * 1rem;
|
||||
// }
|
||||
|
||||
// We use these to control various global styles
|
||||
$body-bg: #fff !default;
|
||||
$body-font-color: #222 !default;
|
||||
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
||||
$body-font-weight: normal !default;
|
||||
$body-font-style: normal !default;
|
||||
|
||||
// We use this to control font-smoothing
|
||||
$font-smoothing: subpixel-antialiased !default;
|
||||
|
||||
// We use these to control text direction settings
|
||||
$text-direction: ltr !default;
|
||||
|
||||
// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
|
||||
$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 as default colors throughout
|
||||
$primary-color: #2ba6cb !default;
|
||||
$secondary-color: #e9e9e9 !default;
|
||||
$alert-color: #c60f13 !default;
|
||||
$success-color: #5da423 !default;
|
||||
|
||||
// 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;
|
||||
|
||||
// Media Queries
|
||||
$small-screen: 768px !default;
|
||||
$medium-screen: 1280px !default;
|
||||
$large-screen: 1440px !default;
|
||||
|
||||
$screen: "only screen" !default;
|
||||
$small: "only screen and (min-width: #{$small-screen})" !default;
|
||||
$medium: "only screen and (min-width:#{$medium-screen})" !default;
|
||||
$large: "only screen and (min-width:#{$large-screen})" !default;
|
||||
$landscape: "only screen and (orientation: landscape)" !default;
|
||||
$portrait: "only screen and (orientation: portrait)" !default;
|
||||
|
||||
// Used to provide media query values for javascript components.
|
||||
meta.foundation-mq-small {
|
||||
font-family: $small;
|
||||
width: $small-screen;
|
||||
}
|
||||
|
||||
meta.foundation-mq-medium {
|
||||
font-family: $medium;
|
||||
width: $medium-screen;
|
||||
}
|
||||
|
||||
meta.foundation-mq-large {
|
||||
font-family: $large;
|
||||
width: $large-screen;
|
||||
}
|
||||
|
||||
//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
|
||||
$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;
|
||||
|
||||
|
||||
@if $include-html-global-classes {
|
||||
|
||||
// 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: 1; // Set to $base-line-height to take on browser default of 150%
|
||||
position: relative;
|
||||
cursor: $cursor-default-value;
|
||||
}
|
||||
|
||||
a:hover { cursor: $cursor-pointer-value; }
|
||||
|
||||
// Grid Defaults to get images and embeds to work properly
|
||||
img,
|
||||
object,
|
||||
embed { max-width: 100%; height: auto; }
|
||||
|
||||
object,
|
||||
embed { height: 100%; }
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
#map_canvas,
|
||||
.map_canvas {
|
||||
img,
|
||||
embed,
|
||||
object { max-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Miscellaneous useful HTML classes
|
||||
.left { float: left !important; }
|
||||
.right { float: right !important; }
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
.hide { display: none; }
|
||||
|
||||
// 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 on the Mac.
|
||||
.antialiased { -webkit-font-smoothing: antialiased; }
|
||||
|
||||
// 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%; }
|
||||
|
||||
}
|
||||
@@ -1,214 +0,0 @@
|
||||
//
|
||||
// @version
|
||||
// 4.3.0
|
||||
//
|
||||
// @title
|
||||
// Grid
|
||||
//
|
||||
// @description
|
||||
// With a default "small-#" grid, a 640-1024px "medium-#" grid, and a 1024+ "large-#" grid, we've got you covered for any layout you can think of.
|
||||
//
|
||||
|
||||
//
|
||||
// Grid Variables
|
||||
//
|
||||
$include-html-grid-classes: true !default;
|
||||
$row-width: em-calc(1000) !default;
|
||||
$column-gutter: em-calc(30) !default;
|
||||
$total-columns: 12 !default;
|
||||
|
||||
//
|
||||
// Grid Calc Function
|
||||
//
|
||||
@function gridCalc($colNumber, $totalColumns) {
|
||||
@return percentage(($colNumber / $totalColumns));
|
||||
}
|
||||
|
||||
// Right and Left "auto" for grid
|
||||
%right-auto { #{$opposite-direction}: auto; }
|
||||
%left-auto { #{$default-float}: auto; }
|
||||
|
||||
//
|
||||
// Grid Mixins
|
||||
//
|
||||
|
||||
// Create default, nested, and collapsed rows
|
||||
@mixin grid-row($behavior: false) {
|
||||
|
||||
// use @include grid-row(nest); to include a nested row
|
||||
@if $behavior == nest {
|
||||
margin-#{$default-float}: -($column-gutter/2);
|
||||
margin-#{$opposite-direction}: -($column-gutter/2);
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// use @include grid-row(collapse); to collapsed a container row margins
|
||||
@else if $behavior == collapse {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
max-width: $row-width;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
||||
@else if $behavior == nest-collapse {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// use @include grid-row; to use a container row
|
||||
@else {
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: $row-width;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
||||
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false) {
|
||||
|
||||
// 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: gridCalc($columns, $total-columns);
|
||||
|
||||
// If last column, float naturally instead of to the right
|
||||
@if $last-column { float: $opposite-direction; }
|
||||
}
|
||||
|
||||
// If offset, calculate appropriate margins
|
||||
@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
|
||||
|
||||
// Source Ordering, adds left/right depending on which you use.
|
||||
@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
|
||||
@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
|
||||
|
||||
// If centered, get rid of float and add appropriate margins
|
||||
@if $center {
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
@if $float {
|
||||
@if $float == left or $float == true { float: $default-float; }
|
||||
@else if $float == right { float: $opposite-direction; }
|
||||
@else { float: none; }
|
||||
}
|
||||
|
||||
// This helps us not need to repeat "position:relative" everywehere
|
||||
@if $include-position-relative { position: relative; }
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-grid-classes != false {
|
||||
/* Grid HTML Classes */
|
||||
.row {
|
||||
@include grid-row;
|
||||
|
||||
&.collapse {
|
||||
.column,
|
||||
.columns { @include grid-column($collapse:true); }
|
||||
}
|
||||
|
||||
.row { @include grid-row($behavior:nest);
|
||||
&.collapse { @include grid-row($behavior:nest-collapse); }
|
||||
}
|
||||
}
|
||||
|
||||
.column,
|
||||
.columns { @include grid-column($columns:$total-columns, $include-position-relative: true); }
|
||||
|
||||
@media only screen {
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 0 through $total-columns - 2 {
|
||||
.small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
[class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
|
||||
[class*="column"] + [class*="column"].end { float: $default-float; }
|
||||
|
||||
.column.small-centered,
|
||||
.columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $small-screen) {
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 1 through $total-columns - 1 {
|
||||
.medium-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
|
||||
.medium-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
|
||||
}
|
||||
|
||||
.column.medium-centered,
|
||||
.columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
|
||||
.column.medium-uncentered,
|
||||
.columns.medium-uncentered {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
float: $default-float !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $medium-screen) {
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 1 through $total-columns - 1 {
|
||||
.large-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
|
||||
.large-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
|
||||
}
|
||||
|
||||
.column.large-centered,
|
||||
.columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
|
||||
.column.large-uncentered,
|
||||
.columns.large-uncentered {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
float: $default-float !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
//
|
||||
// Grid Variables
|
||||
//
|
||||
$include-html-grid-classes: $include-html-classes !default;
|
||||
|
||||
$row-width: em-calc(1000) !default;
|
||||
$column-gutter: em-calc(30) !default;
|
||||
$total-columns: 12 !default;
|
||||
|
||||
//
|
||||
// Grid Function
|
||||
//
|
||||
|
||||
@function gridCalc($colNumber, $totalColumns) {
|
||||
@return percentage(($colNumber / $totalColumns));
|
||||
}
|
||||
|
||||
//
|
||||
// Grid Mixins
|
||||
//
|
||||
|
||||
// For creating container, nested, and collapsed rows.
|
||||
@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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
||||
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true) {
|
||||
|
||||
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: gridCalc($columns, $total-columns);
|
||||
|
||||
// If last column, float naturally instead of to the right
|
||||
@if $last-column { float: $opposite-direction; }
|
||||
}
|
||||
|
||||
// If offset, calculate appropriate margins
|
||||
@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
|
||||
|
||||
// Source Ordering, adds left/right depending on which you use.
|
||||
@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
|
||||
@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
|
||||
|
||||
// If centered, get rid of float and add appropriate margins
|
||||
@if $center {
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
@if $float {
|
||||
@if $float == left or $float == true { float: $default-float; }
|
||||
@else if $float == right { float: $opposite-direction; }
|
||||
@else { float: none; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-grid-classes != false {
|
||||
/* Grid HTML Classes */
|
||||
.row {
|
||||
@include grid-row;
|
||||
|
||||
&.collapse {
|
||||
> .column,
|
||||
> .columns { @include grid-column($collapse:true); }
|
||||
|
||||
.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); }
|
||||
|
||||
@media only screen {
|
||||
|
||||
.column,
|
||||
.columns { @include grid-column($columns:false); }
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 0 through $total-columns - 2 {
|
||||
.small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
[class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
|
||||
[class*="column"] + [class*="column"].end { float: $default-float; }
|
||||
|
||||
.column.small-centered,
|
||||
.columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
}
|
||||
|
||||
/* Styles for screens that are atleast 768px; */
|
||||
@media #{$small} {
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 1 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); }
|
||||
}
|
||||
|
||||
.column.large-centered,
|
||||
.columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
|
||||
.column.large-uncentered,
|
||||
.columns.large-uncentered {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
float: $default-float !important;
|
||||
}
|
||||
|
||||
.column.large-uncentered.opposite,
|
||||
.columns.large-uncentered.opposite {
|
||||
float: $opposite-direction !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
//
|
||||
// Inline List 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: em-calc(17) !default;
|
||||
$inline-list-default-float-margin: em-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 elments within list items
|
||||
$inline-list-children-display: block !default;
|
||||
|
||||
//
|
||||
// Inline List 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}: em-calc(22);
|
||||
display: $inline-list-display;
|
||||
&>* { display: $inline-list-children-display; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-inline-list-classes != false {
|
||||
|
||||
/* Inline Lists */
|
||||
.inline-list {
|
||||
@include inline-list();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
//
|
||||
// Joyride Variables
|
||||
//
|
||||
$include-html-joyride-classes: $include-html-classes !default;
|
||||
|
||||
// Controlling default Joyride styles
|
||||
$joyride-tip-bg: rgb(0,0,0) !default;
|
||||
$joyride-tip-default-width: 300px !default;
|
||||
$joyride-tip-padding: em-calc(18 20 24) !default;
|
||||
$joyride-tip-border: solid 1px #555 !default;
|
||||
$joyride-tip-radius: 4px !default;
|
||||
$joyride-tip-position-offset: 22px !default;
|
||||
|
||||
// Here, we're setting the tip dont styles
|
||||
$joyride-tip-font-color: #fff !default;
|
||||
$joyride-tip-font-size: em-calc(14) !default;
|
||||
$joyride-tip-header-weight: bold !default;
|
||||
|
||||
// This changes the nub size
|
||||
$joyride-tip-nub-size: 14px !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: #666 !default;
|
||||
|
||||
// This changes up the styles for the close button
|
||||
$joyride-tip-close-color: #777 !default;
|
||||
$joyride-tip-close-size: 30px !default;
|
||||
$joyride-tip-close-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.
|
||||
|
||||
@if $include-html-joyride-classes != false {
|
||||
|
||||
/* 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: 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; }
|
||||
}
|
||||
|
||||
/* 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: inset $joyride-tip-nub-size;
|
||||
|
||||
&.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: em-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}: em-calc(17);
|
||||
bottom: em-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: #eee !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: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
z-index: 102;
|
||||
@if $experimental {
|
||||
-moz-box-shadow: 0 0 30px #ffffff;
|
||||
-webkit-box-shadow: 0 0 15px #ffffff;
|
||||
}
|
||||
box-shadow: 0 0 15px #ffffff;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Styles for screens that are atleast 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
//
|
||||
// Keystroke Variables
|
||||
//
|
||||
$include-html-type-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control text styles.
|
||||
$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
|
||||
$keystroke-font-size: em-calc(14) !default;
|
||||
$keystroke-font-color: #222 !default;
|
||||
$keystroke-font-color-alt: #fff !default;
|
||||
$keystroke-function-factor: 7% !default;
|
||||
|
||||
// We use this to control keystroke padding.
|
||||
$keystroke-padding: em-calc(2 4 0) !default;
|
||||
|
||||
// We use these to control background and border styles.
|
||||
$keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
|
||||
$keystroke-border-style: solid !default;
|
||||
$keystroke-border-width: 1px !default;
|
||||
$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
|
||||
$keystroke-radius: $global-radius !default;
|
||||
|
||||
//
|
||||
// Keystroke Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create keystroke styles.
|
||||
@mixin keystroke($bg:$keystroke-bg) {
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
border-color: darken($bg, $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;
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-type-classes != false {
|
||||
|
||||
/* Keystroke Characters */
|
||||
.keystroke,
|
||||
kbd {
|
||||
@include keystroke;
|
||||
@include radius($keystroke-radius);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
//
|
||||
// Label Variables
|
||||
//
|
||||
$include-html-label-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to style the labels
|
||||
$label-padding: em-calc(3 10 4) !default;
|
||||
$label-radius: $global-radius !default;
|
||||
|
||||
// We use these to style the label text
|
||||
$label-font-sizing: em-calc(14) !default;
|
||||
$label-font-weight: bold !default;
|
||||
$label-font-color: #333 !default;
|
||||
$label-font-color-alt: #fff !default;
|
||||
|
||||
//
|
||||
// Label Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a default label base.
|
||||
@mixin label-base {
|
||||
font-weight: $label-font-weight;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// We use this mixin to add label size styles.
|
||||
@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
|
||||
@if $padding { padding: $padding; }
|
||||
@if $text-size { font-size: $text-size; }
|
||||
}
|
||||
|
||||
// We use this mixin to add label styles.
|
||||
@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); }
|
||||
|
||||
}
|
||||
|
||||
// We use this to add close buttons to alerts
|
||||
@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);
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-label-classes != false {
|
||||
|
||||
/* Labels */
|
||||
.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); }
|
||||
&.success { @include label-style($success-color); }
|
||||
&.secondary { @include label-style($secondary-color); }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
//
|
||||
// Magellan Variables
|
||||
//
|
||||
$include-html-magellan-classes: $include-html-classes !default;
|
||||
|
||||
$magellan-bg: #fff !default;
|
||||
$magellan-padding: 10px !default;
|
||||
|
||||
@if $include-html-magellan-classes != false {
|
||||
|
||||
[data-magellan-expedition] {
|
||||
background: $magellan-bg;
|
||||
z-index: 50;
|
||||
min-width: 100%;
|
||||
padding: $magellan-padding;
|
||||
|
||||
.sub-nav {
|
||||
margin-bottom: 0;
|
||||
dd { margin-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,340 +0,0 @@
|
||||
// Orbit Variables
|
||||
//
|
||||
$include-html-orbit-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the caption styles
|
||||
$orbit-container-bg: #f5f5f5 !default;
|
||||
$orbit-caption-bg: rgba(0,0,0,0.6) !default;
|
||||
$orbit-caption-font-color: #fff !default;
|
||||
$orbit-caption-font-size: em-calc(14) !default;
|
||||
$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
|
||||
$orbit-caption-padding: em-calc(10,14) !default;
|
||||
$orbit-caption-height: auto !default;
|
||||
|
||||
// We use these to control the left/right nav styles
|
||||
$orbit-nav-bg: rgba(0,0,0,0.6) !default;
|
||||
$orbit-nav-bg-hover: rgba(0,0,0,0.6) !default;
|
||||
$orbit-nav-arrow-color: #fff !default;
|
||||
$orbit-nav-arrow-color-hover: #ccc !default;
|
||||
|
||||
// We use these to control the timer styles
|
||||
$orbit-timer-bg: rgba(0,0,0,0.6) !default;
|
||||
$orbit-timer-show-progress-bar: true !default;
|
||||
|
||||
// We use these to control the bullet nav styles
|
||||
$orbit-bullet-nav-color: #999 !default;
|
||||
$orbit-bullet-nav-color-active: #555 !default;
|
||||
$orbit-bullet-radius: em-calc(12) !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: #fff !default;
|
||||
$orbit-slide-number-padding: em-calc(5) !default;
|
||||
|
||||
// Graceful Loading Wrapper and preloader
|
||||
$wrapper-class: "slideshow-wrapper" !default;
|
||||
$preloader-class: "preloader" !default;
|
||||
|
||||
|
||||
@if $include-html-orbit-classes != false {
|
||||
|
||||
@if $experimental {
|
||||
@-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 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: #555 #fff;
|
||||
@include radius(1000px);
|
||||
@if $experimental {
|
||||
-webkit-animation-name: rotate;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-name: rotate;
|
||||
-moz-animation-duration: 1.5s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-timing-function: linear;
|
||||
-o-animation-name: rotate;
|
||||
-o-animation-duration: 1.5s;
|
||||
-o-animation-iteration-count: infinite;
|
||||
-o-animation-timing-function: linear;
|
||||
}
|
||||
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;
|
||||
|
||||
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: 10px 14px;
|
||||
font-size: em-calc(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 10px;
|
||||
#{$opposite-direction}: 10px;
|
||||
height: 6px;
|
||||
width: 100px;
|
||||
z-index: 10;
|
||||
.orbit-progress {
|
||||
@if $orbit-timer-show-progress-bar {
|
||||
height: 100%;
|
||||
background-color: $orbit-timer-bg;
|
||||
display: block;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
// Play button
|
||||
& > span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$opposite-direction}: 0;
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
border: solid 4px #000;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Pause button
|
||||
&.paused {
|
||||
& > span {
|
||||
#{$opposite-direction}: -6px;
|
||||
top: 9px;
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
border: inset 8px;
|
||||
border-right-style: solid;
|
||||
border-color: transparent transparent transparent #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&: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: 50%;
|
||||
margin-top: -25px;
|
||||
background-color: $orbit-nav-bg;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
text-indent: -9999px !important;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background-color: $orbit-nav-bg-hover;
|
||||
}
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: inset 16px;
|
||||
}
|
||||
}
|
||||
.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}: -8px;
|
||||
}
|
||||
&:hover > span {
|
||||
border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbit-bullets {
|
||||
margin: 0 auto 30px auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: $orbit-bullet-radius;
|
||||
height: $orbit-bullet-radius;
|
||||
background: $orbit-bullet-nav-color;
|
||||
float: $default-float;
|
||||
margin-#{$opposite-direction}: 6px;
|
||||
border: solid 1px $orbit-bullet-nav-color-active;
|
||||
@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 #{$small} {
|
||||
|
||||
.touch {
|
||||
.orbit-container {
|
||||
.orbit-prev,
|
||||
.orbit-next { display: inherit; }
|
||||
}
|
||||
|
||||
.orbit-bullets { display: block; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: #{$small-screen}) {
|
||||
.orbit-stack-on-small {
|
||||
.orbit-slides-container {height: auto !important;}
|
||||
.orbit-slides-container > * {
|
||||
position: relative;
|
||||
margin-left: 0% !important;
|
||||
}
|
||||
.orbit-timer,
|
||||
.orbit-next,
|
||||
.orbit-prev,
|
||||
.orbit-bullets {display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
//
|
||||
// Pagination Variables
|
||||
//
|
||||
$include-html-nav-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the pagination container
|
||||
$pagination-height: em-calc(24) !default;
|
||||
$pagination-margin: em-calc(-5) !default;
|
||||
|
||||
// We use these to set the list-item properties
|
||||
$pagination-li-float: $default-float;
|
||||
$pagination-li-height: em-calc(24) !default;
|
||||
$pagination-li-font-color: #222 !default;
|
||||
$pagination-li-font-size: em-calc(14) !default;
|
||||
$pagination-li-margin: em-calc(5) !default;
|
||||
|
||||
// We use these for the pagination anchor links
|
||||
$pagination-link-pad: em-calc(1 7 1) !default;
|
||||
$pagination-link-font-color: #999 !default;
|
||||
$pagination-link-active-bg: darken(#fff, 10%) !default;
|
||||
|
||||
// We use these for disabled anchor links
|
||||
$pagination-link-unavailable-cursor: default !default;
|
||||
$pagination-link-unavailable-font-color: #999 !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: #fff !default;
|
||||
$pagination-link-current-font-weight: bold !default;
|
||||
$pagination-link-current-cursor: default !default;
|
||||
$pagination-link-current-active-bg: $primary-color !default;
|
||||
|
||||
//
|
||||
// Pagination Mixin
|
||||
//
|
||||
|
||||
// Style the pagination container. Currently only used when centering elements.
|
||||
@mixin pagination-container($center:false) {
|
||||
@if $center { text-align: center; }
|
||||
}
|
||||
|
||||
// Style unavailable list items
|
||||
@mixin pagination-unavailable-item() {
|
||||
a {
|
||||
cursor: $pagination-link-unavailable-cursor;
|
||||
color: $pagination-link-unavailable-font-color;
|
||||
}
|
||||
&:hover a,
|
||||
& a:focus { background: $pagination-link-unavailable-bg-active; }
|
||||
}
|
||||
|
||||
// Style the current list item. Do not assume that the current item has
|
||||
// an anchor <a> element.
|
||||
@mixin pagination-current-item($has-anchor: true) {
|
||||
@if $has-anchor {
|
||||
a {
|
||||
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;
|
||||
|
||||
&:hover,
|
||||
&:focus { background: $pagination-link-current-active-bg; }
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to set the properties for the creating Foundation pagination
|
||||
@mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
|
||||
|
||||
@if $base-style {
|
||||
display: block;
|
||||
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 {
|
||||
display: block;
|
||||
padding: $pagination-link-pad;
|
||||
color: $pagination-link-font-color;
|
||||
}
|
||||
|
||||
&:hover a,
|
||||
a: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-html-nav-classes != false {
|
||||
|
||||
// Detach the nested class selectors from the containing
|
||||
// ul and div elements in order to support more flexibility
|
||||
// for external code that uses the Sass mixins.
|
||||
|
||||
/* Default Pagination */
|
||||
ul.pagination {
|
||||
@include pagination;
|
||||
}
|
||||
|
||||
/* Pagination centred wrapper */
|
||||
.pagination-centered {
|
||||
@include pagination-container(true);
|
||||
|
||||
ul.pagination {
|
||||
@include pagination(true, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
//
|
||||
// Panel Variables
|
||||
//
|
||||
$include-html-panel-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the background and border styles
|
||||
$panel-bg: darken(#fff, 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: 10% !default;
|
||||
$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
|
||||
|
||||
// We use these to set default inner padding and bottom margin
|
||||
$panel-margin-bottom: em-calc(20) !default;
|
||||
$panel-padding: em-calc(20) !default;
|
||||
|
||||
// We use these to set default font colors
|
||||
$panel-font-color: #333 !default;
|
||||
$panel-font-color-alt: #fff !default;
|
||||
|
||||
$panel-header-adjust: true !default;
|
||||
$callout-panel-link-color: #fff !default;
|
||||
//
|
||||
// Panel Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create panels.
|
||||
@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: darken($bg, $panel-function-factor);
|
||||
margin-bottom: $panel-margin-bottom;
|
||||
padding: $padding;
|
||||
|
||||
background: $bg;
|
||||
|
||||
// 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% and $bg == blue { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
|
||||
@else if $bg-lightness >= 50% { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
|
||||
@else { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
|
||||
|
||||
// reset header line-heights for panels
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1; margin-bottom: em-calc(20) / 2;
|
||||
&.subheader { line-height: 1.4; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only include these classes if the option exists
|
||||
@if $include-html-panel-classes != false {
|
||||
|
||||
/* Panels */
|
||||
.panel { @include panel;
|
||||
|
||||
&.callout {
|
||||
@include panel($primary-color);
|
||||
@include inset-shadow($active:false);
|
||||
a {
|
||||
color: $callout-panel-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.radius {
|
||||
@include panel($bg:false);
|
||||
@include radius;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
//
|
||||
// Pricing Table Variables
|
||||
//
|
||||
$include-html-pricing-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control the border color
|
||||
$price-table-border: solid 1px #ddd !default;
|
||||
|
||||
// We use this to control the bottom margin of the pricing table
|
||||
$price-table-margin-bottom: em-calc(20) !default;
|
||||
|
||||
// We use these to control the title styles
|
||||
$price-title-bg: #ddd !default;
|
||||
$price-title-padding: em-calc(15 20) !default;
|
||||
$price-title-align: center !default;
|
||||
$price-title-color: #333 !default;
|
||||
$price-title-weight: bold !default;
|
||||
$price-title-size: em-calc(16) !default;
|
||||
|
||||
// We use these to control the price styles
|
||||
$price-money-bg: #eee !default;
|
||||
$price-money-padding: em-calc(15 20) !default;
|
||||
$price-money-align: center !default;
|
||||
$price-money-color: #333 !default;
|
||||
$price-money-weight: normal !default;
|
||||
$price-money-size: em-calc(20) !default;
|
||||
|
||||
// We use these to control the description styles
|
||||
$price-bg: #fff !default;
|
||||
$price-desc-color: #777 !default;
|
||||
$price-desc-padding: em-calc(15) !default;
|
||||
$price-desc-align: center !default;
|
||||
$price-desc-font-size: em-calc(12) !default;
|
||||
$price-desc-weight: normal !default;
|
||||
$price-desc-line-height: 1.4 !default;
|
||||
$price-desc-bottom-border: dotted 1px #ddd !default;
|
||||
|
||||
// We use these to control the list item styles
|
||||
$price-item-color: #333 !default;
|
||||
$price-item-padding: em-calc(15) !default;
|
||||
$price-item-align: center !default;
|
||||
$price-item-font-size: em-calc(14) !default;
|
||||
$price-item-weight: normal !default;
|
||||
$price-item-bottom-border: dotted 1px #ddd !default;
|
||||
|
||||
// We use these to control the CTA area styles
|
||||
$price-cta-bg: #f5f5f5 !default;
|
||||
$price-cta-align: center !default;
|
||||
$price-cta-padding: em-calc(20 20 0) !default;
|
||||
|
||||
//
|
||||
// Pricing Table 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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-pricing-classes != false {
|
||||
|
||||
/* 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; }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
//
|
||||
// Progress Bar Variables
|
||||
//
|
||||
$include-html-media-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to se the prog bar height
|
||||
$progress-bar-height: em-calc(25) !default;
|
||||
$progress-bar-color: transparent !default;
|
||||
|
||||
// We use these to control the border styles
|
||||
$progress-bar-border-color: darken(#fff, 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: em-calc(2) !default;
|
||||
$progress-bar-margin-bottom: em-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;
|
||||
|
||||
|
||||
//
|
||||
// Progress Bar 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;
|
||||
}
|
||||
|
||||
@mixin progress-meter($bg:$progress-meter-color) {
|
||||
background: $bg;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-media-classes != false {
|
||||
|
||||
/* 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($global-radius);
|
||||
.meter { @include radius($global-radius - 1); }
|
||||
}
|
||||
|
||||
&.round { @include radius(1000px);
|
||||
.meter { @include radius(999px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
//
|
||||
// Reveal Variables
|
||||
//
|
||||
|
||||
$include-html-reveal-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the style of the reveal overlay.
|
||||
$reveal-overlay-bg: rgba(#000, .45) !default;
|
||||
$reveal-overlay-bg-old: #000 !default;
|
||||
|
||||
// We use these to control the style of the modal itself.
|
||||
$reveal-modal-bg: #fff !default;
|
||||
$reveal-position-top: 50px !default;
|
||||
$reveal-default-width: 80% !default;
|
||||
$reveal-modal-padding: em-calc(20) !default;
|
||||
$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
|
||||
|
||||
// We use these to style the reveal close button
|
||||
$reveal-close-font-size: em-calc(22) !default;
|
||||
$reveal-close-top: em-calc(8) !default;
|
||||
$reveal-close-side: em-calc(11) !default;
|
||||
$reveal-close-color: #aaa !default;
|
||||
$reveal-close-weight: bold !default;
|
||||
|
||||
// We use these to control the modal border
|
||||
$reveal-border-style: solid !default;
|
||||
$reveal-border-width: 1px !default;
|
||||
$reveal-border-color: #666 !default;
|
||||
|
||||
$reveal-modal-class: "reveal-modal" !default;
|
||||
$close-reveal-modal-class: "close-reveal-modal" !default;
|
||||
|
||||
//
|
||||
// Reveal Mixins
|
||||
//
|
||||
|
||||
// We use this to create the reveal background overlay styles
|
||||
@mixin reveal-bg {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $reveal-overlay-bg-old;
|
||||
background: $reveal-overlay-bg;
|
||||
z-index: 98;
|
||||
display: none;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
}
|
||||
|
||||
// We use this mixin to create the structure of a reveal modal
|
||||
@mixin reveal-modal-base($base-style:true, $width:$reveal-default-width) {
|
||||
@if $base-style {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
position: absolute;
|
||||
#{$default-float}: 50%;
|
||||
z-index: 99;
|
||||
height: auto;
|
||||
|
||||
// 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 {
|
||||
margin-#{$default-float}: -($width / 2);
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to style the reveal modal defaults
|
||||
@mixin reveal-modal-style($bg:$reveal-modal-bg, $padding:$reveal-modal-padding, $border:true, $border-style:$reveal-border-style, $border-width:$reveal-border-width, $border-color:$reveal-border-color, $box-shadow:true, $top-offset:$reveal-position-top) {
|
||||
|
||||
@if $bg { background-color: $bg; }
|
||||
@if $padding { 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 {
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $reveal-box-shadow;
|
||||
}
|
||||
box-shadow: $reveal-box-shadow;
|
||||
}
|
||||
|
||||
@if $top-offset { top: $top-offset; }
|
||||
}
|
||||
|
||||
// We use this to create a close button for the reveal modal
|
||||
@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;
|
||||
}
|
||||
|
||||
@if $include-html-reveal-classes != false {
|
||||
|
||||
// Reveal Modals
|
||||
.reveal-modal-bg { @include reveal-bg; }
|
||||
|
||||
.#{$reveal-modal-class} {
|
||||
@include reveal-modal-base;
|
||||
@include reveal-modal-style;
|
||||
|
||||
.#{$close-reveal-modal-class} { @include reveal-close; }
|
||||
}
|
||||
|
||||
// Large Screen Styles
|
||||
@media #{$small} {
|
||||
|
||||
.#{$reveal-modal-class} {
|
||||
@include reveal-modal-style(false, em-calc(30), false, $box-shadow: false, $top-offset: em-calc(100));
|
||||
|
||||
&.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%); }
|
||||
}
|
||||
}
|
||||
|
||||
// Reveal Print Styles
|
||||
@media print {
|
||||
.#{$reveal-modal-class} {background: #fff !important;}
|
||||
}
|
||||
}
|
||||
@@ -1,391 +0,0 @@
|
||||
//
|
||||
// Section Variables
|
||||
//
|
||||
$include-html-section-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to set padding and hover factor
|
||||
$section-title-padding: em-calc(15) !default;
|
||||
$section-content-padding: em-calc(15) !default;
|
||||
$section-function-factor: 10% !default;
|
||||
|
||||
// These style the titles
|
||||
$section-title-color: #333 !default;
|
||||
$section-title-color-active: #333 !default;
|
||||
$section-title-bg: #efefef !default;
|
||||
$section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
|
||||
$section-title-bg-active-tabs: #fff !default;
|
||||
$section-title-bg-hover: darken($section-title-bg, $section-function-factor / 2) !default;
|
||||
|
||||
// Want to control border size, here ya go!
|
||||
$section-border-size: 1px !default;
|
||||
$section-border-style: solid !default;
|
||||
$section-border-color: #ccc !default;
|
||||
|
||||
// Font controls
|
||||
$section-font-size: em-calc(14) !default;
|
||||
|
||||
// Control the color of the background and some size options
|
||||
$section-content-bg: #fff !default;
|
||||
$section-vertical-nav-min-width: em-calc(200) !default;
|
||||
$section-vertical-tabs-title-width: em-calc(200) !default;
|
||||
$section-bottom-margin: em-calc(20) !default;
|
||||
|
||||
$title-selector: ".title" !default;
|
||||
$content-selector: ".content" !default;
|
||||
$active-region-selector: ".active" !default;
|
||||
|
||||
//
|
||||
// Section Mixins
|
||||
//
|
||||
|
||||
// basic styles for sections.js: positions
|
||||
@mixin section-container-base($section-type: accordion) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: $section-bottom-margin;
|
||||
|
||||
@if $section-type != accordion {
|
||||
&:not([data-section-resized]):not([data-section-small-style]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@if $section-type != tabs {
|
||||
&[data-section-small-style] {
|
||||
width: 100% !important; // override inline style
|
||||
|
||||
& > [data-section-region], & > section, & > .section {
|
||||
padding: 0 !important; // override inline style
|
||||
margin: 0 !important; // override inline style
|
||||
& > [data-section-title], & > #{$title-selector}{
|
||||
width: 100% !important; // override inline style
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// foundation styles for sections
|
||||
@mixin section-container-style($section-type: accordion) {
|
||||
|
||||
// Accordion container border styles
|
||||
@if $section-type == accordion {
|
||||
border-top: $section-border-size $section-border-style $section-border-color;
|
||||
}
|
||||
|
||||
// Tabs container border styles
|
||||
@else if $section-type == tabs {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Vertical Tabs container border styles
|
||||
@else if $section-type == vertical-tabs {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Vertical Nav container border styles
|
||||
@else if $section-type == vertical-nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Horizontal Nav container border styles
|
||||
@else if $section-type == horizontal-nav {
|
||||
background: $section-title-bg;
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
//basic styles for section.js: section region positions
|
||||
@mixin section-base($section-type: accordion) {
|
||||
|
||||
& > [data-section-title], & > #{$title-selector} {
|
||||
margin-bottom: 0;
|
||||
a {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
& > [data-section-content], & > #{$content-selector} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#{$active-region-selector} {
|
||||
& > [data-section-content], & > #{$content-selector} { display: block; }
|
||||
}
|
||||
|
||||
&:not(#{$active-region-selector}) {
|
||||
padding: 0 !important; //override inline style
|
||||
}
|
||||
|
||||
// Style for when Accordion
|
||||
@if $section-type == accordion {
|
||||
margin: 0;
|
||||
& > [data-section-title], & > #{$title-selector} { width: 100%; }
|
||||
}
|
||||
|
||||
// Styles for when tabs
|
||||
@else if $section-type == tabs {
|
||||
|
||||
& > [data-section-title], & > #{$title-selector} {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for when Vertical Tabs
|
||||
@else if $section-type == vertical-tabs {
|
||||
|
||||
& > [data-section-title], & > #{$title-selector} {
|
||||
position: absolute;
|
||||
top:0;
|
||||
#{$default-float}: 0;
|
||||
width: $section-vertical-tabs-title-width;
|
||||
}
|
||||
|
||||
&#{$active-region-selector} {
|
||||
padding-#{$default-float}: $section-vertical-tabs-title-width;
|
||||
|
||||
& > [data-section-title], & > #{$title-selector} {
|
||||
width: $section-vertical-tabs-title-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for when Vertical Nav
|
||||
@else if $section-type == vertical-nav {
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
& > [data-section-title], & > #{$title-selector} {
|
||||
position: static;
|
||||
width: auto;
|
||||
a { display: block; }
|
||||
}
|
||||
|
||||
& > [data-section-content], & > #{$content-selector} {
|
||||
position: absolute;
|
||||
top:0;
|
||||
#{$default-float}: 0;
|
||||
z-index: 999;
|
||||
min-width: $section-vertical-nav-min-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for when Horizontal Nav
|
||||
@else if $section-type == horizontal-nav {
|
||||
|
||||
position: relative;
|
||||
float: #{$default-float};
|
||||
|
||||
& > [data-section-title], & > #{$title-selector} {
|
||||
position: static;
|
||||
width: auto;
|
||||
a { display: block; }
|
||||
}
|
||||
|
||||
& > [data-section-content], & > #{$content-selector} {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
z-index: 999;
|
||||
min-width: $section-vertical-nav-min-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//foundation styles for section regions
|
||||
@mixin section-style($section-type:accordion, $title-selector: $title-selector, $content-selector: $content-selector, $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color-active, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
|
||||
|
||||
// Default Styles
|
||||
& > #{$title-selector} {
|
||||
background-color: $title-bg;
|
||||
cursor: $cursor-pointer-value;
|
||||
border: $section-border-style $section-border-size $section-border-color;
|
||||
a {
|
||||
padding: $title-padding;
|
||||
color: $title-color;
|
||||
font-size: $title-font-size;
|
||||
background: none;
|
||||
}
|
||||
&:hover { background-color: $title-bg-hover; }
|
||||
}
|
||||
|
||||
& > #{$content-selector} {
|
||||
padding: $content-padding;
|
||||
background-color: $content-bg;
|
||||
border: $section-border-style $section-border-size $section-border-color;
|
||||
|
||||
&>*:last-child { margin-bottom: 0; }
|
||||
&>*:first-child { padding-top: 0; }
|
||||
&>*:last-child:not(.flex-video) { padding-bottom: 0; }
|
||||
}
|
||||
|
||||
&#{$active-region-selector} {
|
||||
& > #{$title-selector} {
|
||||
background: $title-bg-active;
|
||||
a { color: $title-color-active; }
|
||||
}
|
||||
}
|
||||
|
||||
&:not(#{$active-region-selector}) {
|
||||
padding: 0 !important; //override inline style
|
||||
}
|
||||
|
||||
// Style for when Accordion
|
||||
@if $section-type == accordion {
|
||||
& > #{$title-selector} { border-top: none; }
|
||||
}
|
||||
|
||||
// Styles for when tabs
|
||||
@else if $section-type == tabs {
|
||||
|
||||
&#{$active-region-selector} > #{$title-selector} {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for when Vertical Tabs
|
||||
@else if $section-type == vertical-tabs {
|
||||
|
||||
&#{$active-region-selector} {
|
||||
padding-#{$default-float}: $section-vertical-tabs-title-width - em-calc(1px);
|
||||
|
||||
& > #{$title-selector} {
|
||||
background-color: $title-bg-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin section-container($base-style:true, $section-type:accordion) {
|
||||
@include section-container-base($section-type);
|
||||
@include section-container-style($section-type);
|
||||
}
|
||||
|
||||
@mixin section($section-type:accordion, $title-selector:$title-selector, $content-selector: $content-selector, $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color-active, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
|
||||
@include section-base($section-type);
|
||||
@include section-style($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color);
|
||||
}
|
||||
|
||||
@if $include-html-section-classes != false {
|
||||
|
||||
/* Sections */
|
||||
|
||||
[data-section=''], [data-section='auto'], .section-container.auto,
|
||||
[data-section='vertical-tabs'], .section-container.vertical-tabs,
|
||||
[data-section='vertical-nav'], .section-container.vertical-nav,
|
||||
[data-section='horizontal-nav'], .section-container.horizontal-nav,
|
||||
[data-section='accordion'], .section-container.accordion {
|
||||
@include section-container-base(accordion);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(accordion);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.auto,
|
||||
.section-container.vertical-tabs,
|
||||
.section-container.vertical-nav,
|
||||
.section-container.horizontal-nav,
|
||||
.section-container.accordion {
|
||||
@include section-container-style(accordion);
|
||||
& > section, & > .section {
|
||||
@include section-style(accordion);
|
||||
}
|
||||
}
|
||||
|
||||
[data-section='tabs'], .section-container.tabs {
|
||||
@include section-container-base(tabs);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(tabs);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.tabs {
|
||||
@include section-container-style(tabs);
|
||||
& > section, & > .section {
|
||||
@include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
|
||||
[data-section=''], [data-section='auto'], .section-container.auto {
|
||||
@include section-container-base(tabs);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(tabs);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.auto {
|
||||
@include section-container-style(tabs);
|
||||
& > section, & > .section {
|
||||
@include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
|
||||
}
|
||||
}
|
||||
|
||||
[data-section='vertical-tabs'], .section-container.vertical-tabs {
|
||||
@include section-container-base(vertical-tabs);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(vertical-tabs);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.vertical-tabs {
|
||||
@include section-container-style(vertical-tabs);
|
||||
& > section, & > .section {
|
||||
@include section-style(vertical-tabs);
|
||||
}
|
||||
}
|
||||
|
||||
[data-section='vertical-nav'], .section-container.vertical-nav {
|
||||
@include section-container-base(vertical-nav);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(vertical-nav);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.vertical-nav {
|
||||
@include section-container-style(vertical-nav);
|
||||
& > section, & > .section {
|
||||
@include section-style(vertical-nav);
|
||||
}
|
||||
}
|
||||
|
||||
[data-section='horizontal-nav'], .section-container.horizontal-nav {
|
||||
@include section-container-base(horizontal-nav);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(horizontal-nav);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.horizontal-nav {
|
||||
@include section-container-style(horizontal-nav);
|
||||
& > section, & > .section {
|
||||
@include section-style(horizontal-nav);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Change all variations to expanded accordions when no JS is detected.
|
||||
.no-js {
|
||||
[data-section], .section-container {
|
||||
@include section-container-base(accordion);
|
||||
& > section, & > .section, & > [data-section-region] {
|
||||
@include section-base(accordion);
|
||||
}
|
||||
}
|
||||
.section-container {
|
||||
@include section-container-style(accordion);
|
||||
& > section, & > .section {
|
||||
@include section-style(accordion);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
//
|
||||
// Side Nav Variables
|
||||
//
|
||||
$include-html-nav-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control padding.
|
||||
$side-nav-padding: em-calc(14 0) !default;
|
||||
|
||||
// We use these to control list styles.
|
||||
$side-nav-list-type: none !default;
|
||||
$side-nav-list-position: inside !default;
|
||||
$side-nav-list-margin: em-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: lighten(#000, 30%) !default;
|
||||
$side-nav-font-size: em-calc(14) !default;
|
||||
$side-nav-font-weight: bold !default;
|
||||
|
||||
// We use these to control border styles
|
||||
$side-nav-divider-size: 1px !default;
|
||||
$side-nav-divider-style: solid !default;
|
||||
$side-nav-divider-color: darken(#fff, 10%) !default;
|
||||
|
||||
|
||||
//
|
||||
// Side Nav Mixins
|
||||
//
|
||||
|
||||
|
||||
// We use this to style the side-nav
|
||||
@mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: $side-nav-padding;
|
||||
list-style-type: $side-nav-list-type;
|
||||
list-style-position: $side-nav-list-position;
|
||||
|
||||
li {
|
||||
margin: $side-nav-list-margin;
|
||||
font-size: $font-size;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
&.active > a:first-child {
|
||||
color: $side-nav-link-color-active;
|
||||
font-weight: $side-nav-font-weight;
|
||||
}
|
||||
|
||||
&.divider {
|
||||
border-top: $side-nav-divider-size $side-nav-divider-style;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top-color: $divider-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes != false {
|
||||
|
||||
/* Side Nav */
|
||||
.side-nav { @include side-nav; }
|
||||
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
//
|
||||
// Split Button Variables
|
||||
//
|
||||
$include-html-button-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control different shared styles for Split Buttons
|
||||
$split-button-function-factor: 15% !default;
|
||||
$split-button-pip-color: #fff !default;
|
||||
$split-button-pip-color-alt: #333 !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-tny * 9 !default;
|
||||
$split-button-span-width-tny: $button-tny * 6.5 !default;
|
||||
$split-button-pip-size-tny: $button-tny !default;
|
||||
$split-button-pip-top-tny: $button-tny * 2 !default;
|
||||
$split-button-pip-default-float-tny: em-calc(-5) !default;
|
||||
|
||||
// We use these to control small split buttons
|
||||
$split-button-padding-sml: $button-sml * 7 !default;
|
||||
$split-button-span-width-sml: $button-sml * 5 !default;
|
||||
$split-button-pip-size-sml: $button-sml !default;
|
||||
$split-button-pip-top-sml: $button-sml * 1.5 !default;
|
||||
$split-button-pip-default-float-sml: em-calc(-9) !default;
|
||||
|
||||
// We use these to control medium split buttons
|
||||
$split-button-padding-med: $button-med * 6.4 !default;
|
||||
$split-button-span-width-med: $button-med * 4 !default;
|
||||
$split-button-pip-size-med: $button-med - em-calc(3) !default;
|
||||
$split-button-pip-top-med: $button-med * 1.5 !default;
|
||||
$split-button-pip-default-float-med: em-calc(-9) !default;
|
||||
|
||||
// We use these to control large split buttons
|
||||
$split-button-padding-lrg: $button-lrg * 6 !default;
|
||||
$split-button-span-width-lrg: $button-lrg * 3.75 !default;
|
||||
$split-button-pip-size-lrg: $button-lrg - em-calc(6) !default;
|
||||
$split-button-pip-top-lrg: $button-lrg + em-calc(5) !default;
|
||||
$split-button-pip-default-float-lrg: em-calc(-9) !default;
|
||||
|
||||
|
||||
//
|
||||
// Split Button Mixin
|
||||
//
|
||||
|
||||
// We use this mixin to create split buttons that build upon the button mixins
|
||||
@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
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-style: inset;
|
||||
|
||||
#{$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: darken($span-border, $split-button-function-factor);
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
&:before {
|
||||
border-top-style: solid;
|
||||
border-width: $split-button-pip-size-tny;
|
||||
top: $split-button-pip-top-tny;
|
||||
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;
|
||||
&:before {
|
||||
border-top-style: solid;
|
||||
border-width: $split-button-pip-size-sml;
|
||||
top: $split-button-pip-top-sml;
|
||||
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;
|
||||
&:before {
|
||||
border-top-style: solid;
|
||||
border-width: $split-button-pip-size-med;
|
||||
top: $split-button-pip-top-med;
|
||||
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;
|
||||
&:before {
|
||||
border-top-style: solid;
|
||||
border-width: $split-button-pip-size-lrg;
|
||||
top: $split-button-pip-top-lrg;
|
||||
margin-#{$default-float}: $split-button-pip-default-float-lrg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Control the color of the triangle pip
|
||||
@if $pip-color {
|
||||
span:before { border-color: $pip-color transparent transparent transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-button-classes != false {
|
||||
|
||||
/* Split Buttons */
|
||||
.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: 2em; }
|
||||
|
||||
&.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); }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
//
|
||||
// Sub Nav Variables
|
||||
//
|
||||
$include-html-nav-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control margin and padding
|
||||
$sub-nav-list-margin: em-calc(-4 0 18) !default;
|
||||
$sub-nav-list-padding-top: em-calc(4) !default;
|
||||
|
||||
// We use this to control the definition
|
||||
$sub-nav-font-size: em-calc(14) !default;
|
||||
$sub-nav-font-color: #999 !default;
|
||||
$sub-nav-font-weight: normal !default;
|
||||
$sub-nav-text-decoration: none !default;
|
||||
$sub-nav-border-radius: 1000px !default;
|
||||
|
||||
// We use these to control the active item styles
|
||||
$sub-nav-active-font-weight: bold !default;
|
||||
$sub-nav-active-bg: $primary-color !default;
|
||||
$sub-nav-active-color: #fff !default;
|
||||
$sub-nav-active-padding: em-calc(3 9) !default;
|
||||
$sub-nav-active-cursor: default !default;
|
||||
|
||||
$sub-nav-item-divider: "" !default;
|
||||
$sub-nav-item-divider-margin: emCalc(12) !default;
|
||||
|
||||
//
|
||||
// Sub Nav Mixins
|
||||
//
|
||||
|
||||
@mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
|
||||
display: block;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
margin: $sub-nav-list-margin;
|
||||
padding-top: $sub-nav-list-padding-top;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
margin-#{$default-float}: em-calc(-9);
|
||||
|
||||
dt,
|
||||
dd,
|
||||
li {
|
||||
float: $default-float;
|
||||
display: inline;
|
||||
margin-#{$default-float}: em-calc(9);
|
||||
margin-bottom: em-calc(10);
|
||||
font-weight: $sub-nav-font-weight;
|
||||
font-size: $font-size;
|
||||
|
||||
a {
|
||||
color: $font-color;
|
||||
text-decoration: $sub-nav-text-decoration; }
|
||||
|
||||
&.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;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes != false {
|
||||
|
||||
/* Side Nav */
|
||||
.sub-nav { @include sub-nav; }
|
||||
|
||||
}
|
||||
@@ -1,266 +0,0 @@
|
||||
//
|
||||
// Switch Variables
|
||||
//
|
||||
$include-html-form-classes: $include-html-classes !default;
|
||||
|
||||
// Controlling border styles and background colors for the switch container
|
||||
$switch-border-color: darken(#fff, 20%) !default;
|
||||
$switch-border-style: solid !default;
|
||||
$switch-border-width: 1px !default;
|
||||
$switch-bg: #fff !default;
|
||||
|
||||
// We use these to control the switch heights for our default classes
|
||||
$switch-height-tny: 22px !default;
|
||||
$switch-height-sml: 28px !default;
|
||||
$switch-height-med: 36px !default;
|
||||
$switch-height-lrg: 44px !default;
|
||||
$switch-bottom-margin: em-calc(20) !default;
|
||||
|
||||
// We use these to control default font sizes for our classes.
|
||||
$switch-font-size-tny: 11px !default;
|
||||
$switch-font-size-sml: 12px !default;
|
||||
$switch-font-size-med: 14px !default;
|
||||
$switch-font-size-lrg: 17px !default;
|
||||
$switch-label-side-padding: 6px !default;
|
||||
|
||||
// We use these to style the switch-paddle
|
||||
$switch-paddle-bg: #fff !default;
|
||||
$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%) !default;
|
||||
$switch-paddle-border-color: darken($switch-paddle-bg, 35%) !default;
|
||||
$switch-paddle-border-width: 1px !default;
|
||||
$switch-paddle-border-style: solid !default;
|
||||
$switch-paddle-transition-speed: .1s !default;
|
||||
$switch-paddle-transition-ease: ease-out !default;
|
||||
$switch-positive-color: lighten($success-color, 50%) !default;
|
||||
$switch-negative-color: #f5f5f5 !default;
|
||||
|
||||
// Outline Style for tabbing through switches
|
||||
$switch-label-outline: 1px dotted #888 !default;
|
||||
|
||||
|
||||
//
|
||||
// Switch Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create the base styles for our switch element.
|
||||
@mixin switch-base($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) {
|
||||
|
||||
// Default position and structure for switch container.
|
||||
position: relative;
|
||||
padding: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-style: $switch-border-style;
|
||||
border-width: $switch-border-width;
|
||||
margin-bottom: $switch-bottom-margin;
|
||||
|
||||
// Default label styles for type and transition
|
||||
label {
|
||||
position: relative;
|
||||
#{$default-float}: 0;
|
||||
z-index: 2;
|
||||
float: $default-float;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
text-align: $default-float;
|
||||
|
||||
// Transition for the switch label to follow paddle
|
||||
@include single-transition(all, $transition-speed, $transition-ease);
|
||||
}
|
||||
|
||||
// So that we don't need to recreate the form with any JS, we use the
|
||||
// existing radio button, but we cleverly position and hide it.
|
||||
input {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-appearance: none;
|
||||
|
||||
// Hover and focus styles for the paddle
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: $cursor-pointer-value;
|
||||
}
|
||||
}
|
||||
|
||||
// The toggle area for radio switches. We call is a paddle.
|
||||
span:last-child {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
#{$default-float}: -1px;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
padding: 0;
|
||||
border-width: $switch-paddle-border-width;
|
||||
border-style: $switch-paddle-border-style;
|
||||
|
||||
// Transition for the switch paddle
|
||||
@include single-transition(all, $transition-speed, $transition-ease);
|
||||
}
|
||||
|
||||
// When a label isn't :checked, we hide it as it slides away.
|
||||
input:not(:checked) + label { opacity: 0; }
|
||||
|
||||
// Controlling the position of the labels as they are toggled.
|
||||
input:checked { display: none !important; }
|
||||
input { #{$default-float}: 0; display: block !important; }
|
||||
|
||||
// Left Label alignment and position changes, including fixes for while inside a custom form
|
||||
input:first-of-type + label,
|
||||
input:first-of-type + span + label { #{$default-float}: -50%; }
|
||||
input:first-of-type:checked + label,
|
||||
input:first-of-type:checked + span + label { #{$default-float}: 0%; }
|
||||
|
||||
// Right Label alignment and position changes, including fixes for while inside a custom form
|
||||
input:last-of-type + label,
|
||||
input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
|
||||
input:last-of-type:checked + label,
|
||||
input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
|
||||
|
||||
// Hiding custom form spans since we auto-create them
|
||||
span.custom { display: none !important; }
|
||||
|
||||
// Bugfix for older Webkit, including mobile Webkit. Adapted from:
|
||||
// http://css-tricks.com/webkit-sibling-bug/
|
||||
@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:480px) {
|
||||
@if $experimental { -webkit-animation: webkitSiblingBugfix infinite 1s; }
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
|
||||
@if $experimental { -webkit-animation: none 0; }
|
||||
}
|
||||
|
||||
form.custom & .hidden-field {
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to create the size styles for switches.
|
||||
@mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
|
||||
|
||||
height: em-calc($height);
|
||||
|
||||
label {
|
||||
padding: em-calc(0, $switch-label-side-padding);
|
||||
line-height: $line-height;
|
||||
font-size: em-calc($font-size);
|
||||
}
|
||||
|
||||
input {
|
||||
// Move the paddle to the right position
|
||||
&:first-of-type:checked ~ span:last-child {
|
||||
#{$default-float}: 100%;
|
||||
margin-#{$default-float}: em-calc(-$height + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
width: em-calc($height);
|
||||
height: em-calc($height);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to add color and other fanciness to the switches.
|
||||
@mixin switch-style($paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
|
||||
|
||||
@if $base-style {
|
||||
background: $switch-bg;
|
||||
border-color: $switch-border-color;
|
||||
|
||||
span:last-child {
|
||||
border-color: darken($paddle-bg, 30%);
|
||||
background: $paddle-bg;
|
||||
@if $experimental {
|
||||
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||
}
|
||||
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||
|
||||
// Building the alternating colored sides of the switch
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
||||
1000px 0 0 1000px $positive-color,
|
||||
-2px 0 10px 0 rgba(0,0,0,0.07),
|
||||
-1000px 0 0 1000px $negative-color;
|
||||
}
|
||||
box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
||||
1000px 0 0 980px $positive-color,
|
||||
-2px 0 10px 0 rgba(0,0,0,0.07),
|
||||
-1000px 0 0 1000px $negative-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
span:last-child {
|
||||
background: $paddle-bg;
|
||||
@if $experimental {
|
||||
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||
}
|
||||
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active { background: transparent; }
|
||||
}
|
||||
|
||||
// Setting up the radius for switches
|
||||
@if $radius == true {
|
||||
@include radius(4px);
|
||||
span:last-child { @include radius(3px); }
|
||||
}
|
||||
@else if $radius {
|
||||
@include radius($radius);
|
||||
span:last-child { @include radius($radius - 1px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this to quickly create switches with a single mixin
|
||||
@mixin switch($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease, $height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em, $paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
|
||||
@include switch-base($transition-speed, $transition-ease);
|
||||
@include switch-size($height, $font-size, $line-height);
|
||||
@include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
|
||||
}
|
||||
|
||||
@if $include-html-form-classes != false {
|
||||
|
||||
/* Foundation Switches */
|
||||
@media only screen {
|
||||
|
||||
// Containing element for the radio switch
|
||||
div.switch {
|
||||
@include switch;
|
||||
|
||||
// Large radio switches
|
||||
&.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
|
||||
|
||||
// Small radio switches
|
||||
&.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1em); }
|
||||
|
||||
// Tiny radio switches
|
||||
&.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9em); }
|
||||
|
||||
// Add a radius to the switch
|
||||
&.radius { @include radius(4px);
|
||||
span:last-child{ @include radius(3px); }
|
||||
}
|
||||
|
||||
// Make the switch completely round, like a pill
|
||||
&.round { @include radius(1000px);
|
||||
span:last-child { @include radius(999px); }
|
||||
label { padding: em-calc(0 $switch-label-side-padding + 3); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $experimental { @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } } }
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
//
|
||||
// Table Variables
|
||||
//
|
||||
$include-html-table-classes: $include-html-classes !default;
|
||||
|
||||
// These control the background color for the table and even rows
|
||||
$table-bg: #fff !default;
|
||||
$table-even-row-bg: #f9f9f9 !default;
|
||||
|
||||
// These control the table cell border style
|
||||
$table-border-style: solid !default;
|
||||
$table-border-size: 1px !default;
|
||||
$table-border-color: #ddd !default;
|
||||
|
||||
// These control the table head styles
|
||||
$table-head-bg: #f5f5f5 !default;
|
||||
$table-head-font-size: em-calc(14) !default;
|
||||
$table-head-font-color: #222 !default;
|
||||
$table-head-font-weight: bold !default;
|
||||
$table-head-padding: em-calc(8 10 10) !default;
|
||||
|
||||
// These control the row padding and font styles
|
||||
$table-row-padding: em-calc(9 10) !default;
|
||||
$table-row-font-size: em-calc(14) !default;
|
||||
$table-row-font-color: #222 !default;
|
||||
$table-line-height: em-calc(18) !default;
|
||||
|
||||
// These are for controlling the display and margin of tables
|
||||
$table-display: table-cell !default;
|
||||
$table-margin-bottom: em-calc(20) !default;
|
||||
|
||||
|
||||
//
|
||||
// Table Mixin
|
||||
//
|
||||
@mixin table {
|
||||
background: $table-bg;
|
||||
margin-bottom: $table-margin-bottom;
|
||||
border: $table-border-style $table-border-size $table-border-color;
|
||||
|
||||
thead,
|
||||
tfoot {
|
||||
background: $table-head-bg;
|
||||
font-weight: $table-head-font-weight;
|
||||
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
padding: $table-head-padding;
|
||||
font-size: $table-head-font-size;
|
||||
color: $table-head-font-color;
|
||||
text-align: $default-float;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
padding: $table-row-padding;
|
||||
font-size: $table-row-font-size;
|
||||
color: $table-row-font-color;
|
||||
}
|
||||
|
||||
&.even,
|
||||
&.alt,
|
||||
&:nth-of-type(even) { background: $table-even-row-bg; }
|
||||
}
|
||||
|
||||
thead tr th,
|
||||
tfoot tr th,
|
||||
tbody tr td,
|
||||
tr td,
|
||||
tfoot tr td { display: $table-display; line-height: $table-line-height; }
|
||||
}
|
||||
|
||||
@if $include-html-table-classes {
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
@include table;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
//
|
||||
// Image Thumbnail 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: #fff !default;
|
||||
$thumb-box-shadow: 0 0 0 1px rgba(#000,.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;
|
||||
|
||||
//
|
||||
// Image Thumbnail Mixins
|
||||
//
|
||||
|
||||
// We use this to create image thumbnail styles.
|
||||
@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;
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $box-shadow;
|
||||
}
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: $box-shadow-hover;
|
||||
}
|
||||
box-shadow: $box-shadow-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// If html classes are turned on we'll include these classes.
|
||||
@if $include-html-media-classes != false {
|
||||
|
||||
/* Image Thumbnails */
|
||||
.th {
|
||||
@include thumb;
|
||||
@include single-transition(all,$thumb-transition-speed,ease-out);
|
||||
|
||||
&.radius { @include radius($thumb-radius); }
|
||||
}
|
||||
a.th { display: inline-block; max-width:100%; }
|
||||
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
//
|
||||
// Tooltip Variables
|
||||
//
|
||||
$include-html-tooltip-classes: $include-html-classes !default;
|
||||
|
||||
$has-tip-border-bottom: dotted 1px #ccc !default;
|
||||
$has-tip-font-weight: bold !default;
|
||||
$has-tip-font-color: #333 !default;
|
||||
$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
|
||||
$has-tip-font-color-hover: $primary-color !default;
|
||||
$has-tip-cursor-type: help !default;
|
||||
|
||||
$tooltip-padding: em-calc(8) !default;
|
||||
$tooltip-bg: #000 !default;
|
||||
$tooltip-font-size: em-calc(15) !default;
|
||||
$tooltip-font-weight: bold !default;
|
||||
$tooltip-font-color: #fff !default;
|
||||
$tooltip-line-height: 1.3 !default;
|
||||
$tooltip-close-font-size: em-calc(10) !default;
|
||||
$tooltip-close-font-weight: normal !default;
|
||||
$tooltip-close-font-color: #888 !default;
|
||||
$tooltip-font-size-sml: em-calc(14) !default;
|
||||
$tooltip-radius: $global-radius !default;
|
||||
$tooltip-pip-size: 5px !default;
|
||||
|
||||
@if $include-html-tooltip-classes != false {
|
||||
|
||||
/* 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: 999;
|
||||
font-weight: $tooltip-font-weight;
|
||||
font-size: $tooltip-font-size;
|
||||
line-height: $tooltip-line-height;
|
||||
padding: $tooltip-padding;
|
||||
max-width: 85%;
|
||||
#{$default-float}: 50%;
|
||||
width: 100%;
|
||||
color: $tooltip-font-color;
|
||||
background: $tooltip-bg;
|
||||
@include radius($tooltip-radius);
|
||||
|
||||
&>.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);
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,570 +0,0 @@
|
||||
//
|
||||
// Top Bar Variables
|
||||
//
|
||||
$include-html-top-bar-classes: $include-html-classes !default;
|
||||
|
||||
// Background color for the top bar
|
||||
$topbar-bg-color: #111 !default;
|
||||
$topbar-bg: $topbar-bg-color !default;
|
||||
|
||||
// Height and margin
|
||||
$topbar-height: 45px !default;
|
||||
$topbar-margin-bottom: 0 !default;
|
||||
|
||||
// Control Input height for top bar
|
||||
$topbar-input-height: 2.45em !default;
|
||||
|
||||
// Controlling the styles for the title in the top bar
|
||||
$topbar-title-weight: bold !default;
|
||||
$topbar-title-font-size: em-calc(17) !default;
|
||||
|
||||
// Style the top bar dropdown elements
|
||||
$topbar-dropdown-bg: #222 !default;
|
||||
$topbar-dropdown-link-color: #fff !default;
|
||||
$topbar-dropdown-link-bg: lighten($topbar-bg-color, 5%) !default;
|
||||
$topbar-dropdown-toggle-size: 5px !default;
|
||||
$topbar-dropdown-toggle-color: #fff !default;
|
||||
$topbar-dropdown-toggle-alpha: 0.5 !default;
|
||||
|
||||
// Set the link colors and styles for top-level nav
|
||||
$topbar-link-color: #fff !default;
|
||||
$topbar-link-color-hover: #fff !default;
|
||||
$topbar-link-color-active: #fff !default;
|
||||
$topbar-link-weight: bold !default;
|
||||
$topbar-link-font-size: em-calc(13) !default;
|
||||
$topbar-link-hover-lightness: -30% !default; // Darken by 30%
|
||||
$topbar-link-bg-hover: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness) !default;
|
||||
$topbar-link-bg-active: darken($topbar-bg-color, 3%) !default;
|
||||
|
||||
|
||||
$topbar-dropdown-label-color: #555 !default;
|
||||
$topbar-dropdown-label-text-transform: uppercase !default;
|
||||
$topbar-dropdown-label-font-weight: bold !default;
|
||||
$topbar-dropdown-label-font-size: em-calc(10) !default;
|
||||
$topbar-dropdown-label-bg: lighten($topbar-bg-color, 5%) !default;
|
||||
|
||||
// Top menu icon styles
|
||||
$topbar-menu-link-transform: uppercase !default;
|
||||
$topbar-menu-link-font-size: em-calc(13) !default;
|
||||
$topbar-menu-link-weight: bold !default;
|
||||
$topbar-menu-link-color: #fff !default;
|
||||
$topbar-menu-icon-color: #fff !default;
|
||||
$topbar-menu-link-color-toggled: #888 !default;
|
||||
$topbar-menu-icon-color-toggled: #888 !default;
|
||||
|
||||
// Transitions and breakpoint styles
|
||||
$topbar-transition-speed: 300ms !default;
|
||||
// Using em-calc for the below breakpoint causes issues with top bar
|
||||
$topbar-breakpoint: 940px !default; // Change to 9999px for always mobile layout
|
||||
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
|
||||
|
||||
// Divider Styles
|
||||
$topbar-divider-border-bottom: solid 1px lighten($topbar-bg-color, 10%) !default;
|
||||
$topbar-divider-border-top: solid 1px darken($topbar-bg-color, 10%) !default;
|
||||
|
||||
// Sticky Class
|
||||
$topbar-sticky-class: ".sticky" !default;
|
||||
$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
|
||||
|
||||
@if $include-html-top-bar-classes != false {
|
||||
|
||||
/* 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; }
|
||||
|
||||
.button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
|
||||
|
||||
// Title Area
|
||||
.title-area {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: $topbar-height;
|
||||
margin: 0;
|
||||
font-size: $em-base;
|
||||
|
||||
h1 {
|
||||
line-height: $topbar-height;
|
||||
font-size: $topbar-title-font-size;
|
||||
margin: 0;
|
||||
a {
|
||||
font-weight: $topbar-title-weight;
|
||||
color: $topbar-link-color;
|
||||
width: 50%;
|
||||
display: block;
|
||||
padding: 0 $topbar-height / 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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-height / 3;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
}
|
||||
|
||||
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
|
||||
&.menu-icon {
|
||||
#{$opposite-direction}: $topbar-height / 3;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
padding-#{$default-float}: 40px;
|
||||
|
||||
a {
|
||||
text-indent: -48px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 33px;
|
||||
padding: 0;
|
||||
color: $topbar-menu-link-color;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
#{$opposite-direction}: 0;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 0;
|
||||
// Shh, don't tell, but box-shadows create the menu icon :)
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
||||
0 16px 0 1px $topbar-menu-icon-color,
|
||||
0 22px 0 1px $topbar-menu-icon-color;
|
||||
}
|
||||
box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
||||
0 16px 0 1px $topbar-menu-icon-color,
|
||||
0 22px 0 1px $topbar-menu-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
// Shh, don't tell, but box-shadows create the menu icon :)
|
||||
@if $experimental {
|
||||
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
||||
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
||||
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
||||
}
|
||||
box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
||||
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
||||
0 22px 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 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
background: $topbar-dropdown-bg;
|
||||
font-size: $em-base;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider,
|
||||
[role="separator"] {
|
||||
border-bottom: $topbar-divider-border-bottom;
|
||||
border-top: $topbar-divider-border-top;
|
||||
clear: both;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul li {
|
||||
& > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $topbar-link-color;
|
||||
padding: 12px 0 12px 0;
|
||||
padding-#{$default-float}: $topbar-height / 3;
|
||||
font-size: $topbar-link-font-size;
|
||||
font-weight: $topbar-link-weight;
|
||||
background: $topbar-dropdown-bg;
|
||||
|
||||
&.button {
|
||||
background: $primary-color;
|
||||
font-size: $topbar-link-font-size;
|
||||
padding-right: $topbar-height / 3;
|
||||
padding-left: $topbar-height / 3;
|
||||
&:hover {
|
||||
background: darken($primary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.button.secondary {
|
||||
background: $secondary-color;
|
||||
&:hover {
|
||||
background: darken($secondary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.button.success {
|
||||
background: $success-color;
|
||||
&:hover {
|
||||
background: darken($success-color, 10%);
|
||||
}
|
||||
}
|
||||
&.button.alert {
|
||||
background: $alert-color;
|
||||
&:hover {
|
||||
background: darken($alert-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Apply the hover link color when it has that class
|
||||
&:hover > a {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Add some extra padding for list items contains buttons
|
||||
.has-form { padding: $topbar-height / 3; }
|
||||
|
||||
// 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-height / 3;
|
||||
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
#{$opposite-direction}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.moved { position: static;
|
||||
& > .dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styling elements inside of dropdowns
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
#{$default-float}: 100%;
|
||||
top: 0;
|
||||
display: none;
|
||||
z-index: 99;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
padding: 8px $topbar-height / 3;
|
||||
&.parent-link {
|
||||
font-weight: $topbar-link-weight;
|
||||
}
|
||||
}
|
||||
|
||||
&.title h5 { margin-bottom: 0;
|
||||
a {
|
||||
color: $topbar-link-color;
|
||||
line-height: $topbar-height / 2;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 8px $topbar-height / 3 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element that controls breakpoint, no need to change this ever
|
||||
.top-bar-js-breakpoint {
|
||||
width: $topbar-breakpoint !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
.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 {
|
||||
line-height: 2em;
|
||||
font-size: em-calc(14);
|
||||
height: 2em;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
&.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: $topbar-link-bg-hover;
|
||||
color: $topbar-link-color-hover;
|
||||
}
|
||||
}
|
||||
a:not(.button) {
|
||||
padding: 0 $topbar-height / 3;
|
||||
line-height: $topbar-height;
|
||||
background: $topbar-bg;
|
||||
&:hover { background: $topbar-link-bg-hover; }
|
||||
}
|
||||
}
|
||||
|
||||
.has-dropdown {
|
||||
|
||||
@if($topbar-arrows){
|
||||
|
||||
& > a {
|
||||
padding-#{$opposite-direction}: $topbar-height / 3 + 20 !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 { display: none; }
|
||||
}
|
||||
|
||||
&.hover, &.not-click:hover {
|
||||
& > .dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown li.has-dropdown {
|
||||
& > a {
|
||||
&:after {
|
||||
border: none;
|
||||
content: "\00bb";
|
||||
top: 1em;
|
||||
margin-top: -7px;
|
||||
#{$opposite-direction}: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
#{$default-float}: 0;
|
||||
top: auto;
|
||||
background: transparent;
|
||||
min-width: 100%;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $topbar-dropdown-link-color;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
padding: 7px $topbar-height / 3;
|
||||
background: $topbar-dropdown-link-bg;
|
||||
}
|
||||
|
||||
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;
|
||||
border-#{$default-float}: $topbar-divider-border-top;
|
||||
clear: none;
|
||||
height: $topbar-height;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.has-form {
|
||||
background: $topbar-bg;
|
||||
padding: 0 $topbar-height / 3;
|
||||
height: $topbar-height;
|
||||
}
|
||||
|
||||
// Position overrides for ul.right
|
||||
ul.right {
|
||||
li .dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
li .dropdown { right: 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: $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 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,435 +0,0 @@
|
||||
//
|
||||
// Typography Variables
|
||||
//
|
||||
$include-html-type-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control header font styles
|
||||
$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
||||
$header-font-weight: bold !default;
|
||||
$header-font-style: normal !default;
|
||||
$header-font-color: #222 !default;
|
||||
$header-line-height: 1.4 !default;
|
||||
$header-top-margin: .2em !default;
|
||||
$header-bottom-margin: .5em !default;
|
||||
$header-text-rendering: optimizeLegibility !default;
|
||||
|
||||
// We use these to control header font sizes
|
||||
$h1-font-size: em-calc(44) !default;
|
||||
$h2-font-size: em-calc(37) !default;
|
||||
$h3-font-size: em-calc(27) !default;
|
||||
$h4-font-size: em-calc(23) !default;
|
||||
$h5-font-size: em-calc(18) !default;
|
||||
$h6-font-size: 1em !default;
|
||||
|
||||
// These control how subheaders are styled.
|
||||
$subheader-line-height: 1.4 !default;
|
||||
$subheader-font-color: lighten($header-font-color, 30%) !default;
|
||||
$subheader-font-weight: 300 !default;
|
||||
$subheader-top-margin: .2em !default;
|
||||
$subheader-bottom-margin: .5em !default;
|
||||
|
||||
// A general <small> styling
|
||||
$small-font-size: 60% !default;
|
||||
$small-font-color: lighten($header-font-color, 30%) !default;
|
||||
|
||||
// We use these to style paragraphs
|
||||
$paragraph-font-family: inherit !default;
|
||||
$paragraph-font-weight: normal !default;
|
||||
$paragraph-font-size: 1em !default;
|
||||
$paragraph-line-height: 1.6 !default;
|
||||
$paragraph-margin-bottom: em-calc(20) !default;
|
||||
$paragraph-aside-font-size: em-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 <code> tags
|
||||
$code-color: darken($alert-color, 15%) !default;
|
||||
$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
|
||||
$code-font-weight: bold !default;
|
||||
|
||||
// We use these to style anchors
|
||||
$anchor-text-decoration: none !default;
|
||||
$anchor-font-color: $primary-color !default;
|
||||
$anchor-font-color-hover: darken($primary-color, 5%) !default;
|
||||
|
||||
// We use these to style the <hr> element
|
||||
$hr-border-width: 1px !default;
|
||||
$hr-border-style: solid !default;
|
||||
$hr-border-color: #ddd !default;
|
||||
$hr-margin: em-calc(20) !default;
|
||||
|
||||
// We use these to style lists
|
||||
$list-style-position: outside !default;
|
||||
$list-side-margin: 0 !default;
|
||||
$list-side-margin-no-bullet: $list-side-margin;
|
||||
$list-nested-margin: em-calc(20) !default;
|
||||
$definition-list-header-weight: bold !default;
|
||||
$definition-list-header-margin-bottom: .3em !default;
|
||||
$definition-list-margin-bottom: em-calc(12) !default;
|
||||
|
||||
// We use these to style blockquotes
|
||||
$blockquote-font-color: lighten($header-font-color, 30%) !default;
|
||||
$blockquote-padding: em-calc(9 20 0 19) !default;
|
||||
$blockquote-border: 1px solid #ddd !default;
|
||||
$blockquote-cite-font-size: em-calc(13) !default;
|
||||
$blockquote-cite-font-color: lighten($header-font-color, 20%) !default;
|
||||
$blockquote-cite-link-color: $blockquote-cite-font-color !default;
|
||||
|
||||
// Acronym styles
|
||||
$acronym-underline: 1px dotted #ddd !default;
|
||||
|
||||
// We use these to control padding and margin
|
||||
$microformat-padding: em-calc(10 12) !default;
|
||||
$microformat-margin: em-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: #ddd !default;
|
||||
|
||||
// We use these to control full name font styles
|
||||
$microformat-fullname-font-weight: bold !default;
|
||||
$microformat-fullname-font-size: em-calc(15) !default;
|
||||
|
||||
// We use this to control the summary font styles
|
||||
$microformat-summary-font-weight: bold !default;
|
||||
|
||||
// We use this to control abbr padding
|
||||
$microformat-abbr-padding: em-calc(0 1) !default;
|
||||
|
||||
// We use this to control abbr font styles
|
||||
$microformat-abbr-font-weight: bold !default;
|
||||
$microformat-abbr-font-decoration: none !default;
|
||||
|
||||
|
||||
//
|
||||
// Typography Placeholders
|
||||
//
|
||||
|
||||
// These will throw a deprecation warning if used within a media query.
|
||||
%lead {
|
||||
font-size: $paragraph-font-size + em-calc(3.5);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
%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;
|
||||
}
|
||||
|
||||
@if $include-html-type-classes != false {
|
||||
|
||||
/* 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;
|
||||
direction: $text-direction;
|
||||
}
|
||||
|
||||
/* Default Link Styles */
|
||||
a {
|
||||
color: $anchor-font-color;
|
||||
text-decoration: $anchor-text-decoration;
|
||||
line-height: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus { color: $anchor-font-color-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 { @extend %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 - em-calc(3);
|
||||
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
color: $small-font-color;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { font-size: $h1-font-size - em-calc(10); }
|
||||
h2 { font-size: $h2-font-size - em-calc(10); }
|
||||
h3 { font-size: $h3-font-size - em-calc(5); }
|
||||
h4 { font-size: $h4-font-size - em-calc(5); }
|
||||
h5 { font-size: $h5-font-size; }
|
||||
h6 { font-size: $h6-font-size; }
|
||||
|
||||
.subheader { @extend %subheader; }
|
||||
|
||||
hr {
|
||||
border: $hr-border-style $hr-border-color;
|
||||
border-width: $hr-border-width 0 0;
|
||||
clear: both;
|
||||
margin: $hr-margin 0 ($hr-margin - em-calc(1));
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Helpful Typography Defaults */
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
font-size: $paragraph-font-size;
|
||||
line-height: $paragraph-line-height;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
list-style-position: $list-style-position;
|
||||
font-family: $paragraph-font-family;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-#{$default-float}: $list-side-margin;
|
||||
&.no-bullet { margin-#{$default-float}: $list-side-margin-no-bullet; }
|
||||
}
|
||||
|
||||
/* Unordered Lists */
|
||||
ul {
|
||||
li {
|
||||
ul,
|
||||
ol {
|
||||
margin-#{$default-float}: $list-nested-margin;
|
||||
margin-bottom: 0;
|
||||
font-size: 1em; /* Override nested font-size change */
|
||||
}
|
||||
}
|
||||
&.square,
|
||||
&.circle,
|
||||
&.disc {
|
||||
li ul { list-style: inherit; }
|
||||
}
|
||||
|
||||
&.square { list-style-type: square; }
|
||||
&.circle { list-style-type: circle; }
|
||||
&.disc { list-style-type: disc; }
|
||||
&.no-bullet { list-style: none; }
|
||||
}
|
||||
|
||||
/* Ordered Lists */
|
||||
ol {
|
||||
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;
|
||||
border-bottom: $acronym-underline;
|
||||
cursor: $cursor-help-value;
|
||||
}
|
||||
abbr {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* 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 #{$small} {
|
||||
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; }
|
||||
}
|
||||
|
||||
// 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: #000 !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 #999;
|
||||
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; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,322 +0,0 @@
|
||||
//
|
||||
// Foundation Visibility Classes
|
||||
//
|
||||
$include-html-visibility-classes: $include-html-classes !default;
|
||||
|
||||
@if $include-html-visibility-classes != false {
|
||||
|
||||
/* Foundation Visibility HTML Classes */
|
||||
.show-for-small,
|
||||
.show-for-medium-down,
|
||||
.show-for-large-down { display: inherit !important; }
|
||||
|
||||
.show-for-medium,
|
||||
.show-for-medium-up,
|
||||
.show-for-large,
|
||||
.show-for-large-up,
|
||||
.show-for-xlarge { display: none !important; }
|
||||
|
||||
.hide-for-medium,
|
||||
.hide-for-medium-up,
|
||||
.hide-for-large,
|
||||
.hide-for-large-up,
|
||||
.hide-for-xlarge { display: inherit !important; }
|
||||
|
||||
.hide-for-small,
|
||||
.hide-for-medium-down,
|
||||
.hide-for-large-down { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-cell !important; }
|
||||
}
|
||||
|
||||
/* Medium Displays: 768px - 1279px */
|
||||
@media #{$small} {
|
||||
.show-for-medium,
|
||||
.show-for-medium-up { display: inherit !important; }
|
||||
|
||||
.show-for-small { display: none !important; }
|
||||
|
||||
.hide-for-small { display: inherit !important; }
|
||||
|
||||
.hide-for-medium,
|
||||
.hide-for-medium-up { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Displays: 1280px - 1440px */
|
||||
@media #{$medium} {
|
||||
.show-for-large,
|
||||
.show-for-large-up { display: inherit !important; }
|
||||
|
||||
.show-for-medium,
|
||||
.show-for-medium-down { display: none !important; }
|
||||
|
||||
.hide-for-medium,
|
||||
.hide-for-medium-down { display: inherit !important; }
|
||||
|
||||
.hide-for-large,
|
||||
.hide-for-large-up { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* X-Large Displays: 1400px and up */
|
||||
@media #{$large} {
|
||||
.show-for-xlarge { display: inherit !important; }
|
||||
|
||||
.show-for-large,
|
||||
.show-for-large-down { display: none !important; }
|
||||
|
||||
.hide-for-large,
|
||||
.hide-for-large-down { display: inherit !important; }
|
||||
|
||||
.hide-for-xlarge { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Orientation targeting */
|
||||
.show-for-landscape,
|
||||
.hide-for-portrait { display: inherit !important; }
|
||||
.hide-for-landscape,
|
||||
.show-for-portrait { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table; }
|
||||
}
|
||||
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 visilbity for tables */
|
||||
table {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table; }
|
||||
}
|
||||
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 visilbity for tables */
|
||||
table {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table; }
|
||||
}
|
||||
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 visilbity for tables */
|
||||
table.hide-for-touch { display: table; }
|
||||
.touch table.show-for-touch { display: table; }
|
||||
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; }
|
||||
|
||||
}
|
||||
410
app/assets/javascripts/foundation4/normalize.scss
vendored
410
app/assets/javascripts/foundation4/normalize.scss
vendored
@@ -1,410 +0,0 @@
|
||||
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
script {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
%div{"ng-controller" => "AuthenticationCtrl"}
|
||||
%tabset
|
||||
%ng-include{src: "'login.html'"}
|
||||
%ng-include{src: "'signup.html'"}
|
||||
%ng-include{src: "'forgot.html'"}
|
||||
%a.close-reveal-modal{"ng-click" => "$close()"} ×
|
||||
@@ -1,7 +1,7 @@
|
||||
%tab#forgot{"ng-controller" => "ForgotSidebarCtrl",
|
||||
%tab#forgot{"ng-controller" => "ForgotCtrl",
|
||||
heading: "Forgot Password?",
|
||||
active: "active()",
|
||||
select: "select()"}
|
||||
active: "active(path)",
|
||||
select: "select(path)"}
|
||||
|
||||
%form{"ng-submit" => "submit()"}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
%tab#login-content{"ng-controller" => "LoginSidebarCtrl",
|
||||
%tab#login-content{"ng-controller" => "LoginCtrl",
|
||||
heading: "Login",
|
||||
active: "active()",
|
||||
select: "select()"}
|
||||
active: "active(path)",
|
||||
select: "select(path)"}
|
||||
%form{"ng-submit" => "submit()"}
|
||||
.row
|
||||
.large-12.columns
|
||||
@@ -1,7 +1,7 @@
|
||||
%tab#sign-up-content{"ng-controller" => "SignupSidebarCtrl",
|
||||
%tab#sign-up-content{"ng-controller" => "SignupCtrl",
|
||||
heading: "Signup",
|
||||
active: "active()",
|
||||
select: "select()"}
|
||||
active: "active(path)",
|
||||
select: "select(path)"}
|
||||
%form{"ng-submit" => "submit()"}
|
||||
.row
|
||||
.large-12.columns
|
||||
@@ -84,6 +84,8 @@
|
||||
border-right: 1px solid $disabled-dark
|
||||
strong
|
||||
color: $dark-grey
|
||||
&:hover, &:active, &:focus
|
||||
color: $dark-grey
|
||||
.active_table_row:nth-child(2)
|
||||
border-left: 1px solid $disabled-dark
|
||||
border-right: 1px solid $disabled-dark
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
@import mixins
|
||||
|
||||
#active-table-search
|
||||
input
|
||||
font-size: 2em
|
||||
@include big-input
|
||||
@@ -12,3 +12,4 @@
|
||||
ofn-modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ $clr-brick: #8f301d
|
||||
$clr-brick-light: #f5e4e1
|
||||
$clr-brick-ultra-light: #f7f4ef
|
||||
$clr-brick-bright: #db583d
|
||||
$clr-brick-light-bright: #f4bbb0
|
||||
|
||||
$clr-turquoise: #097563
|
||||
$clr-turquoise-light: #cef2ec
|
||||
|
||||
@@ -3,10 +3,20 @@
|
||||
|
||||
footer
|
||||
background: $dark-grey
|
||||
border-top: 1px dotted white
|
||||
@include panepadding
|
||||
.row
|
||||
&, & *
|
||||
color: white
|
||||
a, a > i
|
||||
@include csstrans
|
||||
a, a *
|
||||
color: $clr-brick-light-bright
|
||||
&:hover, &:active, &:focus
|
||||
color: $clr-brick-bright
|
||||
@include textsoftpress
|
||||
small
|
||||
font-size: 0.75rem
|
||||
span.email
|
||||
direction: rtl
|
||||
unicode-bidi: bidi-override
|
||||
|
||||
@@ -30,3 +30,9 @@
|
||||
background-image: url("/assets/home/producers-bg.svg")
|
||||
background-repeat: no-repeat
|
||||
background-position: right center
|
||||
|
||||
// Responsive
|
||||
@media all and (max-width: 768px)
|
||||
#map, #groups, #producers
|
||||
.row
|
||||
background-position: center center
|
||||
20
app/assets/stylesheets/darkswarm/home_tagline.css.sass
Normal file
20
app/assets/stylesheets/darkswarm/home_tagline.css.sass
Normal file
@@ -0,0 +1,20 @@
|
||||
@import branding
|
||||
@import mixins
|
||||
|
||||
#tagline
|
||||
background-color: black
|
||||
background-image: url("/assets/home/tagline-bg.jpg")
|
||||
@include fullbg
|
||||
height: 400px
|
||||
padding: 40px 0px
|
||||
h1, h2, p
|
||||
color: white
|
||||
h1
|
||||
margin-bottom: 1em
|
||||
h2
|
||||
font-size: 1.6875rem
|
||||
a
|
||||
color: $clr-brick-bright
|
||||
&:hover, &:active, &:focus
|
||||
color: $clr-brick-light-bright
|
||||
@include textsoftpress
|
||||
@@ -1,40 +1,36 @@
|
||||
@import branding
|
||||
|
||||
.active_table .active_table_node
|
||||
.hubs
|
||||
.active_table .active_table_node
|
||||
|
||||
&.open
|
||||
.active_table_row:first-child
|
||||
border-top: 1px solid $clr-brick
|
||||
border-left: 1px solid $clr-brick
|
||||
border-right: 1px solid $clr-brick
|
||||
&:hover, &:active, &:focus
|
||||
color: $clr-brick
|
||||
|
||||
.active_table_row:nth-child(2)
|
||||
border-left: 1px solid $clr-brick
|
||||
border-right: 1px solid $clr-brick
|
||||
border-bottom: 1px solid $clr-brick
|
||||
|
||||
.active_table_row.link
|
||||
background-color: $clr-brick
|
||||
&:hover
|
||||
background-color: $clr-brick-bright
|
||||
|
||||
|
||||
&.closed
|
||||
&:hover, &:active, &:focus
|
||||
border: 1px solid $clr-brick
|
||||
color: $clr-brick
|
||||
|
||||
&.current
|
||||
&.closed
|
||||
&, & *
|
||||
color: $clr-brick
|
||||
&.open
|
||||
.active_table_row:first-child
|
||||
&, & *
|
||||
border-top: 1px solid $clr-brick
|
||||
border-left: 1px solid $clr-brick
|
||||
border-right: 1px solid $clr-brick
|
||||
&:hover, &:active, &:focus
|
||||
color: $clr-brick
|
||||
|
||||
.active_table_row:nth-child(2)
|
||||
border-left: 1px solid $clr-brick
|
||||
border-right: 1px solid $clr-brick
|
||||
border-bottom: 1px solid $clr-brick
|
||||
|
||||
.active_table_row.link
|
||||
background-color: $clr-brick
|
||||
&:hover
|
||||
background-color: $clr-brick-bright
|
||||
|
||||
&.closed
|
||||
&:hover, &:active, &:focus
|
||||
border: 1px solid $clr-brick
|
||||
color: $clr-brick
|
||||
|
||||
|
||||
|
||||
|
||||
&.current
|
||||
&.closed
|
||||
&, & *
|
||||
color: $clr-brick
|
||||
&.open
|
||||
.active_table_row:first-child
|
||||
&, & *
|
||||
color: $clr-brick
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
@import mixins
|
||||
|
||||
#hub-search
|
||||
input
|
||||
font-size: 2em
|
||||
@include big-input
|
||||
//.advanced
|
||||
//padding-top: 8px
|
||||
//@include disabled
|
||||
26
app/assets/stylesheets/darkswarm/menu.css.sass
Normal file
26
app/assets/stylesheets/darkswarm/menu.css.sass
Normal file
@@ -0,0 +1,26 @@
|
||||
@import branding
|
||||
@import mixins
|
||||
|
||||
.inner-wrap
|
||||
padding-top: 45px
|
||||
|
||||
.top-bar
|
||||
@include box-shadow(0 2px 3px 0 rgba(0,0,0,0.25))
|
||||
|
||||
nav
|
||||
@include textpress
|
||||
.top-bar-section ul li > a
|
||||
font-size: 0.75rem
|
||||
height: 45px
|
||||
@include csstrans
|
||||
opacity: 0.8
|
||||
&:hover, &:focus, &:active
|
||||
opacity: 1
|
||||
.nav-branded
|
||||
color: $clr-brick-light-bright
|
||||
.nav-primary
|
||||
@include avenir
|
||||
font-size: 0.875rem
|
||||
|
||||
nav.top-bar a.icon i
|
||||
font-size: 22px
|
||||
@@ -5,7 +5,8 @@
|
||||
border: 1px solid #999
|
||||
font-size: 18px
|
||||
@extend .avenir
|
||||
padding: 30px 20px
|
||||
padding: 22px 18px
|
||||
height: auto
|
||||
margin-bottom: 1em
|
||||
|
||||
@mixin disabled
|
||||
@@ -54,7 +55,7 @@
|
||||
background-size: cover
|
||||
|
||||
@mixin fullwidthbg
|
||||
background-position: top center
|
||||
background-position: center top
|
||||
background-repeat: no-repeat
|
||||
background-size: 100% auto
|
||||
|
||||
@@ -65,3 +66,19 @@
|
||||
-o-transition: all 100ms ease-in-out
|
||||
transition: all 100ms ease-in-out
|
||||
-webkit-transform-style: preserve-3d
|
||||
|
||||
@mixin box-shadow($box-shadow)
|
||||
-moz-box-shadow: $box-shadow
|
||||
-webkit-box-shadow: $box-shadow
|
||||
box-shadow: $box-shadow
|
||||
|
||||
@mixin avenir
|
||||
font-family: "AvenirBla_IE", "AvenirBla"
|
||||
|
||||
@mixin textpress
|
||||
text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222
|
||||
|
||||
@mixin textsoftpress
|
||||
text-shadow: 0 0 3px rgba(0,0,0,0.35)
|
||||
|
||||
|
||||
|
||||
34
app/assets/stylesheets/darkswarm/producer_node.css.sass
Normal file
34
app/assets/stylesheets/darkswarm/producer_node.css.sass
Normal file
@@ -0,0 +1,34 @@
|
||||
@import branding
|
||||
|
||||
.producers
|
||||
.active_table .active_table_node
|
||||
&.open
|
||||
.active_table_row:first-child
|
||||
border-top: 1px solid $clr-turquoise
|
||||
border-left: 1px solid $clr-turquoise
|
||||
border-right: 1px solid $clr-turquoise
|
||||
&:hover, &:active, &:focus
|
||||
color: $clr-turquoise
|
||||
|
||||
.active_table_row:nth-child(2)
|
||||
border-left: 1px solid $clr-turquoise
|
||||
border-right: 1px solid $clr-turquoise
|
||||
border-bottom: 1px solid $clr-turquoise
|
||||
|
||||
.active_table_row.link
|
||||
background-color: $clr-turquoise
|
||||
&:hover
|
||||
background-color: $clr-turquoise-bright
|
||||
|
||||
&.closed
|
||||
&, & *
|
||||
color: $clr-turquoise-bright
|
||||
&.open
|
||||
.active_table_row:first-child
|
||||
&, & *
|
||||
color: $clr-turquoise
|
||||
&.open
|
||||
.active_table_row:first-child
|
||||
&, & *
|
||||
color: $clr-turquoise
|
||||
|
||||
8
app/assets/stylesheets/darkswarm/producers.css.sass
Normal file
8
app/assets/stylesheets/darkswarm/producers.css.sass
Normal file
@@ -0,0 +1,8 @@
|
||||
@import branding
|
||||
@import mixins
|
||||
|
||||
|
||||
.producers
|
||||
@include fullwidthbg
|
||||
background-image: url("/assets/producers/producers-pg-bg.jpg")
|
||||
background-repeat: no-repeat
|
||||
@@ -2,8 +2,6 @@
|
||||
// We can't import foundation components?
|
||||
// See https://github.com/zurb/foundation/issues/3855#issuecomment-30372252
|
||||
|
||||
|
||||
@import "foundation"
|
||||
@import "variables"
|
||||
@import "components/global"
|
||||
@import "components/buttons"
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
@import branding
|
||||
@import mixins
|
||||
|
||||
#tagline
|
||||
background: black url("/assets/home/tagline-bg.jpg")
|
||||
@include fullbg
|
||||
height: 400px
|
||||
padding: 40px 0px
|
||||
h1, h2, p
|
||||
color: white
|
||||
h1
|
||||
margin-bottom: 1em
|
||||
h2
|
||||
font-size: 1.6875rem
|
||||
a
|
||||
color: $clr-brick-bright
|
||||
@@ -16,23 +16,35 @@
|
||||
font-family: 'AvenirMed'
|
||||
src: url("/AvenirLTStd-Medium.otf") format("opentype")
|
||||
|
||||
//body
|
||||
//font-family: "AvenirBla_IE", "AvenirBla"
|
||||
|
||||
body
|
||||
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
|
||||
|
||||
a
|
||||
color: $clr-brick
|
||||
&:hover
|
||||
text-decoration: none
|
||||
color: $clr-brick-bright
|
||||
|
||||
|
||||
@mixin avenir
|
||||
color: #333333
|
||||
font-family: "AvenirBla_IE", "AvenirBla"
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .avenir
|
||||
@include avenir
|
||||
padding: 0px
|
||||
|
||||
ul.ofn-list
|
||||
margin-left: 0.5em
|
||||
li
|
||||
list-style: none
|
||||
li:before
|
||||
content: "\f112"
|
||||
font-family: "foundation-icons"
|
||||
display: inline-block
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-variant: normal
|
||||
text-transform: none
|
||||
font-size: 80%
|
||||
|
||||
.light-grey
|
||||
color: #666666
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
.neutral-btn
|
||||
@include button
|
||||
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
|
||||
background-color: transparent
|
||||
border: 2px solid rgba(200, 200, 200, 1)
|
||||
color: #999
|
||||
@@ -37,3 +38,9 @@
|
||||
.neutral-btn.turquoise:hover, .neutral-btn.turquoise:active, .neutral-btn.turquoise:focus
|
||||
background-color: rgba(0, 0, 0, 0.1)
|
||||
text-shadow: 0 1px 0 #fff
|
||||
|
||||
|
||||
// Responsive
|
||||
@media screen and (min-width: 768px)
|
||||
[role="main"]
|
||||
padding: 0
|
||||
@@ -61,4 +61,4 @@ $ff_base: 'Ubuntu', sans-serif !default;
|
||||
$table_head_color: lighten($body_text_color, 60) !default;
|
||||
|
||||
|
||||
@import "./variables_changes.css.scss";
|
||||
@import "./store/variables_changes.css.scss";
|
||||
|
||||
@@ -6,7 +6,7 @@ class ApplicationController < ActionController::Base
|
||||
|
||||
def after_sign_in_path_for(resource)
|
||||
if request.referer and referer_path = URI(request.referer).path
|
||||
[main_app.shop_checkout_path].include?(referer_path) ? referer_path : root_path
|
||||
[main_app.checkout_path].include?(referer_path) ? referer_path : root_path
|
||||
else
|
||||
root_path
|
||||
end
|
||||
@@ -15,7 +15,7 @@ class ApplicationController < ActionController::Base
|
||||
private
|
||||
|
||||
def require_distributor_chosen
|
||||
unless current_distributor
|
||||
unless @distributor = current_distributor
|
||||
redirect_to spree.root_path
|
||||
false
|
||||
end
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
class Shop::CheckoutController < Spree::CheckoutController
|
||||
class CheckoutController < Spree::CheckoutController
|
||||
layout 'darkswarm'
|
||||
prepend_before_filter :require_order_cycle
|
||||
prepend_before_filter :require_distributor_chosen
|
||||
@@ -69,12 +69,6 @@ class Shop::CheckoutController < Spree::CheckoutController
|
||||
def skip_state_validation?
|
||||
true
|
||||
end
|
||||
|
||||
def set_distributor
|
||||
unless @distributor = current_distributor
|
||||
redirect_to main_app.root_path
|
||||
end
|
||||
end
|
||||
|
||||
def load_order
|
||||
@order = current_order
|
||||
@@ -126,7 +120,7 @@ class Shop::CheckoutController < Spree::CheckoutController
|
||||
# Overriding to customize the cancel url
|
||||
def order_opts_with_new_cancel_return_url(order, payment_method_id, stage)
|
||||
opts = order_opts_without_new_cancel_return_url(order, payment_method_id, stage)
|
||||
opts[:cancel_return_url] = main_app.shop_checkout_url
|
||||
opts[:cancel_return_url] = main_app.checkout_url
|
||||
opts
|
||||
end
|
||||
alias_method_chain :order_opts, :new_cancel_return_url
|
||||
@@ -1,4 +1,7 @@
|
||||
class ProducersController < BaseController
|
||||
layout 'darkswarm'
|
||||
|
||||
def index
|
||||
@producers = Enterprise.is_primary_producer.visible
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
class Shop::ShopController < BaseController
|
||||
class ShopController < BaseController
|
||||
layout "darkswarm"
|
||||
|
||||
before_filter :set_distributor
|
||||
before_filter :require_distributor_chosen
|
||||
before_filter :set_order_cycles
|
||||
|
||||
def show
|
||||
@@ -12,7 +11,6 @@ class Shop::ShopController < BaseController
|
||||
.valid_products_distributed_by(current_distributor).andand
|
||||
.select { |p| !p.deleted? && p.has_stock_for_distribution?(current_order_cycle, current_distributor) }.andand
|
||||
.sort_by {|p| p.name }
|
||||
|
||||
render json: "", status: 404
|
||||
end
|
||||
end
|
||||
@@ -21,23 +19,17 @@ class Shop::ShopController < BaseController
|
||||
if request.post?
|
||||
if oc = OrderCycle.with_distributor(@distributor).active.find_by_id(params[:order_cycle_id])
|
||||
current_order(true).set_order_cycle! oc
|
||||
render partial: "shop/shop/order_cycle"
|
||||
render partial: "json/order_cycle"
|
||||
else
|
||||
render status: 404, json: ""
|
||||
end
|
||||
else
|
||||
render partial: "shop/shop/order_cycle"
|
||||
render partial: "json/order_cycle"
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def set_distributor
|
||||
unless @distributor = current_distributor
|
||||
redirect_to root_path
|
||||
end
|
||||
end
|
||||
|
||||
def set_order_cycles
|
||||
@order_cycles = OrderCycle.with_distributor(@distributor).active
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
module Shop::CheckoutHelper
|
||||
end
|
||||
10
app/models/spree/gateway_decorator.rb
Normal file
10
app/models/spree/gateway_decorator.rb
Normal file
@@ -0,0 +1,10 @@
|
||||
Spree::Gateway.class_eval do
|
||||
|
||||
# Due to class load order, when config.cache_classes is enabled (ie. staging and production
|
||||
# environments), this association isn't inherited from PaymentMethod. As a result, creating
|
||||
# payment methods using payment gateways results in:
|
||||
# undefined method `association_class' for nil:NilClass
|
||||
# To avoid that, we redefine this association here.
|
||||
|
||||
has_and_belongs_to_many :distributors, join_table: 'distributors_payment_methods', :class_name => 'Enterprise', foreign_key: 'payment_method_id', association_foreign_key: 'distributor_id'
|
||||
end
|
||||
@@ -1,3 +1,4 @@
|
||||
require 'open_food_network/feature_toggle'
|
||||
require 'open_food_network/distribution_change_validator'
|
||||
|
||||
ActiveSupport::Notifications.subscribe('spree.order.contents_changed') do |name, start, finish, id, payload|
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
Spree::PaymentMethod.class_eval do
|
||||
# See gateway_decorator.rb when modifying this association
|
||||
has_and_belongs_to_many :distributors, join_table: 'distributors_payment_methods', :class_name => 'Enterprise', association_foreign_key: 'distributor_id'
|
||||
|
||||
attr_accessible :distributor_ids
|
||||
|
||||
@@ -25,18 +25,18 @@
|
||||
= f.collection_select :group_ids, EnterpriseGroup.all, :id, :name, {}, {class: "select2 fullwidth", multiple: true}
|
||||
.row
|
||||
.alpha.two.columns
|
||||
.omega.ten.columns
|
||||
.six.columns
|
||||
= f.check_box :is_primary_producer
|
||||
= f.label :is_primary_producer, 'Producer'
|
||||
|
||||
= f.check_box :is_distributor
|
||||
= f.label :is_distributor, 'Hub'
|
||||
|
||||
= f.check_box :visible
|
||||
= f.label :visible, 'Visible in search?'
|
||||
|
||||
.with-tip{'data-powertip' => "Select 'Producer' if you are a primary producer of food. Select 'Hub' if you want a shop-front. You can choose either or both."}
|
||||
%a What's this?
|
||||
.omega.four.columns
|
||||
= f.check_box :visible
|
||||
= f.label :visible, 'Visible in search?'
|
||||
|
||||
= f.fields_for :address do |af|
|
||||
%fieldset.no-border-bottom
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<tr data-hook="enterprises_header">
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Active?</th>
|
||||
<th>Visible?</th>
|
||||
<th>Description</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
%fieldset
|
||||
%accordion-group{heading: "User", "is-open" => "accordion.user"}
|
||||
.row
|
||||
.large-4.columns.text-center{"ng-controller" => "AuthenticationActionsCtrl"}
|
||||
%button{"ng-click" => "toggle('/login')"} Login
|
||||
.large-4.columns.text-center{"ng-controller" => "AuthenticationActionsCtrl"}
|
||||
%button{"ng-click" => "toggle('/signup')"} Signup
|
||||
.large-4.columns.text-center{"ng-controller" => "AuthenticationCtrl"}
|
||||
%button{"ng-click" => "open('/login')"} Login
|
||||
.large-4.columns.text-center{"ng-controller" => "AuthenticationCtrl"}
|
||||
%button{"ng-click" => "open('/signup')"} Signup
|
||||
.large-4.columns.text-center
|
||||
%button{"ng-click" => "show('details')"} Checkout as guest
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user