Support full-width inputs with x_full-width

This commit is contained in:
Kijin Sung 2023-08-03 21:24:55 +09:00
parent 7799aa77a3
commit 6e415fafc0

View file

@ -41,7 +41,7 @@
.x textarea{margin:0;font-size:100%;vertical-align:middle}
.x button,
.x input{*overflow:visible}
.x button::-moz-focus-inner,
.x button::-moz-focus-inner,
.x input::-moz-focus-inner{padding:0;border:0}
.x button,
.x input[type="button"],
@ -56,7 +56,7 @@
.x input[type="radio"],
.x input[type="checkbox"]{cursor:pointer}
.x input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
.x input[type="search"]::-webkit-search-decoration,
.x input[type="search"]::-webkit-search-decoration,
.x input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.x textarea{overflow:auto;vertical-align:top}
@media print{
@ -308,6 +308,9 @@
.x input,
.x textarea,
.x .x_uneditable-input{width:206px}
.x input.x_full-width,
.x textarea.x_full-width,
.x .x_uneditable-input.x_full-width{width:calc(100% - 14px)}
.x textarea{height:auto}
.x textarea,
.x input[type="text"],
@ -363,11 +366,11 @@
.x .x_uneditable-textarea{color:#999999;cursor:not-allowed;background-color:#fcfcfc;border-color:#cccccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025)}
.x .x_uneditable-input{overflow:hidden;white-space:nowrap}
.x .x_uneditable-textarea{width:auto;height:auto}
.x input:-moz-placeholder,
.x input:-moz-placeholder,
.x textarea:-moz-placeholder{color:#999999}
.x input:-ms-input-placeholder,
.x input:-ms-input-placeholder,
.x textarea:-ms-input-placeholder{color:#999999}
.x input::-webkit-input-placeholder,
.x input::-webkit-input-placeholder,
.x textarea::-webkit-input-placeholder{color:#999999}
.x .x_radio,
.x .x_checkbox{min-height:20px;padding-left:20px}
@ -525,11 +528,11 @@
.x .x_control-group.x_info textarea:focus{border-color:#2d6987;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3}
.x .x_control-group.x_info .x_input-prepend .x_add-on,
.x .x_control-group.x_info .x_input-append .x_add-on{color:#3a87ad;background-color:#d9edf7;border-color:#3a87ad}
.x input:focus:invalid,
.x textarea:focus:invalid,
.x input:focus:invalid,
.x textarea:focus:invalid,
.x select:focus:invalid{color:#b94a48;border-color:#ff534a}
.x input:focus:invalid:focus,
.x textarea:focus:invalid:focus,
.x input:focus:invalid:focus,
.x textarea:focus:invalid:focus,
.x select:focus:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7}
.x .x_form-actions{padding:19px 20px 20px;margin-top:20px;margin-bottom:20px;background-color:#f5f5f5;border-top:1px solid #e5e5e5;*zoom:1}
.x .x_form-actions:before,
@ -762,7 +765,7 @@
font-weight: normal;
font-style: normal;
}
.x [class^="x_icon-"],
.x [class^="x_icon-"],
.x [class*=" x_icon-"]{
display:inline-block;
width:14px;
@ -782,18 +785,18 @@
color: #000;
}
/* White icons with optional class, or on hover/active states of certain elements */
#gnb.gnb.open .x_icon-white,
.x .x_nav-pills>.x_active>a>[class^="x_icon-"],
.x .x_nav-pills>.x_active>a>[class*=" x_icon-"],
.x .x_nav-list>.x_active>a>[class^="x_icon-"],
.x .x_nav-list>.x_active>a>[class*=" x_icon-"],
.x .x_navbar-inverse .x_nav>.x_active>a>[class^="x_icon-"],
.x .x_navbar-inverse .x_nav>.x_active>a>[class*=" x_icon-"],
.x .x_dropdown-menu>li>a:hover>[class^="x_icon-"],
.x .x_dropdown-menu>li>a:hover>[class*=" x_icon-"],
.x .x_dropdown-menu>.x_active>a>[class^="x_icon-"],
.x .x_dropdown-menu>.x_active>a>[class*=" x_icon-"],
.x .x_dropdown-submenu:hover>a>[class^="x_icon-"],
#gnb.gnb.open .x_icon-white,
.x .x_nav-pills>.x_active>a>[class^="x_icon-"],
.x .x_nav-pills>.x_active>a>[class*=" x_icon-"],
.x .x_nav-list>.x_active>a>[class^="x_icon-"],
.x .x_nav-list>.x_active>a>[class*=" x_icon-"],
.x .x_navbar-inverse .x_nav>.x_active>a>[class^="x_icon-"],
.x .x_navbar-inverse .x_nav>.x_active>a>[class*=" x_icon-"],
.x .x_dropdown-menu>li>a:hover>[class^="x_icon-"],
.x .x_dropdown-menu>li>a:hover>[class*=" x_icon-"],
.x .x_dropdown-menu>.x_active>a>[class^="x_icon-"],
.x .x_dropdown-menu>.x_active>a>[class*=" x_icon-"],
.x .x_dropdown-submenu:hover>a>[class^="x_icon-"],
.x .x_dropdown-submenu:hover>a>[class*=" x_icon-"]{color: #fff;}
.x .x_icon-glass::before{content: "\e872";}
.x .x_icon-music::before{content: "\e744";}
@ -1074,7 +1077,7 @@
.x .x_btn-inverse.x_active{background-color:#080808 \9}
.x button.x_btn,
.x input[type="submit"].x_btn{*padding-top:3px;*padding-bottom:3px}
.x button.x_btn::-moz-focus-inner,
.x button.x_btn::-moz-focus-inner,
.x input[type="submit"].x_btn::-moz-focus-inner{padding:0;border:0}
.x button.x_btn.x_btn-large,
.x input[type="submit"].x_btn.x_btn-large{*padding-top:7px;*padding-bottom:7px}