| @@ -0,0 +1,85 @@ | ||
| // Ionic Starter App | ||
|
|
||
| // angular.module is a global place for creating, registering and retrieving Angular modules | ||
| // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) | ||
| // the 2nd parameter is an array of 'requires' | ||
| // 'starter.services' is found in services.js | ||
| // 'starter.controllers' is found in controllers.js | ||
| angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) | ||
|
|
||
| .run(function($ionicPlatform) { | ||
| $ionicPlatform.ready(function() { | ||
| // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard | ||
| // for form inputs) | ||
| if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { | ||
| cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); | ||
| cordova.plugins.Keyboard.disableScroll(true); | ||
|
|
||
| } | ||
| if (window.StatusBar) { | ||
| // org.apache.cordova.statusbar required | ||
| StatusBar.styleDefault(); | ||
| } | ||
| }); | ||
| }) | ||
|
|
||
| .config(function($stateProvider, $urlRouterProvider) { | ||
|
|
||
| // Ionic uses AngularUI Router which uses the concept of states | ||
| // Learn more here: https://github.com/angular-ui/ui-router | ||
| // Set up the various states which the app can be in. | ||
| // Each state's controller can be found in controllers.js | ||
| $stateProvider | ||
|
|
||
| // setup an abstract state for the tabs directive | ||
| .state('tab', { | ||
| url: '/tab', | ||
| abstract: true, | ||
| templateUrl: 'templates/tabs.html' | ||
| }) | ||
|
|
||
| // Each tab has its own nav history stack: | ||
|
|
||
| .state('tab.dash', { | ||
| url: '/dash', | ||
| views: { | ||
| 'tab-dash': { | ||
| templateUrl: 'templates/tab-dash.html', | ||
| controller: 'DashCtrl' | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| .state('tab.chats', { | ||
| url: '/chats', | ||
| views: { | ||
| 'tab-chats': { | ||
| templateUrl: 'templates/tab-chats.html', | ||
| controller: 'ChatsCtrl' | ||
| } | ||
| } | ||
| }) | ||
| .state('tab.chat-detail', { | ||
| url: '/chats/:chatId', | ||
| views: { | ||
| 'tab-chats': { | ||
| templateUrl: 'templates/chat-detail.html', | ||
| controller: 'ChatDetailCtrl' | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| .state('tab.account', { | ||
| url: '/account', | ||
| views: { | ||
| 'tab-account': { | ||
| templateUrl: 'templates/tab-account.html', | ||
| controller: 'AccountCtrl' | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| // if none of the above states are matched, use this as the fallback | ||
| $urlRouterProvider.otherwise('/tab/dash'); | ||
|
|
||
| }); |
| @@ -0,0 +1,28 @@ | ||
| angular.module('starter.controllers', []) | ||
|
|
||
| .controller('DashCtrl', function($scope) {}) | ||
|
|
||
| .controller('ChatsCtrl', function($scope, Chats) { | ||
| // With the new view caching in Ionic, Controllers are only called | ||
| // when they are recreated or on app start, instead of every page change. | ||
| // To listen for when this page is active (for example, to refresh data), | ||
| // listen for the $ionicView.enter event: | ||
| // | ||
| //$scope.$on('$ionicView.enter', function(e) { | ||
| //}); | ||
|
|
||
| $scope.chats = Chats.all(); | ||
| $scope.remove = function(chat) { | ||
| Chats.remove(chat); | ||
| }; | ||
| }) | ||
|
|
||
| .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) { | ||
| $scope.chat = Chats.get($stateParams.chatId); | ||
| }) | ||
|
|
||
| .controller('AccountCtrl', function($scope) { | ||
| $scope.settings = { | ||
| enableFriends: true | ||
| }; | ||
| }); |
| @@ -0,0 +1,50 @@ | ||
| angular.module('starter.services', []) | ||
|
|
||
| .factory('Chats', function() { | ||
| // Might use a resource here that returns a JSON array | ||
|
|
||
| // Some fake testing data | ||
| var chats = [{ | ||
| id: 0, | ||
| name: 'Ben Sparrow', | ||
| lastText: 'You on your way?', | ||
| face: 'img/ben.png' | ||
| }, { | ||
| id: 1, | ||
| name: 'Max Lynx', | ||
| lastText: 'Hey, it\'s me', | ||
| face: 'img/max.png' | ||
| }, { | ||
| id: 2, | ||
| name: 'Adam Bradleyson', | ||
| lastText: 'I should buy a boat', | ||
| face: 'img/adam.jpg' | ||
| }, { | ||
| id: 3, | ||
| name: 'Perry Governor', | ||
| lastText: 'Look at my mukluks!', | ||
| face: 'img/perry.png' | ||
| }, { | ||
| id: 4, | ||
| name: 'Mike Harrington', | ||
| lastText: 'This is wicked good ice cream.', | ||
| face: 'img/mike.png' | ||
| }]; | ||
|
|
||
| return { | ||
| all: function() { | ||
| return chats; | ||
| }, | ||
| remove: function(chat) { | ||
| chats.splice(chats.indexOf(chat), 1); | ||
| }, | ||
| get: function(chatId) { | ||
| for (var i = 0; i < chats.length; i++) { | ||
| if (chats[i].id === parseInt(chatId)) { | ||
| return chats[i]; | ||
| } | ||
| } | ||
| return null; | ||
| } | ||
| }; | ||
| }); |
| @@ -0,0 +1,170 @@ | ||
| /** | ||
| * Action Sheets | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .action-sheet-backdrop { | ||
| @include transition(background-color 150ms ease-in-out); | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: $z-index-action-sheet; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0,0,0,0); | ||
|
|
||
| &.active { | ||
| background-color: rgba(0,0,0,0.4); | ||
| } | ||
| } | ||
|
|
||
| .action-sheet-wrapper { | ||
| @include translate3d(0, 100%, 0); | ||
| @include transition(all cubic-bezier(.36, .66, .04, 1) 500ms); | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| width: 100%; | ||
| max-width: 500px; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .action-sheet-up { | ||
| @include translate3d(0, 0, 0); | ||
| } | ||
|
|
||
| .action-sheet { | ||
| margin-left: $sheet-margin; | ||
| margin-right: $sheet-margin; | ||
| width: auto; | ||
| z-index: $z-index-action-sheet; | ||
| overflow: hidden; | ||
|
|
||
| .button { | ||
| display: block; | ||
| padding: 1px; | ||
| width: 100%; | ||
| border-radius: 0; | ||
| border-color: $sheet-options-border-color; | ||
| background-color: transparent; | ||
|
|
||
| color: $sheet-options-text-color; | ||
| font-size: 21px; | ||
|
|
||
| &:hover { | ||
| color: $sheet-options-text-color; | ||
| } | ||
| &.destructive { | ||
| color: #ff3b30; | ||
| &:hover { | ||
| color: #ff3b30; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .button.active, .button.activated { | ||
| box-shadow: none; | ||
| border-color: $sheet-options-border-color; | ||
| color: $sheet-options-text-color; | ||
| background: $sheet-options-bg-active-color; | ||
| } | ||
| } | ||
|
|
||
| .action-sheet-has-icons .icon { | ||
| position: absolute; | ||
| left: 16px; | ||
| } | ||
|
|
||
| .action-sheet-title { | ||
| padding: $sheet-margin * 2; | ||
| color: #8f8f8f; | ||
| text-align: center; | ||
| font-size: 13px; | ||
| } | ||
|
|
||
| .action-sheet-group { | ||
| margin-bottom: $sheet-margin; | ||
| border-radius: $sheet-border-radius; | ||
| background-color: #fff; | ||
| overflow: hidden; | ||
|
|
||
| .button { | ||
| border-width: 1px 0px 0px 0px; | ||
| } | ||
| .button:first-child:last-child { | ||
| border-width: 0; | ||
| } | ||
| } | ||
|
|
||
| .action-sheet-options { | ||
| background: $sheet-options-bg-color; | ||
| } | ||
|
|
||
| .action-sheet-cancel { | ||
| .button { | ||
| font-weight: 500; | ||
| } | ||
| } | ||
|
|
||
| .action-sheet-open { | ||
| pointer-events: none; | ||
|
|
||
| &.modal-open .modal { | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .action-sheet-backdrop { | ||
| pointer-events: auto; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .platform-android { | ||
|
|
||
| .action-sheet-backdrop.active { | ||
| background-color: rgba(0,0,0,0.2); | ||
| } | ||
|
|
||
| .action-sheet { | ||
| margin: 0; | ||
|
|
||
| .action-sheet-title, | ||
| .button { | ||
| text-align: left; | ||
| border-color: transparent; | ||
| font-size: 16px; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .action-sheet-title { | ||
| font-size: 14px; | ||
| padding: 16px; | ||
| color: #666; | ||
| } | ||
|
|
||
| .button.active, | ||
| .button.activated { | ||
| background: #e8e8e8; | ||
| } | ||
| } | ||
|
|
||
| .action-sheet-group { | ||
| margin: 0; | ||
| border-radius: 0; | ||
| background-color: #fafafa; | ||
| } | ||
|
|
||
| .action-sheet-cancel { | ||
| display: none; | ||
| } | ||
|
|
||
| .action-sheet-has-icons { | ||
|
|
||
| .button { | ||
| padding-left: 56px; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,48 @@ | ||
|
|
||
| // Slide up from the bottom, used for modals | ||
| // ------------------------------- | ||
|
|
||
| .slide-in-up { | ||
| @include translate3d(0, 100%, 0); | ||
| } | ||
| .slide-in-up.ng-enter, | ||
| .slide-in-up > .ng-enter { | ||
| @include transition(all cubic-bezier(.1, .7, .1, 1) 400ms); | ||
| } | ||
| .slide-in-up.ng-enter-active, | ||
| .slide-in-up > .ng-enter-active { | ||
| @include translate3d(0, 0, 0); | ||
| } | ||
|
|
||
| .slide-in-up.ng-leave, | ||
| .slide-in-up > .ng-leave { | ||
| @include transition(all ease-in-out 250ms); | ||
| } | ||
|
|
||
|
|
||
| // Scale Out | ||
| // Scale from hero (1 in this case) to zero | ||
| // ------------------------------- | ||
|
|
||
| @-webkit-keyframes scaleOut { | ||
| from { -webkit-transform: scale(1); opacity: 1; } | ||
| to { -webkit-transform: scale(0.8); opacity: 0; } | ||
| } | ||
| @keyframes scaleOut { | ||
| from { transform: scale(1); opacity: 1; } | ||
| to { transform: scale(0.8); opacity: 0; } | ||
| } | ||
|
|
||
|
|
||
| // Super Scale In | ||
| // Scale from super (1.x) to duper (1 in this case) | ||
| // ------------------------------- | ||
|
|
||
| @-webkit-keyframes superScaleIn { | ||
| from { -webkit-transform: scale(1.2); opacity: 0; } | ||
| to { -webkit-transform: scale(1); opacity: 1 } | ||
| } | ||
| @keyframes superScaleIn { | ||
| from { transform: scale(1.2); opacity: 0; } | ||
| to { transform: scale(1); opacity: 1; } | ||
| } |
| @@ -0,0 +1,24 @@ | ||
|
|
||
| .backdrop { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: $z-index-backdrop; | ||
|
|
||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| background-color: $loading-backdrop-bg-color; | ||
|
|
||
| visibility: hidden; | ||
| opacity: 0; | ||
|
|
||
| &.visible { | ||
| visibility: visible; | ||
| } | ||
| &.active { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| @include transition($loading-backdrop-fadein-duration opacity linear); | ||
| } |
| @@ -0,0 +1,62 @@ | ||
|
|
||
| /** | ||
| * Badges | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .badge { | ||
| @include badge-style($badge-default-bg, $badge-default-text); | ||
| z-index: $z-index-badge; | ||
| display: inline-block; | ||
| padding: 3px 8px; | ||
| min-width: 10px; | ||
| border-radius: $badge-border-radius; | ||
| vertical-align: baseline; | ||
| text-align: center; | ||
| white-space: nowrap; | ||
| font-weight: $badge-font-weight; | ||
| font-size: $badge-font-size; | ||
| line-height: $badge-line-height; | ||
|
|
||
| &:empty { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| //Be sure to override specificity of rule that 'badge color matches tab color by default' | ||
| .tabs .tab-item .badge, | ||
| .badge { | ||
| &.badge-light { | ||
| @include badge-style($badge-light-bg, $badge-light-text); | ||
| } | ||
| &.badge-stable { | ||
| @include badge-style($badge-stable-bg, $badge-stable-text); | ||
| } | ||
| &.badge-positive { | ||
| @include badge-style($badge-positive-bg, $badge-positive-text); | ||
| } | ||
| &.badge-calm { | ||
| @include badge-style($badge-calm-bg, $badge-calm-text); | ||
| } | ||
| &.badge-assertive { | ||
| @include badge-style($badge-assertive-bg, $badge-assertive-text); | ||
| } | ||
| &.badge-balanced { | ||
| @include badge-style($badge-balanced-bg, $badge-balanced-text); | ||
| } | ||
| &.badge-energized { | ||
| @include badge-style($badge-energized-bg, $badge-energized-text); | ||
| } | ||
| &.badge-royal { | ||
| @include badge-style($badge-royal-bg, $badge-royal-text); | ||
| } | ||
| &.badge-dark { | ||
| @include badge-style($badge-dark-bg, $badge-dark-text); | ||
| } | ||
| } | ||
|
|
||
| // Quick fix for labels/badges in buttons | ||
| .button .badge { | ||
| position: relative; | ||
| top: -1px; | ||
| } |
| @@ -0,0 +1,64 @@ | ||
|
|
||
| /** | ||
| * Button Bar | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .button-bar { | ||
| @include display-flex(); | ||
| @include flex(1); | ||
| width: 100%; | ||
|
|
||
| &.button-bar-inline { | ||
| display: block; | ||
| width: auto; | ||
|
|
||
| @include clearfix(); | ||
|
|
||
| > .button { | ||
| width: auto; | ||
| display: inline-block; | ||
| float: left; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .button-bar > .button { | ||
| @include flex(1); | ||
| display: block; | ||
|
|
||
| overflow: hidden; | ||
|
|
||
| padding: 0 16px; | ||
|
|
||
| width: 0; | ||
|
|
||
| border-width: 1px 0px 1px 1px; | ||
| border-radius: 0; | ||
| text-align: center; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
|
|
||
| &:before, | ||
| .icon:before { | ||
| line-height: 44px; | ||
| } | ||
|
|
||
| &:first-child { | ||
| border-radius: $button-border-radius 0px 0px $button-border-radius; | ||
| } | ||
| &:last-child { | ||
| border-right-width: 1px; | ||
| border-radius: 0px $button-border-radius $button-border-radius 0px; | ||
| } | ||
| &:only-child { | ||
| border-radius: $button-border-radius; | ||
| } | ||
| } | ||
|
|
||
| .button-bar > .button-small { | ||
| &:before, | ||
| .icon:before { | ||
| line-height: 28px; | ||
| } | ||
| } |
| @@ -0,0 +1,252 @@ | ||
|
|
||
| /** | ||
| * Buttons | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .button { | ||
| // set the color defaults | ||
| @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text); | ||
|
|
||
| position: relative; | ||
| display: inline-block; | ||
| margin: 0; | ||
| padding: 0 $button-padding; | ||
|
|
||
| min-width: ($button-padding * 3) + $button-font-size; | ||
| min-height: $button-height + 5px; | ||
|
|
||
| border-width: $button-border-width; | ||
| border-style: solid; | ||
| border-radius: $button-border-radius; | ||
|
|
||
| vertical-align: top; | ||
| text-align: center; | ||
|
|
||
| text-overflow: ellipsis; | ||
| font-size: $button-font-size; | ||
| line-height: $button-height - $button-border-width + 1px; | ||
|
|
||
| cursor: pointer; | ||
|
|
||
| &:after { | ||
| // used to create a larger button "hit" area | ||
| position: absolute; | ||
| top: -6px; | ||
| right: -6px; | ||
| bottom: -6px; | ||
| left: -6px; | ||
| content: ' '; | ||
| } | ||
|
|
||
| .icon { | ||
| vertical-align: top; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .icon:before, | ||
| &.icon:before, | ||
| &.icon-left:before, | ||
| &.icon-right:before { | ||
| display: inline-block; | ||
| padding: 0 0 $button-border-width 0; | ||
| vertical-align: inherit; | ||
| font-size: $button-icon-size; | ||
| line-height: $button-height - $button-border-width; | ||
| pointer-events: none; | ||
| } | ||
| &.icon-left:before { | ||
| float: left; | ||
| padding-right: .2em; | ||
| padding-left: 0; | ||
| } | ||
| &.icon-right:before { | ||
| float: right; | ||
| padding-right: 0; | ||
| padding-left: .2em; | ||
| } | ||
|
|
||
| &.button-block, &.button-full { | ||
| margin-top: $button-block-margin; | ||
| margin-bottom: $button-block-margin; | ||
| } | ||
|
|
||
| &.button-light { | ||
| @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text); | ||
| @include button-clear($button-light-border); | ||
| @include button-outline($button-light-border); | ||
| } | ||
|
|
||
| &.button-stable { | ||
| @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text); | ||
| @include button-clear($button-stable-border); | ||
| @include button-outline($button-stable-border); | ||
| } | ||
|
|
||
| &.button-positive { | ||
| @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text); | ||
| @include button-clear($button-positive-bg); | ||
| @include button-outline($button-positive-bg); | ||
| } | ||
|
|
||
| &.button-calm { | ||
| @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text); | ||
| @include button-clear($button-calm-bg); | ||
| @include button-outline($button-calm-bg); | ||
| } | ||
|
|
||
| &.button-assertive { | ||
| @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text); | ||
| @include button-clear($button-assertive-bg); | ||
| @include button-outline($button-assertive-bg); | ||
| } | ||
|
|
||
| &.button-balanced { | ||
| @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text); | ||
| @include button-clear($button-balanced-bg); | ||
| @include button-outline($button-balanced-bg); | ||
| } | ||
|
|
||
| &.button-energized { | ||
| @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text); | ||
| @include button-clear($button-energized-bg); | ||
| @include button-outline($button-energized-bg); | ||
| } | ||
|
|
||
| &.button-royal { | ||
| @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text); | ||
| @include button-clear($button-royal-bg); | ||
| @include button-outline($button-royal-bg); | ||
| } | ||
|
|
||
| &.button-dark { | ||
| @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text); | ||
| @include button-clear($button-dark-bg); | ||
| @include button-outline($button-dark-bg); | ||
| } | ||
| } | ||
|
|
||
| .button-small { | ||
| padding: 2px $button-small-padding 1px; | ||
| min-width: $button-small-height; | ||
| min-height: $button-small-height + 2; | ||
| font-size: $button-small-font-size; | ||
| line-height: $button-small-height - $button-border-width - 1; | ||
|
|
||
| .icon:before, | ||
| &.icon:before, | ||
| &.icon-left:before, | ||
| &.icon-right:before { | ||
| font-size: $button-small-icon-size; | ||
| line-height: $button-small-icon-size + 3; | ||
| margin-top: 3px; | ||
| } | ||
| } | ||
|
|
||
| .button-large { | ||
| padding: 0 $button-large-padding; | ||
| min-width: ($button-large-padding * 3) + $button-large-font-size; | ||
| min-height: $button-large-height + 5; | ||
| font-size: $button-large-font-size; | ||
| line-height: $button-large-height - $button-border-width; | ||
|
|
||
| .icon:before, | ||
| &.icon:before, | ||
| &.icon-left:before, | ||
| &.icon-right:before { | ||
| padding-bottom: ($button-border-width * 2); | ||
| font-size: $button-large-icon-size; | ||
| line-height: $button-large-height - ($button-border-width * 2) - 1; | ||
| } | ||
| } | ||
|
|
||
| .button-icon { | ||
| @include transition(opacity .1s); | ||
| padding: 0 6px; | ||
| min-width: initial; | ||
| border-color: transparent; | ||
| background: none; | ||
|
|
||
| &.button.active, | ||
| &.button.activated { | ||
| border-color: transparent; | ||
| background: none; | ||
| box-shadow: none; | ||
| opacity: 0.3; | ||
| } | ||
|
|
||
| .icon:before, | ||
| &.icon:before { | ||
| font-size: $button-large-icon-size; | ||
| } | ||
| } | ||
|
|
||
| .button-clear { | ||
| @include button-clear($button-default-border); | ||
| @include transition(opacity .1s); | ||
| padding: 0 $button-clear-padding; | ||
| max-height: $button-height; | ||
| border-color: transparent; | ||
| background: none; | ||
| box-shadow: none; | ||
|
|
||
| &.active, | ||
| &.activated { | ||
| opacity: 0.3; | ||
| } | ||
| } | ||
|
|
||
| .button-outline { | ||
| @include button-outline($button-default-border); | ||
| @include transition(opacity .1s); | ||
| background: none; | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| .padding > .button.button-block:first-child { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .button-block { | ||
| display: block; | ||
| clear: both; | ||
|
|
||
| &:after { | ||
| clear: both; | ||
| } | ||
| } | ||
|
|
||
| .button-full, | ||
| .button-full > .button { | ||
| display: block; | ||
| margin-right: 0; | ||
| margin-left: 0; | ||
| border-right-width: 0; | ||
| border-left-width: 0; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| button.button-block, | ||
| button.button-full, | ||
| .button-full > button.button, | ||
| input.button.button-block { | ||
| width: 100%; | ||
| } | ||
|
|
||
| a.button { | ||
| text-decoration: none; | ||
|
|
||
| .icon:before, | ||
| &.icon:before, | ||
| &.icon-left:before, | ||
| &.icon-right:before { | ||
| margin-top: 2px; | ||
| } | ||
| } | ||
|
|
||
| .button.disabled, | ||
| .button[disabled] { | ||
| opacity: .4; | ||
| cursor: default !important; | ||
| pointer-events: none; | ||
| } |
| @@ -0,0 +1,180 @@ | ||
|
|
||
| /** | ||
| * Checkbox | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .checkbox { | ||
| // set the color defaults | ||
| @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default); | ||
|
|
||
| position: relative; | ||
| display: inline-block; | ||
| padding: ($checkbox-height / 4) ($checkbox-width / 4); | ||
| cursor: pointer; | ||
| } | ||
| .checkbox-light { | ||
| @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light); | ||
| } | ||
| .checkbox-stable { | ||
| @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable); | ||
| } | ||
| .checkbox-positive { | ||
| @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive); | ||
| } | ||
| .checkbox-calm { | ||
| @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm); | ||
| } | ||
| .checkbox-assertive { | ||
| @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive); | ||
| } | ||
| .checkbox-balanced { | ||
| @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced); | ||
| } | ||
| .checkbox-energized{ | ||
| @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized); | ||
| } | ||
| .checkbox-royal { | ||
| @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal); | ||
| } | ||
| .checkbox-dark { | ||
| @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark); | ||
| } | ||
|
|
||
| .checkbox input:disabled:before, | ||
| .checkbox input:disabled + .checkbox-icon:before { | ||
| border-color: $checkbox-off-border-light; | ||
| } | ||
|
|
||
| .checkbox input:disabled:checked:before, | ||
| .checkbox input:disabled:checked + .checkbox-icon:before { | ||
| background: $checkbox-on-bg-light; | ||
| } | ||
|
|
||
|
|
||
| .checkbox.checkbox-input-hidden input { | ||
| display: none !important; | ||
| } | ||
|
|
||
| .checkbox input, | ||
| .checkbox-icon { | ||
| position: relative; | ||
| width: $checkbox-width; | ||
| height: $checkbox-height; | ||
| display: block; | ||
| border: 0; | ||
| background: transparent; | ||
| cursor: pointer; | ||
| -webkit-appearance: none; | ||
|
|
||
| &:before { | ||
| // what the checkbox looks like when its not checked | ||
| display: table; | ||
| width: 100%; | ||
| height: 100%; | ||
| border-width: $checkbox-border-width; | ||
| border-style: solid; | ||
| border-radius: $checkbox-border-radius; | ||
| background: $checkbox-off-bg-color; | ||
| content: ' '; | ||
| @include transition(background-color 20ms ease-in-out); | ||
| } | ||
| } | ||
|
|
||
| .checkbox input:checked:before, | ||
| input:checked + .checkbox-icon:before { | ||
| border-width: $checkbox-border-width + 1; | ||
| } | ||
|
|
||
| // the checkmark within the box | ||
| .checkbox input:after, | ||
| .checkbox-icon:after { | ||
| @include transition(opacity .05s ease-in-out); | ||
| @include rotate(-45deg); | ||
| position: absolute; | ||
| top: 33%; | ||
| left: 25%; | ||
| display: table; | ||
| width: ($checkbox-width / 2); | ||
| height: ($checkbox-width / 4) - 1; | ||
| border: $checkbox-check-width solid $checkbox-check-color; | ||
| border-top: 0; | ||
| border-right: 0; | ||
| content: ' '; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .platform-android .checkbox-platform input:before, | ||
| .platform-android .checkbox-platform .checkbox-icon:before, | ||
| .checkbox-square input:before, | ||
| .checkbox-square .checkbox-icon:before { | ||
| border-radius: 2px; | ||
| width: 72%; | ||
| height: 72%; | ||
| margin-top: 14%; | ||
| margin-left: 14%; | ||
| border-width: 2px; | ||
| } | ||
|
|
||
| .platform-android .checkbox-platform input:after, | ||
| .platform-android .checkbox-platform .checkbox-icon:after, | ||
| .checkbox-square input:after, | ||
| .checkbox-square .checkbox-icon:after { | ||
| border-width: 2px; | ||
| top: 19%; | ||
| left: 25%; | ||
| width: ($checkbox-width / 2) - 1; | ||
| height: 7px; | ||
| } | ||
|
|
||
| .platform-android .item-checkbox-right .checkbox-square .checkbox-icon::after { | ||
| top: 31%; | ||
| } | ||
|
|
||
| .grade-c .checkbox input:after, | ||
| .grade-c .checkbox-icon:after { | ||
| @include rotate(0); | ||
| top: 3px; | ||
| left: 4px; | ||
| border: none; | ||
| color: $checkbox-check-color; | ||
| content: '\2713'; | ||
| font-weight: bold; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| // what the checkmark looks like when its checked | ||
| .checkbox input:checked:after, | ||
| input:checked + .checkbox-icon:after { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| // make sure item content have enough padding on left to fit the checkbox | ||
| .item-checkbox { | ||
| padding-left: ($item-padding * 2) + $checkbox-width; | ||
|
|
||
| &.active { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
|
|
||
| // position the checkbox to the left within an item | ||
| .item-checkbox .checkbox { | ||
| position: absolute; | ||
| top: 50%; | ||
| right: $item-padding / 2; | ||
| left: $item-padding / 2; | ||
| z-index: $z-index-item-checkbox; | ||
| margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1; | ||
| } | ||
|
|
||
|
|
||
| .item-checkbox.item-checkbox-right { | ||
| padding-right: ($item-padding * 2) + $checkbox-width; | ||
| padding-left: $item-padding; | ||
| } | ||
|
|
||
| .item-checkbox-right .checkbox input, | ||
| .item-checkbox-right .checkbox-icon { | ||
| float: right; | ||
| } |
| @@ -0,0 +1,327 @@ | ||
| /** | ||
| * Forms | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| // Make all forms have space below them | ||
| form { | ||
| margin: 0 0 $line-height-base; | ||
| } | ||
|
|
||
| // Groups of fields with labels on top (legends) | ||
| legend { | ||
| display: block; | ||
| margin-bottom: $line-height-base; | ||
| padding: 0; | ||
| width: 100%; | ||
| border: $input-border-width solid $input-border; | ||
| color: $dark; | ||
| font-size: $font-size-base * 1.5; | ||
| line-height: $line-height-base * 2; | ||
|
|
||
| small { | ||
| color: $stable; | ||
| font-size: $line-height-base * .75; | ||
| } | ||
| } | ||
|
|
||
| // Set font for forms | ||
| label, | ||
| input, | ||
| button, | ||
| select, | ||
| textarea { | ||
| @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here | ||
| } | ||
| input, | ||
| button, | ||
| select, | ||
| textarea { | ||
| font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element) | ||
| } | ||
|
|
||
|
|
||
| // Input List | ||
| // ------------------------------- | ||
|
|
||
| .item-input { | ||
| @include display-flex(); | ||
| @include align-items(center); | ||
| position: relative; | ||
| overflow: hidden; | ||
| padding: 6px 0 5px 16px; | ||
|
|
||
| input { | ||
| @include border-radius(0); | ||
| @include flex(1, 220px); | ||
| @include appearance(none); | ||
| margin: 0; | ||
| padding-right: 24px; | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| .button .icon { | ||
| @include flex(0, 0, 24px); | ||
| position: static; | ||
| display: inline-block; | ||
| height: auto; | ||
| text-align: center; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .button-bar { | ||
| @include border-radius(0); | ||
| @include flex(1, 0, 220px); | ||
| @include appearance(none); | ||
| } | ||
|
|
||
| .icon { | ||
| min-width: 14px; | ||
| } | ||
| } | ||
| // prevent flex-shrink on WP | ||
| .platform-windowsphone .item-input input{ | ||
| flex-shrink: 1; | ||
| } | ||
|
|
||
| .item-input-inset { | ||
| @include display-flex(); | ||
| @include align-items(center); | ||
| position: relative; | ||
| overflow: hidden; | ||
| padding: ($item-padding / 3) * 2; | ||
| } | ||
|
|
||
| .item-input-wrapper { | ||
| @include display-flex(); | ||
| @include flex(1, 0); | ||
| @include align-items(center); | ||
| @include border-radius(4px); | ||
| padding-right: 8px; | ||
| padding-left: 8px; | ||
| background: #eee; | ||
| } | ||
|
|
||
| .item-input-inset .item-input-wrapper input { | ||
| padding-left: 4px; | ||
| height: 29px; | ||
| background: transparent; | ||
| line-height: 18px; | ||
| } | ||
|
|
||
| .item-input-wrapper ~ .button { | ||
| margin-left: ($item-padding / 3) * 2; | ||
| } | ||
|
|
||
| .input-label { | ||
| display: table; | ||
| padding: 7px 10px 7px 0px; | ||
| max-width: 200px; | ||
| width: 35%; | ||
| color: $input-label-color; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .placeholder-icon { | ||
| color: #aaa; | ||
| &:first-child { | ||
| padding-right: 6px; | ||
| } | ||
| &:last-child { | ||
| padding-left: 6px; | ||
| } | ||
| } | ||
|
|
||
| .item-stacked-label { | ||
| display: block; | ||
| background-color: transparent; | ||
| box-shadow: none; | ||
|
|
||
| .input-label, .icon { | ||
| display: inline-block; | ||
| padding: 4px 0 0 0px; | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
|
|
||
| .item-stacked-label input, | ||
| .item-stacked-label textarea { | ||
| @include border-radius(2px); | ||
| padding: 4px 8px 3px 0; | ||
| border: none; | ||
| background-color: $input-bg; | ||
| } | ||
| .item-stacked-label input { | ||
| overflow: hidden; | ||
| height: $line-height-computed + $font-size-base + 12px; | ||
| } | ||
|
|
||
| .item-select.item-stacked-label select { | ||
| position: relative; | ||
| padding: 0px; | ||
| max-width: 90%; | ||
| direction:ltr; | ||
| white-space: pre-wrap; | ||
| margin: -3px; | ||
| } | ||
|
|
||
| .item-floating-label { | ||
| display: block; | ||
| background-color: transparent; | ||
| box-shadow: none; | ||
|
|
||
| .input-label { | ||
| position: relative; | ||
| padding: 5px 0 0 0; | ||
| opacity: 0; | ||
| top: 10px; | ||
| @include transition(opacity .15s ease-in, top .2s linear); | ||
|
|
||
| &.has-input { | ||
| opacity: 1; | ||
| top: 0; | ||
| @include transition(opacity .15s ease-in, top .2s linear); | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Form Controls | ||
| // ------------------------------- | ||
|
|
||
| // Shared size and type resets | ||
| textarea, | ||
| input[type="text"], | ||
| input[type="password"], | ||
| input[type="datetime"], | ||
| input[type="datetime-local"], | ||
| input[type="date"], | ||
| input[type="month"], | ||
| input[type="time"], | ||
| input[type="week"], | ||
| input[type="number"], | ||
| input[type="email"], | ||
| input[type="url"], | ||
| input[type="search"], | ||
| input[type="tel"], | ||
| input[type="color"] { | ||
| display: block; | ||
| padding-top: 2px; | ||
| padding-left: 0; | ||
| height: $line-height-computed + $font-size-base; | ||
| color: $input-color; | ||
| vertical-align: middle; | ||
| font-size: $font-size-base; | ||
| line-height: $font-size-base + 2; | ||
| } | ||
|
|
||
| .platform-ios, | ||
| .platform-android { | ||
| input[type="datetime-local"], | ||
| input[type="date"], | ||
| input[type="month"], | ||
| input[type="time"], | ||
| input[type="week"] { | ||
| padding-top: 8px; | ||
| } | ||
| } | ||
|
|
||
| .item-input { | ||
| input, | ||
| textarea { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| textarea { | ||
| padding-left: 0; | ||
| @include placeholder($input-color-placeholder, -3px); | ||
| } | ||
|
|
||
| // Reset height since textareas have rows | ||
| textarea { | ||
| height: auto; | ||
| } | ||
|
|
||
| // Everything else | ||
| textarea, | ||
| input[type="text"], | ||
| input[type="password"], | ||
| input[type="datetime"], | ||
| input[type="datetime-local"], | ||
| input[type="date"], | ||
| input[type="month"], | ||
| input[type="time"], | ||
| input[type="week"], | ||
| input[type="number"], | ||
| input[type="email"], | ||
| input[type="url"], | ||
| input[type="search"], | ||
| input[type="tel"], | ||
| input[type="color"] { | ||
| border: 0; | ||
| } | ||
|
|
||
| // Position radios and checkboxes better | ||
| input[type="radio"], | ||
| input[type="checkbox"] { | ||
| margin: 0; | ||
| line-height: normal; | ||
| } | ||
|
|
||
| // Reset width of input images, buttons, radios, checkboxes | ||
| .item-input { | ||
| input[type="file"], | ||
| input[type="image"], | ||
| input[type="submit"], | ||
| input[type="reset"], | ||
| input[type="button"], | ||
| input[type="radio"], | ||
| input[type="checkbox"] { | ||
| width: auto; // Override of generic input selector | ||
| } | ||
| } | ||
|
|
||
| // Set the height of file to match text inputs | ||
| input[type="file"] { | ||
| line-height: $input-height-base; | ||
| } | ||
|
|
||
| // Text input classes to hide text caret during scroll | ||
| .previous-input-focus, | ||
| .cloned-text-input + input, | ||
| .cloned-text-input + textarea { | ||
| position: absolute !important; | ||
| left: -9999px; | ||
| width: 200px; | ||
| } | ||
|
|
||
|
|
||
| // Placeholder | ||
| // ------------------------------- | ||
| input, | ||
| textarea { | ||
| @include placeholder(); | ||
| } | ||
|
|
||
|
|
||
| // DISABLED STATE | ||
| // ------------------------------- | ||
|
|
||
| // Disabled and read-only inputs | ||
| input[disabled], | ||
| select[disabled], | ||
| textarea[disabled], | ||
| input[readonly]:not(.cloned-text-input), | ||
| textarea[readonly]:not(.cloned-text-input), | ||
| select[readonly] { | ||
| background-color: $input-bg-disabled; | ||
| cursor: not-allowed; | ||
| } | ||
| // Explicitly reset the colors here | ||
| input[type="radio"][disabled], | ||
| input[type="checkbox"][disabled], | ||
| input[type="radio"][readonly], | ||
| input[type="checkbox"][readonly] { | ||
| background-color: transparent; | ||
| } |
| @@ -0,0 +1,159 @@ | ||
| /** | ||
| * Grid | ||
| * -------------------------------------------------- | ||
| * Using flexbox for the grid, inspired by Philip Walton: | ||
| * http://philipwalton.github.io/solved-by-flexbox/demos/grids/ | ||
| * By default each .col within a .row will evenly take up | ||
| * available width, and the height of each .col with take | ||
| * up the height of the tallest .col in the same .row. | ||
| */ | ||
|
|
||
| .row { | ||
| @include display-flex(); | ||
| padding: ($grid-padding-width / 2); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .row-wrap { | ||
| @include flex-wrap(wrap); | ||
| } | ||
|
|
||
| .row-no-padding { | ||
| padding: 0; | ||
|
|
||
| > .col { | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| .row + .row { | ||
| margin-top: ($grid-padding-width / 2) * -1; | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| .col { | ||
| @include flex(1); | ||
| display: block; | ||
| padding: ($grid-padding-width / 2); | ||
| width: 100%; | ||
| } | ||
|
|
||
|
|
||
| /* Vertically Align Columns */ | ||
| /* .row-* vertically aligns every .col in the .row */ | ||
| .row-top { | ||
| @include align-items(flex-start); | ||
| } | ||
| .row-bottom { | ||
| @include align-items(flex-end); | ||
| } | ||
| .row-center { | ||
| @include align-items(center); | ||
| } | ||
| .row-stretch { | ||
| @include align-items(stretch); | ||
| } | ||
| .row-baseline { | ||
| @include align-items(baseline); | ||
| } | ||
|
|
||
| /* .col-* vertically aligns an individual .col */ | ||
| .col-top { | ||
| @include align-self(flex-start); | ||
| } | ||
| .col-bottom { | ||
| @include align-self(flex-end); | ||
| } | ||
| .col-center { | ||
| @include align-self(center); | ||
| } | ||
|
|
||
| /* Column Offsets */ | ||
| .col-offset-10 { | ||
| margin-left: 10%; | ||
| } | ||
| .col-offset-20 { | ||
| margin-left: 20%; | ||
| } | ||
| .col-offset-25 { | ||
| margin-left: 25%; | ||
| } | ||
| .col-offset-33, .col-offset-34 { | ||
| margin-left: 33.3333%; | ||
| } | ||
| .col-offset-50 { | ||
| margin-left: 50%; | ||
| } | ||
| .col-offset-66, .col-offset-67 { | ||
| margin-left: 66.6666%; | ||
| } | ||
| .col-offset-75 { | ||
| margin-left: 75%; | ||
| } | ||
| .col-offset-80 { | ||
| margin-left: 80%; | ||
| } | ||
| .col-offset-90 { | ||
| margin-left: 90%; | ||
| } | ||
|
|
||
|
|
||
| /* Explicit Column Percent Sizes */ | ||
| /* By default each grid column will evenly distribute */ | ||
| /* across the grid. However, you can specify individual */ | ||
| /* columns to take up a certain size of the available area */ | ||
| .col-10 { | ||
| @include flex(0, 0, 10%); | ||
| max-width: 10%; | ||
| } | ||
| .col-20 { | ||
| @include flex(0, 0, 20%); | ||
| max-width: 20%; | ||
| } | ||
| .col-25 { | ||
| @include flex(0, 0, 25%); | ||
| max-width: 25%; | ||
| } | ||
| .col-33, .col-34 { | ||
| @include flex(0, 0, 33.3333%); | ||
| max-width: 33.3333%; | ||
| } | ||
| .col-40 { | ||
| @include flex(0, 0, 40%); | ||
| max-width: 40%; | ||
| } | ||
| .col-50 { | ||
| @include flex(0, 0, 50%); | ||
| max-width: 50%; | ||
| } | ||
| .col-60 { | ||
| @include flex(0, 0, 60%); | ||
| max-width: 60%; | ||
| } | ||
| .col-66, .col-67 { | ||
| @include flex(0, 0, 66.6666%); | ||
| max-width: 66.6666%; | ||
| } | ||
| .col-75 { | ||
| @include flex(0, 0, 75%); | ||
| max-width: 75%; | ||
| } | ||
| .col-80 { | ||
| @include flex(0, 0, 80%); | ||
| max-width: 80%; | ||
| } | ||
| .col-90 { | ||
| @include flex(0, 0, 90%); | ||
| max-width: 90%; | ||
| } | ||
|
|
||
|
|
||
| /* Responsive Grid Classes */ | ||
| /* Adding a class of responsive-X to a row */ | ||
| /* will trigger the flex-direction to */ | ||
| /* change to column and add some margin */ | ||
| /* to any columns in the row for clearity */ | ||
|
|
||
| @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); | ||
| @include responsive-grid-break('.responsive-md', $grid-responsive-md-break); | ||
| @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); |
| @@ -0,0 +1,125 @@ | ||
|
|
||
| /** | ||
| * Lists | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .list { | ||
| position: relative; | ||
| padding-top: $item-border-width; | ||
| padding-bottom: $item-border-width; | ||
| padding-left: 0; // reset padding because ul and ol | ||
| margin-bottom: 20px; | ||
| } | ||
| .list:last-child { | ||
| margin-bottom: 0px; | ||
| &.card{ | ||
| margin-bottom:40px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * List Header | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .list-header { | ||
| margin-top: $list-header-margin-top; | ||
| padding: $list-header-padding; | ||
| background-color: $list-header-bg; | ||
| color: $list-header-color; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| // when its a card make sure it doesn't duplicate top and bottom borders | ||
| .card.list .list-item { | ||
| padding-right: 1px; | ||
| padding-left: 1px; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Cards and Inset Lists | ||
| * -------------------------------------------------- | ||
| * A card and list-inset are close to the same thing, except a card as a box shadow. | ||
| */ | ||
|
|
||
| .card, | ||
| .list-inset { | ||
| overflow: hidden; | ||
| margin: ($content-padding * 2) $content-padding; | ||
| border-radius: $card-border-radius; | ||
| background-color: $card-body-bg; | ||
| } | ||
|
|
||
| .card { | ||
| padding-top: $item-border-width; | ||
| padding-bottom: $item-border-width; | ||
| box-shadow: $card-box-shadow; | ||
|
|
||
| .item { | ||
| border-left: 0; | ||
| border-right: 0; | ||
| } | ||
| .item:first-child { | ||
| border-top: 0; | ||
| } | ||
| .item:last-child { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| .padding { | ||
| .card, .list-inset { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| } | ||
|
|
||
| .card .item, | ||
| .list-inset .item, | ||
| .padding > .list .item | ||
| { | ||
| &:first-child { | ||
| border-top-left-radius: $card-border-radius; | ||
| border-top-right-radius: $card-border-radius; | ||
|
|
||
| .item-content { | ||
| border-top-left-radius: $card-border-radius; | ||
| border-top-right-radius: $card-border-radius; | ||
| } | ||
| } | ||
| &:last-child { | ||
| border-bottom-right-radius: $card-border-radius; | ||
| border-bottom-left-radius: $card-border-radius; | ||
|
|
||
| .item-content { | ||
| border-bottom-right-radius: $card-border-radius; | ||
| border-bottom-left-radius: $card-border-radius; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .card .item:last-child, | ||
| .list-inset .item:last-child { | ||
| margin-bottom: $item-border-width * -1; | ||
| } | ||
|
|
||
| .card .item, | ||
| .list-inset .item, | ||
| .padding > .list .item, | ||
| .padding-horizontal > .list .item { | ||
| margin-right: 0; | ||
| margin-left: 0; | ||
|
|
||
| &.item-input input { | ||
| padding-right: 44px; | ||
| } | ||
| } | ||
| .padding-left > .list .item { | ||
| margin-left: 0; | ||
| } | ||
| .padding-right > .list .item { | ||
| margin-right: 0; | ||
| } |
| @@ -0,0 +1,51 @@ | ||
|
|
||
| /** | ||
| * Loading | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .loading-container { | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
|
|
||
| z-index: $z-index-loading; | ||
|
|
||
| @include display-flex(); | ||
| @include justify-content(center); | ||
| @include align-items(center); | ||
|
|
||
| @include transition(0.2s opacity linear); | ||
| visibility: hidden; | ||
| opacity: 0; | ||
|
|
||
| &:not(.visible) .icon, | ||
| &:not(.visible) .spinner{ | ||
| display: none; | ||
| } | ||
| &.visible { | ||
| visibility: visible; | ||
| } | ||
| &.active { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .loading { | ||
| padding: $loading-padding; | ||
|
|
||
| border-radius: $loading-border-radius; | ||
| background-color: $loading-bg-color; | ||
|
|
||
| color: $loading-text-color; | ||
|
|
||
| text-align: center; | ||
| text-overflow: ellipsis; | ||
| font-size: $loading-font-size; | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| color: $loading-text-color; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,70 @@ | ||
|
|
||
| /** | ||
| * Menus | ||
| * -------------------------------------------------- | ||
| * Side panel structure | ||
| */ | ||
|
|
||
| .menu { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| z-index: $z-index-menu; | ||
| overflow: hidden; | ||
|
|
||
| min-height: 100%; | ||
| max-height: 100%; | ||
| width: $menu-width; | ||
|
|
||
| background-color: $menu-bg; | ||
|
|
||
| .scroll-content { | ||
| z-index: $z-index-menu-scroll-content; | ||
| } | ||
|
|
||
| .bar-header { | ||
| z-index: $z-index-menu-bar-header; | ||
| } | ||
| } | ||
|
|
||
| .menu-content { | ||
| @include transform(none); | ||
| box-shadow: $menu-side-shadow; | ||
| } | ||
|
|
||
| .menu-open .menu-content .pane, | ||
| .menu-open .menu-content .scroll-content { | ||
| pointer-events: none; | ||
| } | ||
| .menu-open .menu-content .scroll-content .scroll { | ||
| pointer-events: none; | ||
| } | ||
| .menu-open .menu-content .scroll-content:not(.overflow-scroll) { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .grade-b .menu-content, | ||
| .grade-c .menu-content { | ||
| @include box-sizing(content-box); | ||
| right: -1px; | ||
| left: -1px; | ||
| border-right: 1px solid #ccc; | ||
| border-left: 1px solid #ccc; | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| .menu-left { | ||
| left: 0; | ||
| } | ||
|
|
||
| .menu-right { | ||
| right: 0; | ||
| } | ||
|
|
||
| .aside-open.aside-resizing .menu-right { | ||
| display: none; | ||
| } | ||
|
|
||
| .menu-animated { | ||
| @include transition-transform($menu-animation-speed ease); | ||
| } |
| @@ -0,0 +1,102 @@ | ||
|
|
||
| /** | ||
| * Modals | ||
| * -------------------------------------------------- | ||
| * Modals are independent windows that slide in from off-screen. | ||
| */ | ||
|
|
||
| .modal-backdrop, | ||
| .modal-backdrop-bg { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: $z-index-modal; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .modal-backdrop-bg { | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .modal { | ||
| display: block; | ||
| position: absolute; | ||
| top: 0; | ||
| z-index: $z-index-modal; | ||
| overflow: hidden; | ||
| min-height: 100%; | ||
| width: 100%; | ||
| background-color: $modal-bg-color; | ||
| } | ||
|
|
||
| @media (min-width: $modal-inset-mode-break-point) { | ||
| // inset mode is when the modal doesn't fill the entire | ||
| // display but instead is centered within a large display | ||
| .modal { | ||
| top: $modal-inset-mode-top; | ||
| right: $modal-inset-mode-right; | ||
| bottom: $modal-inset-mode-bottom; | ||
| left: $modal-inset-mode-left; | ||
| min-height: $modal-inset-mode-min-height; | ||
| width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); | ||
| } | ||
|
|
||
| .modal.ng-leave-active { | ||
| bottom: 0; | ||
| } | ||
|
|
||
| // remove ios header padding from inset header | ||
| .platform-ios.platform-cordova .modal-wrapper .modal { | ||
| .bar-header:not(.bar-subheader) { | ||
| height: $bar-height; | ||
| > * { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
| .tabs-top > .tabs, | ||
| .tabs.tabs-top { | ||
| top: $bar-height; | ||
| } | ||
| .has-header, | ||
| .bar-subheader { | ||
| top: $bar-height; | ||
| } | ||
| .has-subheader { | ||
| top: $bar-height + $bar-subheader-height; | ||
| } | ||
| .has-header.has-tabs-top { | ||
| top: $bar-height + $tabs-height; | ||
| } | ||
| .has-header.has-subheader.has-tabs-top { | ||
| top: $bar-height + $bar-subheader-height + $tabs-height; | ||
| } | ||
| } | ||
|
|
||
| .modal-backdrop-bg { | ||
| @include transition(opacity 300ms ease-in-out); | ||
| background-color: $modal-backdrop-bg-active; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .active .modal-backdrop-bg { | ||
| opacity: 0.5; | ||
| } | ||
| } | ||
|
|
||
| // disable clicks on all but the modal | ||
| .modal-open { | ||
| pointer-events: none; | ||
|
|
||
| .modal, | ||
| .modal-backdrop { | ||
| pointer-events: auto; | ||
| } | ||
| // prevent clicks on modal when loading overlay is active though | ||
| &.loading-active { | ||
| .modal, | ||
| .modal-backdrop { | ||
| pointer-events: none; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,77 @@ | ||
|
|
||
| /** | ||
| * Platform | ||
| * -------------------------------------------------- | ||
| * Platform specific tweaks | ||
| */ | ||
|
|
||
| .platform-ios.platform-cordova { | ||
| // iOS has a status bar which sits on top of the header. | ||
| // Bump down everything to make room for it. However, if | ||
| // if its in Cordova, and set to fullscreen, then disregard the bump. | ||
| &:not(.fullscreen) { | ||
| .bar-header:not(.bar-subheader) { | ||
| height: $bar-height + $ios-statusbar-height; | ||
|
|
||
| &.item-input-inset .item-input-wrapper { | ||
| margin-top: 19px !important; | ||
| } | ||
|
|
||
| > * { | ||
| margin-top: $ios-statusbar-height; | ||
| } | ||
| } | ||
| .tabs-top > .tabs, | ||
| .tabs.tabs-top { | ||
| top: $bar-height + $ios-statusbar-height; | ||
| } | ||
|
|
||
| .has-header, | ||
| .bar-subheader { | ||
| top: $bar-height + $ios-statusbar-height; | ||
| } | ||
| .has-subheader { | ||
| top: $bar-height + $bar-subheader-height + $ios-statusbar-height; | ||
| } | ||
| .has-header.has-tabs-top { | ||
| top: $bar-height + $tabs-height + $ios-statusbar-height; | ||
| } | ||
| .has-header.has-subheader.has-tabs-top { | ||
| top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height; | ||
| } | ||
| } | ||
| .popover{ | ||
| .bar-header:not(.bar-subheader) { | ||
| height: $bar-height; | ||
| &.item-input-inset .item-input-wrapper { | ||
| margin-top: -1px; | ||
| } | ||
| > * { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
| .has-header, | ||
| .bar-subheader { | ||
| top: $bar-height; | ||
| } | ||
| .has-subheader { | ||
| top: $bar-height + $bar-subheader-height; | ||
| } | ||
| } | ||
| &.status-bar-hide { | ||
| // Cordova doesn't adjust the body height correctly, this makes up for it | ||
| margin-bottom: 20px; | ||
| } | ||
| } | ||
|
|
||
| @media (orientation:landscape) { | ||
| .platform-ios.platform-browser.platform-ipad { | ||
| position: fixed; // required for iPad 7 Safari | ||
| } | ||
| } | ||
|
|
||
| .platform-c:not(.enable-transitions) * { | ||
| // disable transitions on grade-c devices (Android 2) | ||
| -webkit-transition: none !important; | ||
| transition: none !important; | ||
| } |
| @@ -0,0 +1,168 @@ | ||
|
|
||
| /** | ||
| * Popovers | ||
| * -------------------------------------------------- | ||
| * Popovers are independent views which float over content | ||
| */ | ||
|
|
||
| .popover-backdrop { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: $z-index-popover; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: $popover-backdrop-bg-inactive; | ||
|
|
||
| &.active { | ||
| background-color: $popover-backdrop-bg-active; | ||
| } | ||
| } | ||
|
|
||
| .popover { | ||
| position: absolute; | ||
| top: 25%; | ||
| left: 50%; | ||
| z-index: $z-index-popover; | ||
| display: block; | ||
| margin-top: 12px; | ||
| margin-left: -$popover-width / 2; | ||
| height: $popover-height; | ||
| width: $popover-width; | ||
| background-color: $popover-bg-color; | ||
| box-shadow: $popover-box-shadow; | ||
| opacity: 0; | ||
|
|
||
| .item:first-child { | ||
| border-top: 0; | ||
| } | ||
|
|
||
| .item:last-child { | ||
| border-bottom: 0; | ||
| } | ||
|
|
||
| &.popover-bottom { | ||
| margin-top: -12px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Set popover border-radius | ||
| .popover, | ||
| .popover .bar-header { | ||
| border-radius: $popover-border-radius; | ||
| } | ||
| .popover .scroll-content { | ||
| z-index: 1; | ||
| margin: 2px 0; | ||
| } | ||
| .popover .bar-header { | ||
| border-bottom-right-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| } | ||
| .popover .has-header { | ||
| border-top-right-radius: 0; | ||
| border-top-left-radius: 0; | ||
| } | ||
| .popover-arrow { | ||
| display: none; | ||
| } | ||
|
|
||
|
|
||
| // iOS Popover | ||
| .platform-ios { | ||
|
|
||
| .popover { | ||
| box-shadow: $popover-box-shadow-ios; | ||
| border-radius: $popover-border-radius-ios; | ||
| } | ||
| .popover .bar-header { | ||
| @include border-top-radius($popover-border-radius-ios); | ||
| } | ||
| .popover .scroll-content { | ||
| margin: 8px 0; | ||
| border-radius: $popover-border-radius-ios; | ||
| } | ||
| .popover .scroll-content.has-header { | ||
| margin-top: 0; | ||
| } | ||
| .popover-arrow { | ||
| position: absolute; | ||
| display: block; | ||
| top: -17px; | ||
| width: 30px; | ||
| height: 19px; | ||
| overflow: hidden; | ||
|
|
||
| &:after { | ||
| position: absolute; | ||
| top: 12px; | ||
| left: 5px; | ||
| width: 20px; | ||
| height: 20px; | ||
| background-color: $popover-bg-color; | ||
| border-radius: 3px; | ||
| content: ''; | ||
| @include rotate(-45deg); | ||
| } | ||
| } | ||
| .popover-bottom .popover-arrow { | ||
| top: auto; | ||
| bottom: -10px; | ||
| &:after { | ||
| top: -6px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Android Popover | ||
| .platform-android { | ||
|
|
||
| .popover { | ||
| margin-top: -32px; | ||
| background-color: $popover-bg-color-android; | ||
| box-shadow: $popover-box-shadow-android; | ||
|
|
||
| .item { | ||
| border-color: $popover-bg-color-android; | ||
| background-color: $popover-bg-color-android; | ||
| color: #4d4d4d; | ||
| } | ||
| &.popover-bottom { | ||
| margin-top: 32px; | ||
| } | ||
| } | ||
|
|
||
| .popover-backdrop, | ||
| .popover-backdrop.active { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // disable clicks on all but the popover | ||
| .popover-open { | ||
| pointer-events: none; | ||
|
|
||
| .popover, | ||
| .popover-backdrop { | ||
| pointer-events: auto; | ||
| } | ||
| // prevent clicks on popover when loading overlay is active though | ||
| &.loading-active { | ||
| .popover, | ||
| .popover-backdrop { | ||
| pointer-events: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // wider popover on larger viewports | ||
| @media (min-width: $popover-large-break-point) { | ||
| .popover { | ||
| width: $popover-large-width; | ||
| margin-left: -$popover-large-width / 2; | ||
| } | ||
| } |
| @@ -0,0 +1,110 @@ | ||
|
|
||
| /** | ||
| * Popups | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .popup-container { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| background: rgba(0,0,0,0); | ||
|
|
||
| @include display-flex(); | ||
| @include justify-content(center); | ||
| @include align-items(center); | ||
|
|
||
| z-index: $z-index-popup; | ||
|
|
||
| // Start hidden | ||
| visibility: hidden; | ||
| &.popup-showing { | ||
| visibility: visible; | ||
| } | ||
|
|
||
| &.popup-hidden .popup { | ||
| @include animation-name(scaleOut); | ||
| @include animation-duration($popup-leave-animation-duration); | ||
| @include animation-timing-function(ease-in-out); | ||
| @include animation-fill-mode(both); | ||
| } | ||
|
|
||
| &.active .popup { | ||
| @include animation-name(superScaleIn); | ||
| @include animation-duration($popup-enter-animation-duration); | ||
| @include animation-timing-function(ease-in-out); | ||
| @include animation-fill-mode(both); | ||
| } | ||
|
|
||
| .popup { | ||
| width: $popup-width; | ||
| max-width: 100%; | ||
| max-height: 90%; | ||
|
|
||
| border-radius: $popup-border-radius; | ||
| background-color: $popup-background-color; | ||
|
|
||
| @include display-flex(); | ||
| @include flex-direction(column); | ||
| } | ||
|
|
||
| input, | ||
| textarea { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .popup-head { | ||
| padding: 15px 10px; | ||
| border-bottom: 1px solid #eee; | ||
| text-align: center; | ||
| } | ||
| .popup-title { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-size: 15px; | ||
| } | ||
| .popup-sub-title { | ||
| margin: 5px 0 0 0; | ||
| padding: 0; | ||
| font-weight: normal; | ||
| font-size: 11px; | ||
| } | ||
| .popup-body { | ||
| padding: 10px; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| .popup-buttons { | ||
| @include display-flex(); | ||
| @include flex-direction(row); | ||
| padding: 10px; | ||
| min-height: $popup-button-min-height + 20; | ||
|
|
||
| .button { | ||
| @include flex(1); | ||
| display: block; | ||
| min-height: $popup-button-min-height; | ||
| border-radius: $popup-button-border-radius; | ||
| line-height: $popup-button-line-height; | ||
|
|
||
| margin-right: 5px; | ||
| &:last-child { | ||
| margin-right: 0px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .popup-open { | ||
| pointer-events: none; | ||
|
|
||
| &.modal-open .modal { | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .popup-backdrop, .popup { | ||
| pointer-events: auto; | ||
| } | ||
| } |
| @@ -0,0 +1,11 @@ | ||
|
|
||
| /** | ||
| * Progress | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| progress { | ||
| display: block; | ||
| margin: $progress-margin; | ||
| width: $progress-width; | ||
| } |
| @@ -0,0 +1,47 @@ | ||
|
|
||
| /** | ||
| * Radio Button Inputs | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .item-radio { | ||
| padding: 0; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| .item-radio .item-content { | ||
| /* give some room to the right for the checkmark icon */ | ||
| padding-right: $item-padding * 4; | ||
| } | ||
|
|
||
| .item-radio .radio-icon { | ||
| /* checkmark icon will be hidden by default */ | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| z-index: $z-index-item-radio; | ||
| visibility: hidden; | ||
| padding: $item-padding - 2; | ||
| height: 100%; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .item-radio input { | ||
| /* hide any radio button inputs elements (the ugly circles) */ | ||
| position: absolute; | ||
| left: -9999px; | ||
|
|
||
| &:checked + .radio-content .item-content { | ||
| /* style the item content when its checked */ | ||
| background: #f7f7f7; | ||
| } | ||
|
|
||
| &:checked + .radio-content .radio-icon { | ||
| /* show the checkmark icon when its checked */ | ||
| visibility: visible; | ||
| } | ||
| } | ||
|
|
| @@ -0,0 +1,160 @@ | ||
|
|
||
| /** | ||
| * Range | ||
| * -------------------------------------------------- | ||
| */ | ||
|
|
||
| .range input{ | ||
| display: inline-block; | ||
| overflow: hidden; | ||
| margin-top: 5px; | ||
| margin-bottom: 5px; | ||
| padding-right: 2px; | ||
| padding-left: 1px; | ||
| width: auto; | ||
| height: $range-slider-height + 15; | ||
| outline: none; | ||
| background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $range-default-track-bg), color-stop(100%, $range-default-track-bg)); | ||
| background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%); | ||
| background-position: center; | ||
| background-size: 99% $range-track-height; | ||
| background-repeat: no-repeat; | ||
| -webkit-appearance: none; | ||
|
|
||
| &::-moz-focus-outer { | ||
| /* hide the focus outline in Firefox */ | ||
| border: 0; | ||
| } | ||
|
|
||
| &::-webkit-slider-thumb { | ||
| position: relative; | ||
| width: $range-slider-width; | ||
| height: $range-slider-height; | ||
| border-radius: $range-slider-border-radius; | ||
| background-color: $toggle-handle-off-bg-color; | ||
| box-shadow: $range-slider-box-shadow; | ||
| cursor: pointer; | ||
| -webkit-appearance: none; | ||
| border: 0; | ||
| } | ||
|
|
||
| &::-webkit-slider-thumb:before{ | ||
| /* what creates the colorful line on the left side of the slider */ | ||
| position: absolute; | ||
| top: ($range-slider-height / 2) - ($range-track-height / 2); | ||
| left: -2001px; | ||
| width: 2000px; | ||
| height: $range-track-height; | ||
| background: $dark; | ||
| content: ' '; | ||
| } | ||
|
|
||
| &::-webkit-slider-thumb:after { | ||
| /* create a larger (but hidden) hit area */ | ||
| position: absolute; | ||
| top: -15px; | ||
| left: -15px; | ||
| padding: 30px; | ||
| content: ' '; | ||
| //background: red; | ||
| //opacity: .5; | ||
| } | ||
| &::-ms-fill-lower{ | ||
| height: $range-track-height; | ||
| background:$dark; | ||
| } | ||
| /* | ||
| &::-ms-track{ | ||
| background: transparent; | ||
| border-color: transparent; | ||
| border-width: 11px 0 16px; | ||
| color:transparent; | ||
| margin-top:20px; | ||
| } | ||
| &::-ms-thumb { | ||
| width: $range-slider-width; | ||
| height: $range-slider-height; | ||
| border-radius: $range-slider-border-radius; | ||
| background-color: $toggle-handle-off-bg-color; | ||
| border-color:$toggle-handle-off-bg-color; | ||
| box-shadow: $range-slider-box-shadow; | ||
| margin-left:1px; | ||
| margin-right:1px; | ||
| outline:none; | ||
| } | ||
| &::-ms-fill-upper { | ||
| height: $range-track-height; | ||
| background:$range-default-track-bg; | ||
| } | ||
| */ | ||
| } | ||
|
|
||
| .range { | ||
| @include display-flex(); | ||
| @include align-items(center); | ||
| padding: 2px 11px; | ||
|
|
||
| &.range-light { | ||
| input { @include range-style($range-light-track-bg); } | ||
| } | ||
| &.range-stable { | ||
| input { @include range-style($range-stable-track-bg); } | ||
| } | ||
| &.range-positive { | ||
| input { @include range-style($range-positive-track-bg); } | ||
| } | ||
| &.range-calm { | ||
| input { @include range-style($range-calm-track-bg); } | ||
| } | ||
| &.range-balanced { | ||
| input { @include range-style($range-balanced-track-bg); } | ||
| } | ||
| &.range-assertive { | ||
| input { @include range-style($range-assertive-track-bg); } | ||
| } | ||
| &.range-energized { | ||
| input { @include range-style($range-energized-track-bg); } | ||
| } | ||
| &.range-royal { | ||
| input { @include range-style($range-royal-track-bg); } | ||
| } | ||
| &.range-dark { | ||
| input { @include range-style($range-dark-track-bg); } | ||
| } | ||
| } | ||
|
|
||
| .range .icon { | ||
| @include flex(0); | ||
| display: block; | ||
| min-width: $range-icon-size; | ||
| text-align: center; | ||
| font-size: $range-icon-size; | ||
| } | ||
|
|
||
| .range input { | ||
| @include flex(1); | ||
| display: block; | ||
| margin-right: 10px; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .range-label { | ||
| @include flex(0, 0, auto); | ||
| display: block; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .range-label:first-child { | ||
| padding-left: 5px; | ||
| } | ||
| .range input + .range-label { | ||
| padding-right: 5px; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| // WP range height must be auto | ||
| .platform-windowsphone{ | ||
| .range input{ | ||
| height:auto; | ||
| } | ||
| } |
| @@ -0,0 +1,113 @@ | ||
|
|
||
| // Scroll refresher (for pull to refresh) | ||
| .scroll-refresher { | ||
| position: absolute; | ||
| top: -60px; | ||
| right: 0; | ||
| left: 0; | ||
| overflow: hidden; | ||
| margin: auto; | ||
| height: 60px; | ||
| .ionic-refresher-content { | ||
| position: absolute; | ||
| bottom: 15px; | ||
| left: 0; | ||
| width: 100%; | ||
| color: $scroll-refresh-icon-color; | ||
| text-align: center; | ||
|
|
||
| font-size: 30px; | ||
|
|
||
| .text-refreshing, | ||
| .text-pulling { | ||
| font-size: 16px; | ||
| line-height: 16px; | ||
| } | ||
| &.ionic-refresher-with-text { | ||
| bottom: 10px; | ||
| } | ||
| } | ||
|
|
||
| .icon-refreshing, | ||
| .icon-pulling { | ||
| width: 100%; | ||
| -webkit-backface-visibility: hidden; | ||
| backface-visibility: hidden; | ||
| -webkit-transform-style: preserve-3d; | ||
| transform-style: preserve-3d; | ||
| } | ||
| .icon-pulling { | ||
| @include animation-name(refresh-spin-back); | ||
| @include animation-duration(200ms); | ||
| @include animation-timing-function(linear); | ||
| @include animation-fill-mode(none); | ||
| -webkit-transform: translate3d(0,0,0) rotate(0deg); | ||
| transform: translate3d(0,0,0) rotate(0deg); | ||
| } | ||
| .icon-refreshing, | ||
| .text-refreshing { | ||
| display: none; | ||
| } | ||
| .icon-refreshing { | ||
| @include animation-duration(1.5s); | ||
| } | ||
|
|
||
| &.active { | ||
| .icon-pulling:not(.pulling-rotation-disabled) { | ||
| @include animation-name(refresh-spin); | ||
| -webkit-transform: translate3d(0,0,0) rotate(-180deg); | ||
| transform: translate3d(0,0,0) rotate(-180deg); | ||
| } | ||
| &.refreshing { | ||
| @include transition(-webkit-transform .2s); | ||
| @include transition(transform .2s); | ||
| -webkit-transform: scale(1,1); | ||
| transform: scale(1,1); | ||
|
|
||
| .icon-pulling, | ||
| .text-pulling { | ||
| display: none; | ||
| } | ||
| .icon-refreshing, | ||
| .text-refreshing { | ||
| display: block; | ||
| } | ||
| &.refreshing-tail { | ||
| -webkit-transform: scale(0,0); | ||
| transform: scale(0,0); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .overflow-scroll > .scroll{ | ||
| &.overscroll{ | ||
| position:fixed; | ||
| right: 0; | ||
| left: 0; | ||
| } | ||
| -webkit-overflow-scrolling:touch; | ||
| width:100%; | ||
| } | ||
|
|
||
| .overflow-scroll.padding > .scroll.overscroll{ | ||
| padding: 10px; | ||
| } | ||
| @-webkit-keyframes refresh-spin { | ||
| 0% { -webkit-transform: translate3d(0,0,0) rotate(0); } | ||
| 100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } | ||
| } | ||
|
|
||
| @keyframes refresh-spin { | ||
| 0% { transform: translate3d(0,0,0) rotate(0); } | ||
| 100% { transform: translate3d(0,0,0) rotate(180deg); } | ||
| } | ||
|
|
||
| @-webkit-keyframes refresh-spin-back { | ||
| 0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } | ||
| 100% { -webkit-transform: translate3d(0,0,0) rotate(0); } | ||
| } | ||
|
|
||
| @keyframes refresh-spin-back { | ||
| 0% { transform: translate3d(0,0,0) rotate(180deg); } | ||
| 100% { transform: translate3d(0,0,0) rotate(0); } | ||
| } |
| @@ -0,0 +1,365 @@ | ||
|
|
||
| /** | ||
| * Resets | ||
| * -------------------------------------------------- | ||
| * Adapted from normalize.css and some reset.css. We don't care even one | ||
| * bit about old IE, so we don't need any hacks for that in here. | ||
| * | ||
| * There are probably other things we could remove here, as well. | ||
| * | ||
| * normalize.css v2.1.2 | MIT License | git.io/normalize | ||
| * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) | ||
| * http://cssreset.com | ||
| */ | ||
|
|
||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, i, u, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, fieldset, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| vertical-align: baseline; | ||
| font: inherit; | ||
| font-size: 100%; | ||
| } | ||
|
|
||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, blockquote:after, | ||
| q:before, q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
|
|
||
| /** | ||
| * Prevent modern browsers from displaying `audio` without controls. | ||
| * Remove excess height in iOS 5 devices. | ||
| */ | ||
|
|
||
| audio:not([controls]) { | ||
| display: none; | ||
| height: 0; | ||
| } | ||
|
|
||
| /** | ||
| * 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 { | ||
| @include user-select(none); | ||
| font-family: sans-serif; /* 1 */ | ||
| -webkit-text-size-adjust: 100%; | ||
| -ms-text-size-adjust: 100%; /* 2 */ | ||
| -webkit-text-size-adjust: 100%; /* 2 */ | ||
| } | ||
|
|
||
| /** | ||
| * Remove default margin. | ||
| */ | ||
|
|
||
| body { | ||
| margin: 0; | ||
| line-height: 1; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Remove default outlines. | ||
| */ | ||
| a, | ||
| button, | ||
| :focus, | ||
| a:focus, | ||
| button:focus, | ||
| a:active, | ||
| a:hover { | ||
| outline: 0; | ||
| } | ||
|
|
||
| /* * | ||
| * Remove tap highlight color | ||
| */ | ||
|
|
||
| a { | ||
| -webkit-user-drag: none; | ||
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | ||
| -webkit-tap-highlight-color: transparent; | ||
|
|
||
| &[href]:hover { | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| /* ========================================================================== | ||
| Typography | ||
| ========================================================================== */ | ||
|
|
||
|
|
||
| /** | ||
| * 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; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Correct font family set oddly in Safari 5 and Chrome. | ||
| */ | ||
|
|
||
| code, | ||
| kbd, | ||
| pre, | ||
| samp { | ||
| font-size: 1em; | ||
| font-family: monospace, serif; | ||
| } | ||
|
|
||
| /** | ||
| * 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 { | ||
| position: relative; | ||
| vertical-align: baseline; | ||
| font-size: 75%; | ||
| line-height: 0; | ||
| } | ||
|
|
||
| sup { | ||
| top: -0.5em; | ||
| } | ||
|
|
||
| sub { | ||
| bottom: -0.25em; | ||
| } | ||
|
|
||
| /** | ||
| * Define consistent border, margin, and padding. | ||
| */ | ||
|
|
||
| fieldset { | ||
| margin: 0 2px; | ||
| padding: 0.35em 0.625em 0.75em; | ||
| border: 1px solid #c0c0c0; | ||
| } | ||
|
|
||
| /** | ||
| * 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 { | ||
| padding: 0; /* 2 */ | ||
| border: 0; /* 1 */ | ||
| } | ||
|
|
||
| /** | ||
| * 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. | ||
| * 4. Remove any default :focus styles | ||
| * 5. Make sure webkit font smoothing is being inherited | ||
| * 6. Remove default gradient in Android Firefox / FirefoxOS | ||
| */ | ||
|
|
||
| button, | ||
| input, | ||
| select, | ||
| textarea { | ||
| margin: 0; /* 3 */ | ||
| font-size: 100%; /* 2 */ | ||
| font-family: inherit; /* 1 */ | ||
| outline-offset: 0; /* 4 */ | ||
| outline-style: none; /* 4 */ | ||
| outline-width: 0; /* 4 */ | ||
| -webkit-font-smoothing: inherit; /* 5 */ | ||
| background-image: none; /* 6 */ | ||
| } | ||
|
|
||
| /** | ||
| * Address Firefox 4+ setting `line-height` on `input` using `importnt` 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"] { | ||
| cursor: pointer; /* 3 */ | ||
| -webkit-appearance: button; /* 2 */ | ||
| } | ||
|
|
||
| /** | ||
| * Re-set default cursor for disabled elements. | ||
| */ | ||
|
|
||
| button[disabled], | ||
| html input[disabled] { | ||
| cursor: default; | ||
| } | ||
|
|
||
| /** | ||
| * 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-box-sizing: content-box; /* 2 */ | ||
| -moz-box-sizing: content-box; | ||
| box-sizing: content-box; | ||
| -webkit-appearance: textfield; /* 1 */ | ||
| } | ||
|
|
||
| /** | ||
| * 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 { | ||
| padding: 0; | ||
| border: 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 */ | ||
| } | ||
|
|
||
|
|
||
| img { | ||
| -webkit-user-drag: none; | ||
| } | ||
|
|
||
| /* ========================================================================== | ||
| Tables | ||
| ========================================================================== */ | ||
|
|
||
| /** | ||
| * Remove most spacing between table cells. | ||
| */ | ||
|
|
||
| table { | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| } |
