mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
forms updated w/ .item conventions
This commit is contained in:
Adam Bradley
104
dist/css/ionic-ios7.css
vendored
104
dist/css/ionic-ios7.css
vendored
@ -1354,38 +1354,64 @@ button.item-icon-right .item-content:after {
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
.card {
|
||||
/*
|
||||
A card and list-inset are close to the same thing, except a card as a box shadow.
|
||||
*/
|
||||
.card,
|
||||
.list-inset {
|
||||
overflow: hidden;
|
||||
margin: 20px 10px;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px; }
|
||||
|
||||
.card .item {
|
||||
.card {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.card .item,
|
||||
.list-inset .item,
|
||||
.padding > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.card .item:first-child {
|
||||
.card .item:first-child,
|
||||
.list-inset .item:first-child,
|
||||
.padding > .list .item:first-child {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:first-child .item-content {
|
||||
.card .item:first-child .item-content,
|
||||
.list-inset .item:first-child .item-content,
|
||||
.padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:last-child {
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child,
|
||||
.padding > .list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.card .item:last-child .item-content {
|
||||
.card .item:last-child .item-content,
|
||||
.list-inset .item:last-child .item-content,
|
||||
.padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
|
||||
.card.list .item:last-child {
|
||||
.card.list .item:last-child,
|
||||
.list-inset .item:last-child {
|
||||
margin-bottom: -1px; }
|
||||
|
||||
.card.list .item-divider {
|
||||
.card.list .item-divider,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-right > .list .item {
|
||||
margin-right: 0; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
|
||||
@ -1418,34 +1444,13 @@ select,
|
||||
textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
.input-group {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
|
||||
.padded > .input-group,
|
||||
.input-group.margin {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border-right: 1px solid #cccccc;
|
||||
border-left: 1px solid #cccccc; }
|
||||
|
||||
.input-group .input-row + .input-row {
|
||||
border-top: 1px solid #cccccc; }
|
||||
|
||||
.input-group + .input-group {
|
||||
margin-top: 10px; }
|
||||
|
||||
.input-row {
|
||||
.item-input {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px; }
|
||||
.input-row input {
|
||||
.item-input input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
@ -1453,45 +1458,46 @@ textarea {
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none; }
|
||||
.input-row .input-label {
|
||||
.item-input .input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
flex: 1 0 100px; }
|
||||
.input-row [class^="icon-"], .input-row [class*=" icon-"] {
|
||||
.item-input [class^="icon-"], .item-input [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
flex: 0 0 24px;
|
||||
align-self: center; }
|
||||
.input-row .placeholder-icon {
|
||||
.item-input .placeholder-icon {
|
||||
color: #999; }
|
||||
|
||||
.input-group.stacked-label,
|
||||
.input-group.stacked-label .input-row {
|
||||
.list.stacked-label,
|
||||
.list.stacked-label .item-input {
|
||||
display: block;
|
||||
border: 0;
|
||||
background-color: transparent; }
|
||||
.input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"],
|
||||
.input-group.stacked-label .input-row .input-label,
|
||||
.input-group.stacked-label .input-row [class^="icon-"],
|
||||
.input-group.stacked-label .input-row [class*=" icon-"] {
|
||||
background-color: transparent;
|
||||
box-shadow: none; }
|
||||
.list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
|
||||
.list.stacked-label .item-input .input-label,
|
||||
.list.stacked-label .item-input [class^="icon-"],
|
||||
.list.stacked-label .item-input [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle; }
|
||||
|
||||
.input-group.stacked-label input,
|
||||
.input-group.stacked-label textarea {
|
||||
.list.stacked-label input,
|
||||
.list.stacked-label textarea {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
padding: 4px 8px 3px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
|
||||
.input-group.stacked-label input {
|
||||
.list.stacked-label input {
|
||||
height: 46px; }
|
||||
|
||||
select,
|
||||
@ -1560,7 +1566,7 @@ input[type="file"] {
|
||||
line-height: 34px; }
|
||||
|
||||
select {
|
||||
border: 1px solid #cccccc;
|
||||
border: 1px solid #ccc;
|
||||
background-color: white; }
|
||||
|
||||
select[multiple],
|
||||
|
||||
97
dist/css/ionic-scoped.css
vendored
97
dist/css/ionic-scoped.css
vendored
@ -161,6 +161,9 @@
|
||||
* List editing styles. These trigger when the entire list goes into
|
||||
* "edit mode"
|
||||
*/
|
||||
/*
|
||||
A card and list-inset are close to the same thing, except a card as a box shadow.
|
||||
*/
|
||||
/* the checkmark within the box */
|
||||
/* what the background looks like when its checked */
|
||||
/* what the checkmark looks like when its checked */
|
||||
@ -2038,34 +2041,54 @@
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
.ionic .card {
|
||||
.ionic .card,
|
||||
.ionic .list-inset {
|
||||
overflow: hidden;
|
||||
margin: 20px 10px;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px; }
|
||||
.ionic .card .item {
|
||||
.ionic .card {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
.ionic .card .item,
|
||||
.ionic .list-inset .item,
|
||||
.ionic .padding > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.ionic .card .item:first-child {
|
||||
.ionic .card .item:first-child,
|
||||
.ionic .list-inset .item:first-child,
|
||||
.ionic .padding > .list .item:first-child {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.ionic .card .item:first-child .item-content {
|
||||
.ionic .card .item:first-child .item-content,
|
||||
.ionic .list-inset .item:first-child .item-content,
|
||||
.ionic .padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.ionic .card .item:last-child {
|
||||
.ionic .card .item:last-child,
|
||||
.ionic .list-inset .item:last-child,
|
||||
.ionic .padding > .list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.ionic .card .item:last-child .item-content {
|
||||
.ionic .card .item:last-child .item-content,
|
||||
.ionic .list-inset .item:last-child .item-content,
|
||||
.ionic .padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.ionic .card.list .item:last-child {
|
||||
.ionic .card.list .item:last-child,
|
||||
.ionic .list-inset .item:last-child {
|
||||
margin-bottom: -1px; }
|
||||
.ionic .card.list .item-divider {
|
||||
.ionic .card.list .item-divider,
|
||||
.ionic .list-inset .item-divider,
|
||||
.ionic .padding > .list .item,
|
||||
.ionic .padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
.ionic .padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
.ionic .padding-right > .list .item {
|
||||
margin-right: 0; }
|
||||
.ionic form {
|
||||
margin: 0 0 1.42857; }
|
||||
.ionic legend {
|
||||
@ -2094,30 +2117,13 @@
|
||||
.ionic select,
|
||||
.ionic textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
.ionic .input-group {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
.ionic .padded > .input-group,
|
||||
.ionic .input-group.margin {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border-right: 1px solid #cccccc;
|
||||
border-left: 1px solid #cccccc; }
|
||||
.ionic .input-group .input-row + .input-row {
|
||||
border-top: 1px solid #cccccc; }
|
||||
.ionic .input-group + .input-group {
|
||||
margin-top: 10px; }
|
||||
.ionic .input-row {
|
||||
.ionic .item-input {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px; }
|
||||
.ionic .input-row input {
|
||||
.ionic .item-input input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
@ -2125,42 +2131,43 @@
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none; }
|
||||
.ionic .input-row .input-label {
|
||||
.ionic .item-input .input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
flex: 1 0 100px; }
|
||||
.ionic .input-row [class^="icon-"], .ionic .input-row [class*=" icon-"] {
|
||||
.ionic .item-input [class^="icon-"], .ionic .item-input [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
flex: 0 0 24px;
|
||||
align-self: center; }
|
||||
.ionic .input-row .placeholder-icon {
|
||||
.ionic .item-input .placeholder-icon {
|
||||
color: #999; }
|
||||
.ionic .input-group.stacked-label,
|
||||
.ionic .input-group.stacked-label .input-row {
|
||||
.ionic .list.stacked-label,
|
||||
.ionic .list.stacked-label .item-input {
|
||||
display: block;
|
||||
border: 0;
|
||||
background-color: transparent; }
|
||||
.ionic .input-group.stacked-label .input-label, .ionic .input-group.stacked-label [class^="icon-"], .ionic .input-group.stacked-label [class*=" icon-"],
|
||||
.ionic .input-group.stacked-label .input-row .input-label,
|
||||
.ionic .input-group.stacked-label .input-row [class^="icon-"],
|
||||
.ionic .input-group.stacked-label .input-row [class*=" icon-"] {
|
||||
background-color: transparent;
|
||||
box-shadow: none; }
|
||||
.ionic .list.stacked-label .input-label, .ionic .list.stacked-label [class^="icon-"], .ionic .list.stacked-label [class*=" icon-"],
|
||||
.ionic .list.stacked-label .item-input .input-label,
|
||||
.ionic .list.stacked-label .item-input [class^="icon-"],
|
||||
.ionic .list.stacked-label .item-input [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle; }
|
||||
.ionic .input-group.stacked-label input,
|
||||
.ionic .input-group.stacked-label textarea {
|
||||
.ionic .list.stacked-label input,
|
||||
.ionic .list.stacked-label textarea {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
padding: 4px 8px 3px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
.ionic .input-group.stacked-label input {
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
.ionic .list.stacked-label input {
|
||||
height: 46px; }
|
||||
.ionic select,
|
||||
.ionic textarea,
|
||||
@ -2221,7 +2228,7 @@
|
||||
.ionic input[type="file"] {
|
||||
line-height: 34px; }
|
||||
.ionic select {
|
||||
border: 1px solid #cccccc;
|
||||
border: 1px solid #ccc;
|
||||
background-color: white; }
|
||||
.ionic select[multiple],
|
||||
.ionic select[size] {
|
||||
|
||||
104
dist/css/ionic.css
vendored
104
dist/css/ionic.css
vendored
@ -2497,38 +2497,64 @@ button.item-icon-right .item-content:after {
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
.card {
|
||||
/*
|
||||
A card and list-inset are close to the same thing, except a card as a box shadow.
|
||||
*/
|
||||
.card,
|
||||
.list-inset {
|
||||
overflow: hidden;
|
||||
margin: 20px 10px;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px; }
|
||||
|
||||
.card .item {
|
||||
.card {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.card .item,
|
||||
.list-inset .item,
|
||||
.padding > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.card .item:first-child {
|
||||
.card .item:first-child,
|
||||
.list-inset .item:first-child,
|
||||
.padding > .list .item:first-child {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:first-child .item-content {
|
||||
.card .item:first-child .item-content,
|
||||
.list-inset .item:first-child .item-content,
|
||||
.padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:last-child {
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child,
|
||||
.padding > .list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.card .item:last-child .item-content {
|
||||
.card .item:last-child .item-content,
|
||||
.list-inset .item:last-child .item-content,
|
||||
.padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
|
||||
.card.list .item:last-child {
|
||||
.card.list .item:last-child,
|
||||
.list-inset .item:last-child {
|
||||
margin-bottom: -1px; }
|
||||
|
||||
.card.list .item-divider {
|
||||
.card.list .item-divider,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-right > .list .item {
|
||||
margin-right: 0; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
|
||||
@ -2561,34 +2587,13 @@ select,
|
||||
textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
.input-group {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
|
||||
.padded > .input-group,
|
||||
.input-group.margin {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border-right: 1px solid #cccccc;
|
||||
border-left: 1px solid #cccccc; }
|
||||
|
||||
.input-group .input-row + .input-row {
|
||||
border-top: 1px solid #cccccc; }
|
||||
|
||||
.input-group + .input-group {
|
||||
margin-top: 10px; }
|
||||
|
||||
.input-row {
|
||||
.item-input {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px; }
|
||||
.input-row input {
|
||||
.item-input input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
@ -2596,45 +2601,46 @@ textarea {
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none; }
|
||||
.input-row .input-label {
|
||||
.item-input .input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
flex: 1 0 100px; }
|
||||
.input-row [class^="icon-"], .input-row [class*=" icon-"] {
|
||||
.item-input [class^="icon-"], .item-input [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
flex: 0 0 24px;
|
||||
align-self: center; }
|
||||
.input-row .placeholder-icon {
|
||||
.item-input .placeholder-icon {
|
||||
color: #999; }
|
||||
|
||||
.input-group.stacked-label,
|
||||
.input-group.stacked-label .input-row {
|
||||
.list.stacked-label,
|
||||
.list.stacked-label .item-input {
|
||||
display: block;
|
||||
border: 0;
|
||||
background-color: transparent; }
|
||||
.input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"],
|
||||
.input-group.stacked-label .input-row .input-label,
|
||||
.input-group.stacked-label .input-row [class^="icon-"],
|
||||
.input-group.stacked-label .input-row [class*=" icon-"] {
|
||||
background-color: transparent;
|
||||
box-shadow: none; }
|
||||
.list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
|
||||
.list.stacked-label .item-input .input-label,
|
||||
.list.stacked-label .item-input [class^="icon-"],
|
||||
.list.stacked-label .item-input [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle; }
|
||||
|
||||
.input-group.stacked-label input,
|
||||
.input-group.stacked-label textarea {
|
||||
.list.stacked-label input,
|
||||
.list.stacked-label textarea {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
padding: 4px 8px 3px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
|
||||
.input-group.stacked-label input {
|
||||
.list.stacked-label input {
|
||||
height: 46px; }
|
||||
|
||||
select,
|
||||
@ -2703,7 +2709,7 @@ input[type="file"] {
|
||||
line-height: 34px; }
|
||||
|
||||
select {
|
||||
border: 1px solid #cccccc;
|
||||
border: 1px solid #ccc;
|
||||
background-color: white; }
|
||||
|
||||
select[multiple],
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
"../ionic/modal",
|
||||
"../ionic/items",
|
||||
"../ionic/list",
|
||||
"../ionic/card",
|
||||
|
||||
// Forms
|
||||
"../ionic/form",
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
|
||||
// Cards
|
||||
// --------------------------------------------------
|
||||
|
||||
.card {
|
||||
overflow: hidden;
|
||||
margin: ($content-padding * 2) $content-padding;
|
||||
background-color: $card-body-bg;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
.card .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
|
||||
.item-content {
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card.list .item:last-child {
|
||||
margin-bottom: $item-border-width * -1;
|
||||
}
|
||||
.card.list .item-divider {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -42,32 +42,10 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
// Input groups
|
||||
// Input List
|
||||
// -------------------------------
|
||||
|
||||
.input-group {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-top: $input-border-width solid $input-border-color;
|
||||
border-bottom: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
.padded > .input-group,
|
||||
.input-group.margin {
|
||||
@include border-radius($input-border-radius);
|
||||
border-right: $input-border-width solid $input-border-color;
|
||||
border-left: $input-border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
.input-group .input-row + .input-row {
|
||||
border-top: $input-border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
.input-group + .input-group {
|
||||
margin-top: $content-padding;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
.item-input {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
@ -101,11 +79,11 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.stacked-label,
|
||||
.input-group.stacked-label .input-row {
|
||||
.list.stacked-label,
|
||||
.list.stacked-label .item-input {
|
||||
display: block;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.input-label, [class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
@ -114,16 +92,17 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.stacked-label input,
|
||||
.input-group.stacked-label textarea
|
||||
.list.stacked-label input,
|
||||
.list.stacked-label textarea
|
||||
{
|
||||
@include border-radius($input-border-radius);
|
||||
@include border-radius(2px);
|
||||
overflow: hidden;
|
||||
padding: 4px 8px 3px;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
border: none;
|
||||
background-color: $input-bg;
|
||||
box-shadow: $item-box-shadow;
|
||||
}
|
||||
.input-group.stacked-label input {
|
||||
.list.stacked-label input {
|
||||
height: $line-height-computed + $font-size-base + 12px;
|
||||
}
|
||||
|
||||
@ -211,7 +190,7 @@ input[type="file"] {
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
border: 1px solid #ccc;
|
||||
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
border: none;
|
||||
|
||||
background-color: $list-default-background;
|
||||
box-shadow: inset 0 0 $item-border-width #666;
|
||||
box-shadow: $item-box-shadow;
|
||||
|
||||
// Align badges within list items
|
||||
.badge {
|
||||
@ -76,7 +76,7 @@ a.item {
|
||||
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 $item-border-width #666;
|
||||
box-shadow: $item-box-shadow;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: $list-font-size;
|
||||
@ -255,7 +255,7 @@ button.item-icon-right {
|
||||
padding: $item-divider-padding;
|
||||
border: none;
|
||||
background-color: $item-divider-bg;
|
||||
box-shadow: inset 0 0 $item-border-width #666;
|
||||
box-shadow: $item-box-shadow;
|
||||
color: $item-divider-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -5,13 +5,10 @@
|
||||
.list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// No need to set list-style: none; since .list-item is block level
|
||||
margin-bottom: 20px;
|
||||
padding-top: $item-border-width;
|
||||
padding-bottom: $item-border-width;
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
|
||||
// make room for the list item borders
|
||||
}
|
||||
|
||||
/**
|
||||
@ -65,3 +62,70 @@
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
// Cards / 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;
|
||||
background-color: $card-body-bg;
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.card .item,
|
||||
.list-inset .item,
|
||||
.padding > .list .item
|
||||
{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
|
||||
.item-content {
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.list .item:last-child,
|
||||
.list-inset .item:last-child {
|
||||
margin-bottom: $item-border-width * -1;
|
||||
}
|
||||
|
||||
.card.list .item-divider,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0;
|
||||
}
|
||||
.padding-right > .list .item {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -124,19 +124,12 @@ $input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
$input-color: $gray !default;
|
||||
$input-label-color: $black !default;
|
||||
$input-border-color: #ccc !default;
|
||||
$input-border-width: 1px !default;
|
||||
$input-border-radius: 2px !default;
|
||||
$input-border-focus: #66afe9 !default;
|
||||
|
||||
$input-color-placeholder: $gray-light !default;
|
||||
|
||||
$legend-color: $gray-dark !default;
|
||||
$legend-border-color: #e5e5e5 !default;
|
||||
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
|
||||
// Toggle
|
||||
// -------------------------------
|
||||
@ -390,7 +383,8 @@ $card-border-radius: 2px !default;
|
||||
// -------------------------------
|
||||
|
||||
$item-border-width: 1px !default;
|
||||
$item-border-color: #ddd;
|
||||
$item-border-color: #666;
|
||||
$item-box-shadow: inset 0 0 $item-border-width $item-border-color;
|
||||
$item-padding: 15px !default;
|
||||
|
||||
$item-divider-bg: #f5f5f5;
|
||||
|
||||
@ -24,7 +24,6 @@
|
||||
"modal",
|
||||
"items",
|
||||
"list",
|
||||
"card",
|
||||
|
||||
// Forms
|
||||
"form",
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
"popup",
|
||||
"items",
|
||||
"list",
|
||||
"card",
|
||||
|
||||
// Forms
|
||||
"form",
|
||||
|
||||
@ -23,55 +23,68 @@
|
||||
<div class="content has-header has-footer">
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<h3>Default Text Input, list-inset, No Content Padding</h3>
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, card, No Content Padding</h3>
|
||||
<div class="list card">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="item item-input">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
|
||||
<h3>Default Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<h3>Default Text Input, With Parent Content Padding</h3>
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="Username">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="Filter by name">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<h3>Default Text Input, list-inset, With Parent Content Padding</h3>
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<input type="text" placeholder="Name">
|
||||
</label>
|
||||
</div>
|
||||
@ -81,40 +94,40 @@
|
||||
|
||||
|
||||
|
||||
<h3>Label left of input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<h3>Label left of input, No Parent Content Padding</h3>
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Username</span>
|
||||
<input type="text" placeholder="@drifty">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="email" placeholder="your@email.com">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="Sir Derp">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Label left of input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<h3>Label left of input, No Parent Content Padding</h3>
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<i class="icon-person"></i>
|
||||
<span class="input-label">Username</span>
|
||||
<input type="text" placeholder="@drifty">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<i class="icon-email"></i>
|
||||
<span class="input-label">Email</span>
|
||||
<input type="email" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<h3>Inline Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
@ -122,27 +135,27 @@
|
||||
|
||||
<div class="padding">
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<h3>Inline Label On Top Of Text Input, With Parent Content Padding</h3>
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="John">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Suhr">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<h3>Inline Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="Enter keywords">
|
||||
</label>
|
||||
@ -153,31 +166,31 @@
|
||||
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
|
||||
<div class="list stacked-label">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="Drifty">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Co">
|
||||
</label>
|
||||
<label class="input-row">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-row">
|
||||
<div class="list stacked-label">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
|
||||
<div class="list stacked-label list-inset">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
@ -185,17 +198,17 @@
|
||||
|
||||
<div class="padding">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
|
||||
<div class="list stacked-label">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
|
||||
<div class="list stacked-label list-inset">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
@ -203,26 +216,26 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-row">
|
||||
<h3>Default Text Input, No Parent Content Padding</h3>
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<i class="icon-search placeholder-icon"></i>
|
||||
<input type="search" placeholder="Search">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<i class="icon-star placeholder-icon"></i>
|
||||
<input type="text" placeholder="Favorites">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
|
||||
<div class="list stacked-label">
|
||||
<label class="item item-input">
|
||||
<i class="icon-email"></i>
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
@ -231,18 +244,18 @@
|
||||
|
||||
<div class="padding">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
|
||||
<div class="list stacked-label">
|
||||
<label class="item item-input">
|
||||
<i class="icon-cloud"></i>
|
||||
<span class="input-label">SaaS</span>
|
||||
<input type="text" placeholder="Codiqa">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-row">
|
||||
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
|
||||
<div class="list stacked-label list-inset">
|
||||
<label class="item item-input">
|
||||
<i class="icon-headphone"></i>
|
||||
<span class="input-label">Favorite Music</span>
|
||||
<input type="text" placeholder="Bee Gees">
|
||||
|
||||
Reference in New Issue
Block a user