octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

form group rounded corners

Browse Source
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Adam Bradley
2013-09-10 08:44:38 -05:00
gitea-unlock(16/)
parent 1ee6027ff8
commit d7dc50539c
octicon-diff(16/tw-mr-1) 4 changed files with 51 additions and 38 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

58
dist/ionic.css vendored
View File

@@ -639,24 +639,27 @@ textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.form-group {
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
background-color: white;
overflow: hidden; }
.content-padded > .form-group,
.form-group.inset {
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb; }
border-right: 1px solid #bbbbbb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
.form-group .input-wrapper + .input-wrapper {
border-top: 0; }
border-top: 1px solid #bbbbbb; }
.form-group + .form-group {
margin-top: 10px; }
.input-wrapper {
display: block;
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
padding: 6px 8px 5px;
overflow: hidden; }
.input-wrapper input {
@@ -679,7 +682,10 @@ textarea {
border: 1px solid #bbbbbb;
background-color: white;
padding: 4px 8px 3px;
overflow: hidden; }
overflow: hidden;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
select,
textarea,
@@ -1208,22 +1214,22 @@ select:focus:invalid {
margin-right: -1px; }
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px; }
.input-append input,
.input-append select,
.input-append .uneditable-input {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px; }
.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0; }
.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
@@ -1231,9 +1237,9 @@ select:focus:invalid {
.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0; }
.input-prepend.input-append input,
.input-prepend.input-append select,
@@ -1244,21 +1250,21 @@ select:focus:invalid {
.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0; }
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px; }
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0; }
.input-prepend.input-append .btn-group:first-child {
margin-left: 0; }

8
example/input-text.html
View File

@@ -111,8 +111,12 @@
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<div class="form-group">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
<span class="input-label span3">First Name</span>
<input class="span9" type="text" placeholder="John">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Last Name</span>
<input class="span9" type="text" placeholder="Suhr">
</label>
</div>

5
scss/ionic/_theme-variables.scss
View File

@@ -48,8 +48,9 @@ $textColor: $grayDark !default;
// Forms
// -------------------------------
$inputBackground: $white !default;
$inputBorder: #bbb !default;
$inputBorderRadius: 4px !default;
$inputBorderColor: #bbb !default;
$inputBorderWidth: 1px !default;
$inputBorderRadius: 2px !default;
$inputDisabledBackground: $grayLighter !default;
$formActionsBackground: $grayLighter !default;
$inputHeight: $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border

18
scss/ionic/structure/_form.scss
View File

@@ -48,17 +48,20 @@ textarea {
}
.form-group {
border-top: $inputBorderWidth solid $inputBorderColor;
border-bottom: $inputBorderWidth solid $inputBorderColor;
background-color: $inputBackground;
overflow: hidden;
}
.content-padded > .form-group,
.form-group.inset {
border-left: 1px solid $inputBorder;
border-right: 1px solid $inputBorder;
border-left: $inputBorderWidth solid $inputBorderColor;
border-right: $inputBorderWidth solid $inputBorderColor;
@include border-radius($inputBorderRadius);
}
.form-group .input-wrapper + .input-wrapper {
border-top: 0;
border-top: $inputBorderWidth solid $inputBorderColor;
}
.form-group + .form-group {
@@ -67,8 +70,6 @@ textarea {
.input-wrapper {
display: block;
border-top: 1px solid $inputBorder;
border-bottom: 1px solid $inputBorder;
padding: 6px 8px 5px;
overflow: hidden;
@@ -92,10 +93,11 @@ textarea {
}
.form-group.stacked-label input {
border: 1px solid $inputBorder;
border: $inputBorderWidth solid $inputBorderColor;
background-color: $inputBackground;
padding: 4px 8px 3px;
overflow: hidden;
@include border-radius($inputBorderRadius);
}
@@ -196,7 +198,7 @@ input[type="file"] {
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid $inputBorder;
border: $inputBorderWidth solid $inputBorderColor;
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
@@ -223,7 +225,7 @@ input[type="checkbox"]:focus {
.uneditable-textarea {
color: $grayLight;
background-color: darken($inputBackground, 1%);
border-color: $inputBorder;
border-color: $inputBorderColor;
cursor: not-allowed;
}