103 |
I have a place, I just need a Roommate
104 |
105 |
106 | Rent:
{{profile.location.myPlace.rent | currency}}
107 |
108 |
109 |
110 |
111 |
112 | Location:
{{profile.location.myPlace.city}}, {{profile.location.myPlace.state}}
113 |
114 |
115 |
116 |
117 |
118 |
Choice Ionicons:
119 |
121 |
122 |
123 |
124 |
125 | Preferred Roommate Gender:
{{profile.roommatePreferences.gender}}
126 |
127 |
128 |
129 |
130 |
131 |
A few words of description: {{keyword}}
132 |
134 |
142 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_util.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Utility Classes
4 | * --------------------------------------------------
5 | */
6 |
7 | .hide {
8 | display: none;
9 | }
10 | .opacity-hide {
11 | opacity: 0;
12 | }
13 | .grade-b .opacity-hide,
14 | .grade-c .opacity-hide {
15 | opacity: 1;
16 | display: none;
17 | }
18 | .show {
19 | display: block;
20 | }
21 | .opacity-show {
22 | opacity: 1;
23 | }
24 | .invisible {
25 | visibility: hidden;
26 | }
27 |
28 | .keyboard-open .hide-on-keyboard-open {
29 | display: none;
30 | }
31 |
32 | .keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
33 | .keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
34 | bottom: 0;
35 | }
36 |
37 | .inline {
38 | display: inline-block;
39 | }
40 |
41 | .disable-pointer-events {
42 | pointer-events: none;
43 | }
44 |
45 | .enable-pointer-events {
46 | pointer-events: auto;
47 | }
48 |
49 | .disable-user-behavior {
50 | // used to prevent the browser from doing its native behavior. this doesnt
51 | // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
52 |
53 | @include user-select(none);
54 | @include touch-callout(none);
55 | @include tap-highlight-transparent();
56 |
57 | -webkit-user-drag: none;
58 |
59 | -ms-touch-action: none;
60 | -ms-content-zooming: none;
61 | }
62 |
63 | // Fill the screen to block clicks (a better pointer-events: none) for the body
64 | // to avoid full-page reflows and paints which can cause flickers
65 | .click-block {
66 | position: absolute;
67 | top: 0;
68 | right: 0;
69 | bottom: 0;
70 | left: 0;
71 | opacity: 0;
72 | z-index: $z-index-click-block;
73 | @include translate3d(0, 0, 0);
74 | overflow: hidden;
75 | }
76 | .click-block-hide {
77 | @include translate3d(-9999px, 0, 0);
78 | }
79 |
80 | .no-resize {
81 | resize: none;
82 | }
83 |
84 | .block {
85 | display: block;
86 | clear: both;
87 | &:after {
88 | display: block;
89 | visibility: hidden;
90 | clear: both;
91 | height: 0;
92 | content: ".";
93 | }
94 | }
95 |
96 | .full-image {
97 | width: 100%;
98 | }
99 |
100 | .clearfix {
101 | *zoom: 1;
102 | &:before,
103 | &:after {
104 | display: table;
105 | content: "";
106 | // Fixes Opera/contenteditable bug:
107 | // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
108 | line-height: 0;
109 | }
110 | &:after {
111 | clear: both;
112 | }
113 | }
114 |
115 | /**
116 | * Content Padding
117 | * --------------------------------------------------
118 | */
119 |
120 | .padding {
121 | padding: $content-padding;
122 | }
123 |
124 | .padding-top,
125 | .padding-vertical {
126 | padding-top: $content-padding;
127 | }
128 |
129 | .padding-right,
130 | .padding-horizontal {
131 | padding-right: $content-padding;
132 | }
133 |
134 | .padding-bottom,
135 | .padding-vertical {
136 | padding-bottom: $content-padding;
137 | }
138 |
139 | .padding-left,
140 | .padding-horizontal {
141 | padding-left: $content-padding;
142 | }
143 |
144 |
145 | /**
146 | * Scrollable iFrames
147 | * --------------------------------------------------
148 | */
149 |
150 | .iframe-wrapper {
151 | position: fixed;
152 | -webkit-overflow-scrolling: touch;
153 | overflow: scroll;
154 |
155 | iframe {
156 | height: 100%;
157 | width: 100%;
158 | }
159 | }
160 |
161 |
162 | /**
163 | * Rounded
164 | * --------------------------------------------------
165 | */
166 |
167 | .rounded {
168 | border-radius: $border-radius-base;
169 | }
170 |
171 |
172 | /**
173 | * Utility Colors
174 | * --------------------------------------------------
175 | * Utility colors are added to help set a naming convention. You'll
176 | * notice we purposely do not use words like "red" or "blue", but
177 | * instead have colors which represent an emotion or generic theme.
178 | */
179 |
180 | .light, a.light {
181 | color: $light;
182 | }
183 | .light-bg {
184 | background-color: $light;
185 | }
186 | .light-border {
187 | border-color: $button-light-border;
188 | }
189 |
190 | .stable, a.stable {
191 | color: $stable;
192 | }
193 | .stable-bg {
194 | background-color: $stable;
195 | }
196 | .stable-border {
197 | border-color: $button-stable-border;
198 | }
199 |
200 | .positive, a.positive {
201 | color: $positive;
202 | }
203 | .positive-bg {
204 | background-color: $positive;
205 | }
206 | .positive-border {
207 | border-color: $button-positive-border;
208 | }
209 |
210 | .calm, a.calm {
211 | color: $calm;
212 | }
213 | .calm-bg {
214 | background-color: $calm;
215 | }
216 | .calm-border {
217 | border-color: $button-calm-border;
218 | }
219 |
220 | .assertive, a.assertive {
221 | color: $assertive;
222 | }
223 | .assertive-bg {
224 | background-color: $assertive;
225 | }
226 | .assertive-border {
227 | border-color: $button-assertive-border;
228 | }
229 |
230 | .balanced, a.balanced {
231 | color: $balanced;
232 | }
233 | .balanced-bg {
234 | background-color: $balanced;
235 | }
236 | .balanced-border {
237 | border-color: $button-balanced-border;
238 | }
239 |
240 | .energized, a.energized {
241 | color: $energized;
242 | }
243 | .energized-bg {
244 | background-color: $energized;
245 | }
246 | .energized-border {
247 | border-color: $button-energized-border;
248 | }
249 |
250 | .royal, a.royal {
251 | color: $royal;
252 | }
253 | .royal-bg {
254 | background-color: $royal;
255 | }
256 | .royal-border {
257 | border-color: $button-royal-border;
258 | }
259 |
260 | .dark, a.dark {
261 | color: $dark;
262 | }
263 | .dark-bg {
264 | background-color: $dark;
265 | }
266 | .dark-border {
267 | border-color: $button-dark-border;
268 | }
269 |
270 | [collection-repeat] {
271 | /* Position is set by transforms */
272 | left: 0 !important;
273 | top: 0 !important;
274 | position: absolute !important;
275 | z-index: 1;
276 | }
277 | .collection-repeat-container {
278 | position: relative;
279 | z-index: 1; //make sure it's above the after-container
280 | }
281 | .collection-repeat-after-container {
282 | z-index: 0;
283 | display: block;
284 |
285 | /* when scrolling horizontally, make sure the after container doesn't take up 100% width */
286 | &.horizontal {
287 | display: inline-block;
288 | }
289 | }
290 |
--------------------------------------------------------------------------------
/www/app.js:
--------------------------------------------------------------------------------
1 | // Ionic Starter App
2 |
3 | // angular.module is a global place for creating, registering and retrieving Angular modules
4 | // 'starter' is the name of this angular module example (also set in a attribute in index.html)
5 | // the 2nd parameter is an array of 'requires'
6 | // 'starter.services' is found in services.js
7 | // 'starter.controllers' is found in controllers.js
8 | angular.module('starter', [
9 | 'ionic',
10 | 'ngResource',
11 | 'firebase',
12 | 'login.controllers',
13 | 'login.services',
14 | 'matches.controllers',
15 | 'profile.controllers',
16 | 'profile.directives',
17 | 'userProfile.controllers',
18 | 'preferences.controllers',
19 | 'people.controllers',
20 | 'swipe.controllers',
21 | 'data',
22 | 'map.controllers',
23 | 'map.services',
24 | 'account.controllers',
25 | 'chats.services',
26 | 'chats.controllers',
27 | 'userProfile.services',
28 | 'ionic.contrib.ui.tinderCards'
29 | ])
30 |
31 | .filter('range', function() {
32 | return function(input, start, end) {
33 | start = parseInt(start);
34 | end = parseInt(end);
35 | var direction = (start <= end) ? 1 : -1;
36 | while (start != end) {
37 | input.push(start);
38 | start += direction;
39 | }
40 | return input;
41 | };
42 | })
43 |
44 | .run(function($ionicPlatform, $rootScope, $state, userSession, CandidatesFactory, MatchesFactory) {
45 | $ionicPlatform.ready(function() {
46 | // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
47 | // for form inputs)
48 | if (window.cordova && window.cordova.plugins.Keyboard) {
49 | cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
50 | }
51 | if (window.StatusBar) {
52 | // org.apache.cordova.statusbar required
53 | StatusBar.styleDefault();
54 | }
55 | });
56 |
57 | $rootScope.$on('userRetrieved', function(event, data){
58 | CandidatesFactory.initialize(data.data);
59 | MatchesFactory.initialize(data.data);
60 | });
61 |
62 | })
63 |
64 | .config(function($stateProvider, $urlRouterProvider, $httpProvider) {
65 | // Ionic uses AngularUI Router which uses the concept of states
66 | // Learn more here: https://github.com/angular-ui/ui-router
67 | // Set up the various states which the app can be in.
68 | // Each state's controller can be found in controllers.js
69 | $stateProvider
70 | // setup an abstract state for the tabs directive
71 | .state('tab', {
72 | url: '/tab',
73 | abstract: true,
74 | templateUrl: 'tabs.html',
75 | // Sets the User object to the user data firebase returns from fb
76 | // To access this data, simply inject User into the controller
77 | resolve: {
78 | User: function(userSession, LoginFact){
79 | console.log('userSession: ', userSession);
80 | var user = userSession.user;
81 |
82 | return LoginFact.saveUser(user)
83 | .then(function(data){
84 | console.log('DATA for resolved USER', data);
85 | return data.data;
86 | })
87 | }
88 | }
89 | })
90 | // Each tab has its own nav history stack:
91 | .state('tab.swipe', {
92 | url: '/swipe',
93 | views: {
94 | 'tab-swipe': {
95 | templateUrl: 'swipe/swipe.html',
96 | controller: 'SwipeController'
97 | }
98 | }
99 | })
100 |
101 | .state('tab.swipe-detail', {
102 | url: '/:type/profiles/:id',
103 | views: {
104 | 'tab-swipe': {
105 | templateUrl: 'profiles/profile.html',
106 | controller: 'ProfileCtrl'
107 | }
108 | }
109 | })
110 |
111 | .state('tab.account', {
112 | url: '/account',
113 | views: {
114 | 'tab-account': {
115 | templateUrl: 'account/account.html',
116 | controller: 'AccountCtrl'
117 | }
118 | }
119 | })
120 |
121 | .state('tab.account-profile', {
122 | url: '/account/profile',
123 | views: {
124 | 'tab-account': {
125 | templateUrl: 'profiles/profile.html',
126 | controller: 'ProfileCtrl'
127 | }
128 | }
129 | })
130 |
131 | .state('tab.account-place', {
132 | url: '/account/place',
133 | views: {
134 | 'tab-account': {
135 | templateUrl: 'account/place/place.html',
136 | controller: 'PlaceCtrl'
137 | }
138 | }
139 | })
140 |
141 | .state('tab.account-people', {
142 | url: '/account/people',
143 | views: {
144 | 'tab-account': {
145 | templateUrl: 'account/people/people.html',
146 | controller: 'PeopleCtrl'
147 | }
148 | }
149 | })
150 |
151 | .state('tab.account-editProfile', {
152 | url: '/account/profile/edit',
153 | views: {
154 | 'tab-account': {
155 | templateUrl: 'account/userProfile/userProfile.html',
156 | controller: 'UserProfileCtrl'
157 | }
158 | }
159 | })
160 |
161 | .state('tab.account-map', {
162 | url: '/account/map',
163 | views: {
164 | 'tab-account': {
165 | templateUrl: 'map/map.html',
166 | controller: 'MapCtrl'
167 | }
168 | }
169 | })
170 |
171 | // all matches state view
172 | .state('tab.matches', {
173 | url: '/matches',
174 | views: {
175 | 'tab-matches': {
176 | templateUrl: 'matches/matches.html',
177 | controller: 'MatchesCtrl'
178 | }
179 | }
180 | })
181 |
182 | .state('tab.matches-detail', {
183 | url: '/matches/profiles/:type/:id',
184 | views: {
185 | 'tab-matches': {
186 | templateUrl: 'profiles/profile.html',
187 | controller: 'ProfileCtrl'
188 | }
189 | }
190 | })
191 |
192 | .state('tab.matches-chat', {
193 | url: '/matches/chat/:matchId',
194 | views: {
195 | 'tab-matches': {
196 | templateUrl: 'chats/chats.html',
197 | controller: 'ChatsCtrl'
198 | }
199 | }
200 | })
201 |
202 | .state('login', {
203 | url: '/login',
204 | templateUrl: 'login/login.html',
205 | controller: 'LoginCtrl'
206 | })
207 |
208 | // if none of the above states are matched, redirect to the login tab
209 | $urlRouterProvider.otherwise('/login');
210 |
211 | $httpProvider.defaults.useXDomain = true;
212 | delete $httpProvider.defaults.headers.common['X-Requested-With'];
213 |
214 | });
215 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_scaffolding.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Scaffolding
4 | * --------------------------------------------------
5 | */
6 |
7 | *,
8 | *:before,
9 | *:after {
10 | @include box-sizing(border-box);
11 | }
12 |
13 | html {
14 | overflow: hidden;
15 | -ms-touch-action: pan-y;
16 | touch-action: pan-y;
17 | }
18 |
19 | body,
20 | .ionic-body {
21 | @include touch-callout(none);
22 | @include font-smoothing(antialiased);
23 | @include text-size-adjust(none);
24 | @include tap-highlight-transparent();
25 | @include user-select(none);
26 |
27 | top: 0;
28 | right: 0;
29 | bottom: 0;
30 | left: 0;
31 | overflow: hidden;
32 |
33 | margin: 0;
34 | padding: 0;
35 |
36 | color: $base-color;
37 | word-wrap: break-word;
38 | font-size: $font-size-base;
39 | font-family: $font-family-base;
40 | line-height: $line-height-computed;
41 | text-rendering: optimizeLegibility;
42 | -webkit-backface-visibility: hidden;
43 | -webkit-user-drag: none;
44 | -ms-content-zooming: none;
45 | }
46 |
47 | body.grade-b,
48 | body.grade-c {
49 | // disable optimizeLegibility for low end devices
50 | text-rendering: auto;
51 | }
52 |
53 | .content {
54 | // used for content areas not using the content directive
55 | position: relative;
56 | }
57 |
58 | .scroll-content {
59 | position: absolute;
60 | top: 0;
61 | right: 0;
62 | bottom: 0;
63 | left: 0;
64 | overflow: hidden;
65 |
66 | // Hide the top border if any
67 | margin-top: -1px;
68 |
69 | // Prevents any distortion of lines
70 | padding-top: 1px;
71 | margin-bottom: -1px;
72 |
73 | width: auto;
74 | height: auto;
75 | }
76 |
77 | .scroll-content-false,
78 | .menu .scroll-content.scroll-content-false{
79 | z-index: $z-index-scroll-content-false;
80 | }
81 |
82 | .scroll-view {
83 | position: relative;
84 | display: block;
85 | overflow: hidden;
86 |
87 | // Hide the top border if any
88 | margin-top: -1px;
89 | }
90 |
91 | /**
92 | * Scroll is the scroll view component available for complex and custom
93 | * scroll view functionality.
94 | */
95 | .scroll {
96 | @include user-select(none);
97 | @include touch-callout(none);
98 | @include text-size-adjust(none);
99 | @include transform-origin(left, top);
100 | }
101 |
102 | // Scroll bar styles
103 | .scroll-bar {
104 | position: absolute;
105 | z-index: $z-index-scroll-bar;
106 | }
107 | // hide the scroll-bar during animations
108 | .ng-animate .scroll-bar {
109 | visibility: hidden;
110 | }
111 | .scroll-bar-h {
112 | right: 2px;
113 | bottom: 3px;
114 | left: 2px;
115 | height: 3px;
116 |
117 | .scroll-bar-indicator {
118 | height: 100%;
119 | }
120 | }
121 |
122 | .scroll-bar-v {
123 | top: 2px;
124 | right: 3px;
125 | bottom: 2px;
126 | width: 3px;
127 |
128 | .scroll-bar-indicator {
129 | width: 100%;
130 | }
131 | }
132 | .scroll-bar-indicator {
133 | position: absolute;
134 | border-radius: 4px;
135 | background: rgba(0,0,0,0.3);
136 | opacity: 1;
137 | @include transition(opacity .3s linear);
138 |
139 | &.scroll-bar-fade-out {
140 | opacity: 0;
141 | }
142 | }
143 | .platform-android .scroll-bar-indicator {
144 | // android doesn't have rounded ends on scrollbar
145 | border-radius: 0;
146 | }
147 | .grade-b .scroll-bar-indicator,
148 | .grade-c .scroll-bar-indicator {
149 | // disable rgba background and border radius for low end devices
150 | background: #aaa;
151 |
152 | &.scroll-bar-fade-out {
153 | @include transition(none);
154 | }
155 | }
156 |
157 | ion-infinite-scroll {
158 | height: 60px;
159 | width: 100%;
160 | display: block;
161 |
162 | @include display-flex();
163 | @include flex-direction(row);
164 | @include justify-content(center);
165 | @include align-items(center);
166 |
167 | .icon {
168 | color: #666666;
169 | font-size: 30px;
170 | color: $scroll-refresh-icon-color;
171 | }
172 | .icon:before,
173 | .spinner{
174 | -webkit-transform: translate3d(0,0,0);
175 | transform: translate3d(0,0,0);
176 | }
177 | &:not(.active){
178 | .spinner,
179 | .icon:before{
180 | -webkit-transform: translate3d(-1000px,0,0);
181 | transform: translate3d(-1000px,0,0);
182 | }
183 | }
184 | }
185 |
186 | .overflow-scroll {
187 | overflow-x: hidden;
188 | overflow-y: scroll;
189 | -webkit-overflow-scrolling: touch;
190 | top: 0;
191 | right: 0;
192 | bottom: 0;
193 | left: 0;
194 | position: absolute;
195 |
196 | .scroll {
197 | position: static;
198 | height: 100%;
199 | -webkit-transform: translate3d(0, 0, 0); // fix iOS bug where relative children of scroller disapear while scrolling. see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
200 | }
201 | }
202 |
203 |
204 | // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
205 | // Note: For these to work, content must come after both bars in the markup
206 | /* If you change these, change platform.scss as well */
207 | .has-header {
208 | top: $bar-height;
209 | }
210 | // Force no header
211 | .no-header {
212 | top: 0;
213 | }
214 |
215 | .has-subheader {
216 | top: $bar-height + $bar-subheader-height;
217 | }
218 | .has-tabs-top {
219 | top: $bar-height + $tabs-height;
220 | }
221 | .has-header.has-subheader.has-tabs-top {
222 | top: $bar-height + $bar-subheader-height + $tabs-height;
223 | }
224 |
225 | .has-footer {
226 | bottom: $bar-footer-height;
227 | }
228 | .has-subfooter {
229 | bottom: $bar-footer-height + $bar-subfooter-height;
230 | }
231 |
232 | .has-tabs,
233 | .bar-footer.has-tabs {
234 | bottom: $tabs-height;
235 | &.pane{
236 | bottom: $tabs-height;
237 | height:auto;
238 | }
239 | }
240 |
241 | .has-footer.has-tabs {
242 | bottom: $tabs-height + $bar-footer-height;
243 | }
244 |
245 | // A full screen section with a solid background
246 | .pane {
247 | @include translate3d(0,0,0);
248 | @include transition-duration(0);
249 | z-index: $z-index-pane;
250 | }
251 | .view {
252 | z-index: $z-index-view;
253 | }
254 | .pane,
255 | .view {
256 | position: absolute;
257 | top: 0;
258 | right: 0;
259 | bottom: 0;
260 | left: 0;
261 | width: 100%;
262 | height: 100%;
263 | background-color: $base-background-color;
264 | overflow: hidden;
265 | }
266 | .view-container {
267 | position: absolute;
268 | display: block;
269 | width: 100%;
270 | height: 100%;
271 | }
272 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_form.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Forms
3 | * --------------------------------------------------
4 | */
5 |
6 | // Make all forms have space below them
7 | form {
8 | margin: 0 0 $line-height-base;
9 | }
10 |
11 | // Groups of fields with labels on top (legends)
12 | legend {
13 | display: block;
14 | margin-bottom: $line-height-base;
15 | padding: 0;
16 | width: 100%;
17 | border: $input-border-width solid $input-border;
18 | color: $dark;
19 | font-size: $font-size-base * 1.5;
20 | line-height: $line-height-base * 2;
21 |
22 | small {
23 | color: $stable;
24 | font-size: $line-height-base * .75;
25 | }
26 | }
27 |
28 | // Set font for forms
29 | label,
30 | input,
31 | button,
32 | select,
33 | textarea {
34 | @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
35 | }
36 | input,
37 | button,
38 | select,
39 | textarea {
40 | font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
41 | }
42 |
43 |
44 | // Input List
45 | // -------------------------------
46 |
47 | .item-input {
48 | @include display-flex();
49 | @include align-items(center);
50 | position: relative;
51 | overflow: hidden;
52 | padding: 6px 0 5px 16px;
53 |
54 | input {
55 | @include border-radius(0);
56 | @include flex(1, 220px);
57 | @include appearance(none);
58 | margin: 0;
59 | padding-right: 24px;
60 | background-color: transparent;
61 | }
62 |
63 | .button .icon {
64 | @include flex(0, 0, 24px);
65 | position: static;
66 | display: inline-block;
67 | height: auto;
68 | text-align: center;
69 | font-size: 16px;
70 | }
71 |
72 | .button-bar {
73 | @include border-radius(0);
74 | @include flex(1, 0, 220px);
75 | @include appearance(none);
76 | }
77 |
78 | .icon {
79 | min-width: 14px;
80 | }
81 | }
82 |
83 | .item-input-inset {
84 | @include display-flex();
85 | @include align-items(center);
86 | position: relative;
87 | overflow: hidden;
88 | padding: ($item-padding / 3) * 2;
89 | }
90 |
91 | .item-input-wrapper {
92 | @include display-flex();
93 | @include flex(1, 0);
94 | @include align-items(center);
95 | @include border-radius(4px);
96 | padding-right: 8px;
97 | padding-left: 8px;
98 | background: #eee;
99 | }
100 |
101 | .item-input-inset .item-input-wrapper input {
102 | padding-left: 4px;
103 | height: 29px;
104 | background: transparent;
105 | line-height: 18px;
106 | }
107 |
108 | .item-input-wrapper ~ .button {
109 | margin-left: ($item-padding / 3) * 2;
110 | }
111 |
112 | .input-label {
113 | display: table;
114 | padding: 7px 10px 7px 0px;
115 | max-width: 200px;
116 | width: 35%;
117 | color: $input-label-color;
118 | font-size: 16px;
119 | }
120 |
121 | .placeholder-icon {
122 | color: #aaa;
123 | &:first-child {
124 | padding-right: 6px;
125 | }
126 | &:last-child {
127 | padding-left: 6px;
128 | }
129 | }
130 |
131 | .item-stacked-label {
132 | display: block;
133 | background-color: transparent;
134 | box-shadow: none;
135 |
136 | .input-label, .icon {
137 | display: inline-block;
138 | padding: 4px 0 0 0px;
139 | vertical-align: middle;
140 | }
141 | }
142 |
143 | .item-stacked-label input,
144 | .item-stacked-label textarea {
145 | @include border-radius(2px);
146 | padding: 4px 8px 3px 0;
147 | border: none;
148 | background-color: $input-bg;
149 | }
150 | .item-stacked-label input {
151 | overflow: hidden;
152 | height: $line-height-computed + $font-size-base + 12px;
153 | }
154 |
155 | .item-floating-label {
156 | display: block;
157 | background-color: transparent;
158 | box-shadow: none;
159 |
160 | .input-label {
161 | position: relative;
162 | padding: 5px 0 0 0;
163 | opacity: 0;
164 | top: 10px;
165 | @include transition(opacity .15s ease-in, top .2s linear);
166 |
167 | &.has-input {
168 | opacity: 1;
169 | top: 0;
170 | @include transition(opacity .15s ease-in, top .2s linear);
171 | }
172 | }
173 | }
174 |
175 |
176 | // Form Controls
177 | // -------------------------------
178 |
179 | // Shared size and type resets
180 | textarea,
181 | input[type="text"],
182 | input[type="password"],
183 | input[type="datetime"],
184 | input[type="datetime-local"],
185 | input[type="date"],
186 | input[type="month"],
187 | input[type="time"],
188 | input[type="week"],
189 | input[type="number"],
190 | input[type="email"],
191 | input[type="url"],
192 | input[type="search"],
193 | input[type="tel"],
194 | input[type="color"] {
195 | display: block;
196 | padding-top: 2px;
197 | padding-left: 0;
198 | height: $line-height-computed + $font-size-base;
199 | color: $input-color;
200 | vertical-align: middle;
201 | font-size: $font-size-base;
202 | line-height: $font-size-base + 2;
203 | }
204 |
205 | .platform-ios,
206 | .platform-android {
207 | input[type="datetime-local"],
208 | input[type="date"],
209 | input[type="month"],
210 | input[type="time"],
211 | input[type="week"] {
212 | padding-top: 8px;
213 | }
214 | }
215 |
216 | .item-input {
217 | input,
218 | textarea {
219 | width: 100%;
220 | }
221 | }
222 |
223 | textarea {
224 | padding-left: 0;
225 | @include placeholder($input-color-placeholder, -3px);
226 | }
227 |
228 | // Reset height since textareas have rows
229 | textarea {
230 | height: auto;
231 | }
232 |
233 | // Everything else
234 | textarea,
235 | input[type="text"],
236 | input[type="password"],
237 | input[type="datetime"],
238 | input[type="datetime-local"],
239 | input[type="date"],
240 | input[type="month"],
241 | input[type="time"],
242 | input[type="week"],
243 | input[type="number"],
244 | input[type="email"],
245 | input[type="url"],
246 | input[type="search"],
247 | input[type="tel"],
248 | input[type="color"] {
249 | border: 0;
250 | }
251 |
252 | // Position radios and checkboxes better
253 | input[type="radio"],
254 | input[type="checkbox"] {
255 | margin: 0;
256 | line-height: normal;
257 | }
258 |
259 | // Reset width of input images, buttons, radios, checkboxes
260 | .item-input {
261 | input[type="file"],
262 | input[type="image"],
263 | input[type="submit"],
264 | input[type="reset"],
265 | input[type="button"],
266 | input[type="radio"],
267 | input[type="checkbox"] {
268 | width: auto; // Override of generic input selector
269 | }
270 | }
271 |
272 | // Set the height of file to match text inputs
273 | input[type="file"] {
274 | line-height: $input-height-base;
275 | }
276 |
277 | // Text input classes to hide text caret during scroll
278 | .previous-input-focus,
279 | .cloned-text-input + input,
280 | .cloned-text-input + textarea {
281 | position: absolute !important;
282 | left: -9999px;
283 | width: 200px;
284 | }
285 |
286 |
287 | // Placeholder
288 | // -------------------------------
289 | input,
290 | textarea {
291 | @include placeholder();
292 | }
293 |
294 |
295 | // DISABLED STATE
296 | // -------------------------------
297 |
298 | // Disabled and read-only inputs
299 | input[disabled],
300 | select[disabled],
301 | textarea[disabled],
302 | input[readonly]:not(.cloned-text-input),
303 | textarea[readonly]:not(.cloned-text-input),
304 | select[readonly] {
305 | background-color: $input-bg-disabled;
306 | cursor: not-allowed;
307 | }
308 | // Explicitly reset the colors here
309 | input[type="radio"][disabled],
310 | input[type="checkbox"][disabled],
311 | input[type="radio"][readonly],
312 | input[type="checkbox"][readonly] {
313 | background-color: transparent;
314 | }
315 |
--------------------------------------------------------------------------------
