mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
form/input updates
This commit is contained in:
Adam Bradley
9
ionic/components/app/normalize.scss
vendored
9
ionic/components/app/normalize.scss
vendored
@ -60,8 +60,7 @@ strong {
|
||||
// ==========================================================================
|
||||
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
ion-app img,
|
||||
.ion-app img {
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -163,12 +162,6 @@ input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
|
||||
@ -2,191 +2,58 @@
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
$input-label-color: get-color(dark, base);
|
||||
$input-color: $input-label-color;
|
||||
$input-bg: get-color(light, base);
|
||||
$input-bg-disabled: darken(get-color(stable, base), 10%);
|
||||
$input-color-placeholder: darken(get-color(stable, base), 20%);
|
||||
|
||||
$input-height-base: 5rem;
|
||||
$input-height-large: $input-height-base + 0.3rem;
|
||||
$input-height-small: 1.2rem;
|
||||
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin: 0 0 $line-height-base;
|
||||
margin: 0 0 2.4rem;
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
// @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
|
||||
line-height: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
input,
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6px 0 5px 16px;
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
flex: 1 220px;
|
||||
@include appearance(none);
|
||||
margin: 0;
|
||||
padding-right: 24px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.button .icon {
|
||||
flex: 0 0 24px;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
border-radius: 0;
|
||||
flex: 1 0 220px;
|
||||
@include appearance(none);
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input-inset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
//padding: ($item-padding / 3) * 2;
|
||||
}
|
||||
|
||||
.item-input-wrapper {
|
||||
display: flex;
|
||||
flex: 1 0;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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: 3.8rem;//$line-height-computed + $font-size-base;
|
||||
color: $input-color;
|
||||
vertical-align: middle;
|
||||
font-size: 1.6rem;//$font-size-base;
|
||||
line-height: $font-size-base + 2;
|
||||
textarea {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mode-ios,
|
||||
.mode-android {
|
||||
.item-input {
|
||||
|
||||
// text inputs
|
||||
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"] {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
input,
|
||||
textarea {
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: block;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding-left: 0;
|
||||
@include placeholder($input-color-placeholder, -3px);
|
||||
}
|
||||
// tap inputs
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 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"],
|
||||
@ -194,24 +61,10 @@ input[type="checkbox"] {
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; // Override of generic input selector
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
// -------------------------------
|
||||
@ -228,10 +81,7 @@ textarea {
|
||||
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
|
||||
@ -241,3 +91,10 @@ input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.platform-ios,
|
||||
.platform-android {
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,19 @@ focus-holder input {
|
||||
padding-bottom: 1000px;
|
||||
}
|
||||
|
||||
.item.input {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.item.input input,
|
||||
.item.input textarea {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item.input textarea {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
/*ion-input {
|
||||
display: block;
|
||||
|
||||
|
||||
@ -1,53 +1,32 @@
|
||||
|
||||
// Label
|
||||
// -------------------------------
|
||||
// --------------------------------------------------
|
||||
|
||||
$input-label-color: #000 !default;
|
||||
$input-label-color: #444 !default;
|
||||
|
||||
|
||||
.input-label {
|
||||
display: table;
|
||||
padding: 9px 10px 7px 0px;
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
width: 30%;
|
||||
min-width: 100px;
|
||||
color: $input-label-color;
|
||||
font-size: 1.6rem;
|
||||
font-size: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.input-label, .icon {
|
||||
display: inline-block;
|
||||
padding: 4px 0 0 0px;
|
||||
vertical-align: middle;
|
||||
.input-label {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-stacked-label input,
|
||||
.item-stacked-label textarea {
|
||||
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 + 0.5rem;
|
||||
.input-label + .input {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-floating-label {
|
||||
|
||||
@ -15,7 +15,8 @@ import {RadioButton} from '../radio/radio';
|
||||
'[checked]': 'checked',
|
||||
'[value]': 'value',
|
||||
'[attr.name]': 'name',
|
||||
'(change)': 'onChangeEvent($event)'
|
||||
'(change)': 'onChangeEvent($event)',
|
||||
'class': 'tap-input input'
|
||||
}
|
||||
})
|
||||
export class TapInput extends IonInput {
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
|
||||
<ion-toolbar><ion-title>Header</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content class="padding">
|
||||
|
||||
<ion-input>
|
||||
<label>Label 1</label>
|
||||
<input value="Text 1" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 2</label>
|
||||
<input value="Text 2" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 3</label>
|
||||
<input value="3" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 4</label>
|
||||
<textarea>Textarea 4</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 5</label>
|
||||
<input value="http://url5.com/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 6</label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 7</label>
|
||||
<textarea>Textarea 7</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 8</label>
|
||||
<input value="Text 8" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 9</label>
|
||||
<input value="9" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 10</label>
|
||||
<textarea>Textarea 10</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 11</label>
|
||||
<input value="Text 11" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 12</label>
|
||||
<input value="12" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 13</label>
|
||||
<textarea>Textarea 13</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 14</label>
|
||||
<textarea>Textarea 14</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
input, textarea {
|
||||
border: 1px solid red !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
/*
|
||||
focus-holder input:focus {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
focus-holder input:nth-child(1) {
|
||||
left: 200px !important;
|
||||
}
|
||||
|
||||
focus-holder input:nth-child(2) {
|
||||
left: 240px !important;
|
||||
}
|
||||
|
||||
focus-holder input:nth-child(3) {
|
||||
left: 280px !important;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
84
ionic/components/form/test/labelled-text-input/main.html
Normal file
84
ionic/components/form/test/labelled-text-input/main.html
Normal file
@ -0,0 +1,84 @@
|
||||
|
||||
<ion-toolbar><ion-title>Labelled Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 1</label>
|
||||
<input value="Text 1" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 2</label>
|
||||
<input value="Text 2" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 3</label>
|
||||
<input value="3" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 4</label>
|
||||
<textarea>Textarea 4</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 5</label>
|
||||
<input value="http://url5.com/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 6</label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 7</label>
|
||||
<textarea>Textarea 7</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 8</label>
|
||||
<input value="Text 8" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 9</label>
|
||||
<input value="9" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 10</label>
|
||||
<textarea>Textarea 10</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 11</label>
|
||||
<input value="Text 11" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 12</label>
|
||||
<input value="12" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 13</label>
|
||||
<textarea>Textarea 13</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<label>Label 14</label>
|
||||
<textarea>Textarea 14</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>
|
||||
1
ionic/components/form/test/placeholder-text-input/e2e.ts
Normal file
1
ionic/components/form/test/placeholder-text-input/e2e.ts
Normal file
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
27
ionic/components/form/test/placeholder-text-input/main.html
Normal file
27
ionic/components/form/test/placeholder-text-input/main.html
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
<ion-toolbar><ion-title>Placeholder Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<input placeholder="Text Input Placeholder" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<input placeholder="Text Input Placeholder" value="Text input value" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<textarea placeholder="Textarea Placeholder"></textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<textarea placeholder="Textarea Placeholder">Textarea value</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
@ -0,0 +1,64 @@
|
||||
|
||||
<ion-toolbar><ion-title>Stack Labelled Text Input</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 1</label>
|
||||
<input value="Text 1" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 2</label>
|
||||
<input value="Text 2" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 3</label>
|
||||
<input value="3" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 4</label>
|
||||
<textarea>Textarea 4</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 5</label>
|
||||
<input value="http://url5.com/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 6</label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 7</label>
|
||||
<textarea>Textarea 7</textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 8</label>
|
||||
<input value="Text 8" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 9</label>
|
||||
<input value="9" type="number">
|
||||
</ion-input>
|
||||
|
||||
<ion-input class="item-stacked-label">
|
||||
<label>Label 10</label>
|
||||
<textarea>Textarea 10</textarea>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>
|
||||
@ -11,7 +11,11 @@ import {Platform} from '../../platform/platform';
|
||||
|
||||
|
||||
@IonicDirective({
|
||||
selector: 'ion-input'
|
||||
selector: 'ion-input',
|
||||
classId: 'item-input',
|
||||
host: {
|
||||
'class': 'item'
|
||||
}
|
||||
})
|
||||
export class Input extends IonInputItem {
|
||||
|
||||
@ -38,7 +42,8 @@ export class Input extends IonInputItem {
|
||||
'(touchend)': 'pointerEnd($event)',
|
||||
'(mousedown)': 'pointerStart($event)',
|
||||
'(mouseup)': 'pointerEnd($event)',
|
||||
'[attr.id]': 'id'
|
||||
'[attr.id]': 'id',
|
||||
'class': 'text-input input'
|
||||
}
|
||||
})
|
||||
export class TextInput extends IonInput {
|
||||
|
||||
@ -43,6 +43,8 @@ $item-ios-thumbnail-size: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.text-input,
|
||||
.input-label,
|
||||
.item-media,
|
||||
.item-content,
|
||||
.item-note {
|
||||
@ -94,6 +96,13 @@ $item-ios-thumbnail-size: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
&:before,
|
||||
&:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -30,21 +30,21 @@
|
||||
<icon forward></icon>
|
||||
</button>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<button primary>Edit</button>
|
||||
<div class="item-content">
|
||||
div.item left button[primary]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item right button[outline][secondary]
|
||||
</div>
|
||||
<button secondary outline>Open</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item icon only button
|
||||
</div>
|
||||
@ -53,7 +53,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item right icon/text button
|
||||
</div>
|
||||
@ -63,7 +63,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<button primary clear>
|
||||
<icon name="ion-wrench"></icon>
|
||||
Fix
|
||||
@ -73,7 +73,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item right clear button
|
||||
</div>
|
||||
@ -82,7 +82,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item">
|
||||
<div class="item-content item-text-wrap">
|
||||
This is multiline text that has a
|
||||
long description of about how the text is really long.
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
// Input Placeholder
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
|
||||
@mixin placeholder($color: #aaaaaa, $text-indent: 0) {
|
||||
&::-moz-placeholder { // Firefox 19+
|
||||
color: $color;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user