UNPKG

backman

Version:

基于Angluar与bootstrap进行后台管理系统快速搭建的前端框架

1,267 lines (1,226 loc) 41.6 kB
@charset "UTF-8"; /** * 第二代创建css3动画 * ----------------- */ /** * css3属性前缀 * ----------- */ html, body { min-height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; overflow-x: hidden; overflow-y: auto; } a { color: #3c8dbc; } a:hover, a:active, a:focus { color: #72afd2; outline: none; text-decoration: none; } /** * 基础布局 * ------- */ .backman { min-height: 100%; position: relative; overflow: hidden; } .backman:before, .backman:after { content: " "; display: table; } .backman:after { clear: both; } .backman-content { z-index: 800; min-height: 100%; margin-left: 230px; background-color: #ecf0f5; -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out; transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; } .backman-content .container-fluid { position: relative; min-height: 100%; margin: 15px 15px 20px; padding: 20px; font-family: Helvetica,'微软雅黑', Arial,sans-serif; border-radius: 3px; background: #ffffff; border-top: 3px solid #d2d6de; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } @media (max-width: 767px) { .backman-content { margin-left: 0; } .backman-content > .container-fluid { margin: 0; padding-bottom: 30px; border: none; box-shadow: none; border-radius: 0; } .sidebar-open .backman-content { -webkit-transform: translate(230px, 0); -moz-transform: translate(230px, 0); -ms-transform: translate(230px, 0); -o-transform: translate(230px, 0); transform: translate(230px, 0); } } @media (min-width: 768px) { body { position: absolute; min-height: 100%; width: 100%; } .backman { position: absolute; width: 100%; height: 100%; overflow-y: auto; } .backman-content { overflow-y: auto; } } @charset "UTF-8"; /** * 第二代创建css3动画 * ----------------- */ /** * css3属性前缀 * ----------- */ /* * 头部 * ---- */ .backman-header { position: relative; max-height: 100px; z-index: 1030; } .backman-header .logo { display: block; float: left; width: 230px; height: 50px; padding: 0 15px; overflow: hidden; font-size: 20px; line-height: 50px; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -ms-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .backman-header .logo img { width: 50px; margin: 0 3px; vertical-align: bottom; } .backman-header .navbar { min-height: 50px; margin-bottom: 0; margin-left: 230px; border-radius: 0; border: none; -webkit-transition: margin-left 0.3s ease-in-out; -moz-transition: margin-left 0.3s ease-in-out; -ms-transition: margin-left 0.3s ease-in-out; -o-transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out; } .backman-header .sidebar-toggle { display: none; float: left; margin: 0; padding: 15px; font-family: fontAwesome; color: #fff; background-color: transparent; background-image: none; border: 0; } .backman-header .sidebar-toggle:before { content: "\f0c9"; } .backman-header .sidebar-toggle:focus, .backman-header .sidebar-toggle:active { background: transparent; } .backman-header .navbar-right { float: right; padding-right: 20px; color: #fff; line-height: 50px; } .backman-header .navbar-right strong { margin-right: 5px; } .backman-header .navbar-right a { padding: 2px 8px; margin-left: 5px; } .backman-header .navbar-right a:active { padding: 3px 8px 1px; } @media (max-width: 767px) { .backman-header { position: relative; } .backman-header .logo { width: 100%; float: none; } .backman-header .navbar { width: 100%; float: none; margin: 0; } .backman-header .navbar .sidebar-toggle { display: block; } .backman-header .navbar .navbar-right { padding-right: 0px; } } @charset "UTF-8"; /** * 第二代创建css3动画 * ----------------- */ /** * css3属性前缀 * ----------- */ /* * 导航栏 * ------ */ .backman-sidebar { position: absolute; top: 0; left: 0; z-index: 810; min-height: 100%; width: 230px; padding-top: 50px; -webkit-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; } @media (max-width: 767px) { .backman-sidebar { position: fixed; padding-bottom: 10px; padding-top: 100px; -webkit-transform: translate(-230px, 0); -moz-transform: translate(-230px, 0); -ms-transform: translate(-230px, 0); -o-transform: translate(-230px, 0); transform: translate(-230px, 0); } .sidebar-open .backman-sidebar { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } /* * 导航栏菜单 * --------- */ .sidebar-menu { list-style: none; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; } .sidebar-menu li { position: relative; margin: 0; padding: 0; overflow: hidden; list-style: none; white-space: nowrap; } .sidebar-menu li.header { padding: 10px 25px 10px 15px; overflow: hidden; font-size: 12px; text-overflow: clip; } .sidebar-menu li.home a { display: block; padding: 12px 5px 12px 15px; border-left: 3px solid; } .sidebar-menu li.home a .fa { width: 20px; } .sidebar-menu li.treeview > a.treeview-link, .sidebar-menu li.treeview > a.treeview-title { display: block; padding: 12px 5px 12px 15px; } .sidebar-menu li.treeview > a.treeview-link .fa, .sidebar-menu li.treeview > a.treeview-title .fa { width: 20px; } .sidebar-menu li.treeview > a.treeview-link .fa-folder, .sidebar-menu li.treeview > a.treeview-link .fa-folder-o, .sidebar-menu li.treeview > a.treeview-title .fa-folder, .sidebar-menu li.treeview > a.treeview-title .fa-folder-o { display: inline-block; } .sidebar-menu li.treeview > a.treeview-link .fa-folder-open, .sidebar-menu li.treeview > a.treeview-link .fa-folder-open-o, .sidebar-menu li.treeview > a.treeview-title .fa-folder-open, .sidebar-menu li.treeview > a.treeview-title .fa-folder-open-o { display: none; } .sidebar-menu li.treeview > a.treeview-link .fa-angle-left, .sidebar-menu li.treeview > a.treeview-title .fa-angle-left { width: auto; height: auto; padding: 0; margin-right: 10px; line-height: 20px; } .sidebar-menu li.treeview > a.treeview-link .fa-caret-right, .sidebar-menu li.treeview > a.treeview-title .fa-caret-right { display: inline-block; } .sidebar-menu li.treeview > a.treeview-link .fa-chevron-right, .sidebar-menu li.treeview > a.treeview-title .fa-chevron-right { display: none; text-align: center; font-size: 12px; vertical-align: middle; } .sidebar-menu li.treeview > a.treeview-link.cur .fa-caret-right, .sidebar-menu li.treeview > a.treeview-title.cur .fa-caret-right { display: none; } .sidebar-menu li.treeview > a.treeview-link.cur .fa-chevron-right, .sidebar-menu li.treeview > a.treeview-title.cur .fa-chevron-right { display: inline-block; } .sidebar-menu li.treeview > ul.treeview-menu { display: none; list-style: none; padding: 0; margin: 0; padding-left: 10px; } .sidebar-menu li.treeview > ul.treeview-menu > li.treeview { margin: 0; overflow: hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-link, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-title { position: relative; padding: 5px 5px 5px 15px; display: block; font-size: 14px; } .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-link > .fa-folder-o, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-link > .fa-folder-open-o, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-link > .fa-caret-right, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-title > .fa-folder-o, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-title > .fa-folder-open-o, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-title > .fa-caret-right { width: 20px; text-align: center; } .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-link > span, .sidebar-menu li.treeview > ul.treeview-menu > li.treeview > a.treeview-title > span { display: inline-block; width: 150px; overflow: hidden; vertical-align: bottom; white-space: nowrap; text-overflow: ellipsis; } .sidebar-menu li.treeview > ul.treeview-menu > li.treeview ul.treeview-menu { padding-left: 15px; } .sidebar-menu li.treeview.active > a.treeview-title .fa-folder, .sidebar-menu li.treeview.active > a.treeview-title .fa-folder-o { display: none; } .sidebar-menu li.treeview.active > a.treeview-title .fa-folder-open, .sidebar-menu li.treeview.active > a.treeview-title .fa-folder-open-o { display: inline-block; } .sidebar-menu li.treeview.active > a.treeview-title .fa-angle-left { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } @charset "UTF-8"; /* * 皮肤:蓝色 * ---------- */ .skin-blue .backman-header .navbar { background-color: #3c8dbc; } .skin-blue .backman-header .navbar .sidebar-toggle { color: #ffffff; } .skin-blue .backman-header .navbar .sidebar-toggle:hover { color: #f6f6f6; background-color: #367fa9; } .skin-blue .backman-header .logo { background-color: #367fa9; color: #ffffff; border-bottom: 0 solid transparent; } .skin-blue .backman-header .logo:hover { background-color: #357ca5; } .skin-blue .backman, .skin-blue .backman-sidebar { background-color: #222d32; } .skin-blue .backman-content .container-fluid { border-top-color: #3c8dbc; } .skin-blue .sidebar-menu > li.header { color: #4b646f; background: #1a2226; } .skin-blue .sidebar-menu > li.home a { border-left-color: #222d32; } .skin-blue .sidebar-menu > li.home:hover a, .skin-blue .sidebar-menu > li.home.cur a { color: #d5e9f2; background: #1e282c; border-left-color: #3c8dbc; } .skin-blue .sidebar-menu > li.home.cur a span { color: #40b9ff; } .skin-blue .sidebar-menu > li > a.treeview-title { color: #8aa4af; border-left: 3px solid transparent; } .skin-blue .sidebar-menu > li:hover > a.treeview-title, .skin-blue .sidebar-menu > li.active > a.treeview-title { color: #ffffff; background: #1e282c; border-left-color: #3c8dbc; } .skin-blue .sidebar-menu > li:hover .active, .skin-blue .sidebar-menu > li.active .active { overflow: visible !important; } .skin-blue .sidebar-menu > li:hover .active > a, .skin-blue .sidebar-menu > li.active .active > a { position: relative; color: #ffffff; background: #263338; } .skin-blue .sidebar-menu > li:hover .active > a:before, .skin-blue .sidebar-menu > li.active .active > a:before { position: absolute; top: 0; left: -10px; width: 10px; height: 30px; content: ' '; background: #263338; } .skin-blue .sidebar-menu > li > .treeview-menu { margin: 0 1px; background: #2c3b41; } .skin-blue .sidebar-menu a { color: #b8c7ce; } .skin-blue .sidebar-menu a:hover { color: #d5e9f2; text-decoration: none; } .skin-blue .sidebar-menu a.cur { color: #40b9ff; text-shadow: #263338 1px 1px 0; } @charset "UTF-8"; /** * 第二代创建css3动画 * ----------------- */ /** * css3属性前缀 * ----------- */ .backman { /** * 表格 * ---- */ /** * 输入元素 * ------- */ /** * 按钮基本 * ------- */ /** * 按钮颜色 * ------- * 依次是:文本色、背景色、边框色、悬停背景色、悬停边框色 */ /** * 其他元素 * ------- */ } .backman table:not(.table) { width: 100%; max-width: 100%; margin-bottom: 20px; background-color: transparent; border-collapse: separate; border-spacing: 0; border: #ddd 1px solid; border-left: 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .backman table:not(.table) caption + thead tr:first-child th, .backman table:not(.table) caption + tbody tr:first-child th, .backman table:not(.table) caption + tbody tr:first-child td, .backman table:not(.table) colgroup + thead tr:first-child th, .backman table:not(.table) colgroup + tbody tr:first-child th, .backman table:not(.table) colgroup + tbody tr:first-child td, .backman table:not(.table) thead:first-child tr:first-child th, .backman table:not(.table) tbody:first-child tr:first-child th, .backman table:not(.table) tbody:first-child tr:first-child td { border-top: 0; } .backman table:not(.table) th { font-weight: bold; } .backman table:not(.table) th, .backman table:not(.table) td { padding: 8px; line-height: 20px; text-align: center; border: none; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } .backman table:not(.table) th[align="left"], .backman table:not(.table) td[align="left"] { text-align: left; } .backman table:not(.table) th[align="right"], .backman table:not(.table) td[align="right"] { text-align: right; } .backman table:not(.table) th[align="center"], .backman table:not(.table) td[align="center"] { text-align: center; } .backman table:not(.table).table-unborder, .backman table:not(.table).table-unborder th, .backman table:not(.table).table-unborder td { text-align: left; border: none; } .backman .table-responsive { margin-bottom: 20px; } .backman .table-responsive table { margin-bottom: 0; } @media (max-width: 767px) { .backman .table-responsive table:not(.table) { border: none; } .backman .table-responsive table:not(.table) tr th:first-child, .backman .table-responsive table:not(.table) tr td:first-child { border-left: none; } } .backman input[type="text"], .backman input[type="password"], .backman input[type="datetime"], .backman input[type="datetime-local"], .backman input[type="date"], .backman input[type="month"], .backman input[type="time"], .backman input[type="week"], .backman input[type="number"], .backman input[type="email"], .backman input[type="url"], .backman input[type="search"], .backman input[type="tel"], .backman input[type="color"], .backman select, .backman textarea { display: inline-block; padding: 4px 6px; margin-bottom: 10px; margin-right: 10px; font-size: 14px; color: #555; vertical-align: middle; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .backman input[type="text"], .backman input[type="password"], .backman input[type="datetime"], .backman input[type="datetime-local"], .backman input[type="date"], .backman input[type="month"], .backman input[type="time"], .backman input[type="week"], .backman input[type="number"], .backman input[type="email"], .backman input[type="url"], .backman input[type="search"], .backman input[type="tel"], .backman input[type="color"], .backman textarea { background-color: white; border: 1px solid #CCC; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } .backman input[type="text"]:focus, .backman input[type="password"]:focus, .backman input[type="datetime"]:focus, .backman input[type="datetime-local"]:focus, .backman input[type="date"]:focus, .backman input[type="month"]:focus, .backman input[type="time"]:focus, .backman input[type="week"]:focus, .backman input[type="number"]:focus, .backman input[type="email"]:focus, .backman input[type="url"]:focus, .backman input[type="search"]:focus, .backman input[type="tel"]:focus, .backman input[type="color"]:focus, .backman textarea:focus, .backman .uneditable-input:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } .backman input[type="search"] { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-appearance: textfield; -webkit-box-sizing: content-box; } .backman input[type="radio"], .backman input[type="checkbox"] { line-height: normal; vertical-align: middle; } .backman label input[type="radio"], .backman label input[type="checkbox"] { float: left; margin: 1px \9 3px 0 0; margin-left: 0; } .backman label, .backman select, .backman button, .backman input[type="button"], .backman input[type="reset"], .backman input[type="submit"], .backman input[type="radio"], .backman input[type="checkbox"] { cursor: pointer; } .backman input[type="file"], .backman input[type="image"], .backman input[type="submit"], .backman input[type="reset"], .backman input[type="button"], .backman input[type="radio"], .backman input[type="checkbox"] { width: auto; } .backman select, .backman input[type="file"] { height: 30px; *margin-top: 4px; line-height: 30px; } .backman select { min-width: 167px; background-color: #fff; border: 1px solid #ccc; } .backman select[multiple], .backman select[size] { height: auto; } .backman input, .backman select, .backman button, .backman a { outline: none !important; } .backman textarea { width: auto; height: auto; outline: none; resize: none; } .backman input[disabled], .backman select[disabled], .backman textarea[disabled] { background-color: #eee; -moz-user-select: none; -webkit-user-select: none; user-select: none; cursor: not-allowed; } .backman input[readonly], .backman select[readonly], .backman textarea[readonly] { background-color: #eee; } .backman input[type="radio"][disabled], .backman input[type="checkbox"][disabled], .backman input[type="radio"][readonly], .backman input[type="checkbox"][readonly] { opacity: 0.5; } .backman input:focus:invalid:focus, .backman textarea:focus:invalid:focus, .backman 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; } .backman input[type="number"][size="1"] { width: 20px; } .backman input[type="number"][size="2"] { width: 27px; } .backman input[type="number"][size="3"] { width: 34px; } .backman input[type="number"][size="4"] { width: 41px; } .backman input[type="number"][size="5"] { width: 48px; } .backman input[type="number"][size="6"] { width: 55px; } .backman input[type="number"][size="7"] { width: 62px; } .backman input[type="number"][size="8"] { width: 69px; } .backman input[type="number"][size="9"] { width: 76px; } .backman input[type="number"][size="10"] { width: 83px; } .backman input[type="number"][size="11"] { width: 90px; } .backman input[type="number"][size="12"] { width: 97px; } .backman input[type="number"][size="13"] { width: 104px; } .backman input[type="number"][size="14"] { width: 111px; } .backman input[type="number"][size="15"] { width: 118px; } .backman input[type="number"][size="16"] { width: 125px; } .backman input[type="number"][size="17"] { width: 132px; } .backman input[type="number"][size="18"] { width: 139px; } .backman input[type="number"][size="19"] { width: 146px; } .backman input[type="number"][size="20"] { width: 153px; } .backman input[type="number"][size="21"] { width: 160px; } .backman input[type="number"][size="22"] { width: 167px; } .backman input[type="number"][size="23"] { width: 174px; } .backman input[type="number"][size="24"] { width: 181px; } .backman input[type="number"][size="25"] { width: 188px; } .backman input[type="number"][size="26"] { width: 195px; } .backman input[type="number"][size="27"] { width: 202px; } .backman input[type="number"][size="28"] { width: 209px; } .backman input[type="number"][size="29"] { width: 216px; } .backman input[type="number"][size="30"] { width: 223px; } .backman input[type="number"][size="31"] { width: 230px; } .backman input[type="number"][size="32"] { width: 237px; } .backman input[type="number"][size="33"] { width: 244px; } .backman input[type="number"][size="34"] { width: 251px; } .backman input[type="number"][size="35"] { width: 258px; } .backman input[type="number"][size="36"] { width: 265px; } .backman input[type="number"][size="37"] { width: 272px; } .backman input[type="number"][size="38"] { width: 279px; } .backman input[type="number"][size="39"] { width: 286px; } .backman input[type="number"][size="40"] { width: 293px; } .backman input[type="number"][size="41"] { width: 300px; } .backman input[type="number"][size="42"] { width: 307px; } .backman input[type="number"][size="43"] { width: 314px; } .backman input[type="number"][size="44"] { width: 321px; } .backman input[type="number"][size="45"] { width: 328px; } .backman input[type="number"][size="46"] { width: 335px; } .backman input[type="number"][size="47"] { width: 342px; } .backman input[type="number"][size="48"] { width: 349px; } .backman input[type="number"][size="49"] { width: 356px; } .backman input[type="number"][size="50"] { width: 363px; } .backman input[type="number"][size="51"] { width: 370px; } .backman input[type="number"][size="52"] { width: 377px; } .backman input[type="number"][size="53"] { width: 384px; } .backman input[type="number"][size="54"] { width: 391px; } .backman input[type="number"][size="55"] { width: 398px; } .backman input[type="number"][size="56"] { width: 405px; } .backman input[type="number"][size="57"] { width: 412px; } .backman input[type="number"][size="58"] { width: 419px; } .backman input[type="number"][size="59"] { width: 426px; } .backman input[type="number"][size="60"] { width: 433px; } .backman input[type="number"][size="61"] { width: 440px; } .backman input[type="number"][size="62"] { width: 447px; } .backman input[type="number"][size="63"] { width: 454px; } .backman input[type="number"][size="64"] { width: 461px; } .backman input[type="number"][size="65"] { width: 468px; } .backman input[type="number"][size="66"] { width: 475px; } .backman input[type="number"][size="67"] { width: 482px; } .backman input[type="number"][size="68"] { width: 489px; } .backman input[type="number"][size="69"] { width: 496px; } .backman input[type="number"][size="70"] { width: 503px; } .backman input[type="number"][size="71"] { width: 510px; } .backman input[type="number"][size="72"] { width: 517px; } .backman input[type="number"][size="73"] { width: 524px; } .backman input[type="number"][size="74"] { width: 531px; } .backman input[type="button"], .backman input[type="submit"], .backman button, .backman a[class*="btn-"] { display: inline-block; *display: inline; padding: 6px 12px; *margin-left: 0.3em; margin-right: 10px; font-size: 14px; line-height: 20px; color: #333333; text-align: center; vertical-align: middle; background-color: #fff; *background-color: #fff; border: 1px solid #ccc; *border: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; *zoom: 1; cursor: pointer; } .backman input[type="button"]:hover, .backman input[type="button"]:focus, .backman input[type="button"]:active, .backman input[type="button"][disabled], .backman input[type="submit"]:hover, .backman input[type="submit"]:focus, .backman input[type="submit"]:active, .backman input[type="submit"][disabled], .backman button:hover, .backman button:focus, .backman button:active, .backman button[disabled], .backman a[class*="btn-"]:hover, .backman a[class*="btn-"]:focus, .backman a[class*="btn-"]:active, .backman a[class*="btn-"][disabled] { color: #333; background-color: #e6e6e6; *background-color: #d9d9d9; } .backman input[type="button"]:active, .backman input[type="submit"]:active, .backman button:active, .backman a[class*="btn-"]:active { background-color: #ccc \9; } .backman input[type="button"]:first-child, .backman input[type="submit"]:first-child, .backman button:first-child, .backman a[class*="btn-"]:first-child { *margin-left: 0; } .backman input[type="button"]:hover, .backman input[type="button"]:focus, .backman input[type="submit"]:hover, .backman input[type="submit"]:focus, .backman button:hover, .backman button:focus, .backman a[class*="btn-"]:hover, .backman a[class*="btn-"]:focus { color: #333; text-decoration: none; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .backman input[type="button"]:active, .backman input[type="submit"]:active, .backman button:active, .backman a[class*="btn-"]:active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -ms-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -o-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .backman input[type="button"][disabled], .backman input[type="submit"][disabled], .backman button[disabled], .backman a[class*="btn-"][disabled] { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; opacity: 0.65; } .backman input[type="button"].btn-default, .backman input[type="submit"].btn-default, .backman button.btn-default, .backman a.btn-default { color: #444; background-color: #fff; border-color: #ccc; } .backman input[type="button"].btn-default:hover, .backman input[type="button"].btn-default:focus, .backman input[type="submit"].btn-default:hover, .backman input[type="submit"].btn-default:focus, .backman button.btn-default:hover, .backman button.btn-default:focus, .backman a.btn-default:hover, .backman a.btn-default:focus { color: #444; background-color: #e7e7e7; border-color: #adadad; } .backman input[type="button"].btn-primary, .backman input[type="submit"].btn-primary, .backman button.btn-primary, .backman a.btn-primary { color: #fff; background-color: #3c8dbc; border-color: #367fa9; } .backman input[type="button"].btn-primary:hover, .backman input[type="button"].btn-primary:focus, .backman input[type="submit"].btn-primary:hover, .backman input[type="submit"].btn-primary:focus, .backman button.btn-primary:hover, .backman button.btn-primary:focus, .backman a.btn-primary:hover, .backman a.btn-primary:focus { color: #fff; background-color: #367fa9; border-color: #204d74; } .backman input[type="button"].btn-success, .backman input[type="submit"].btn-success, .backman button.btn-success, .backman a.btn-success { color: #fff; background-color: #00a65a; border-color: #008d4c; } .backman input[type="button"].btn-success:hover, .backman input[type="button"].btn-success:focus, .backman input[type="submit"].btn-success:hover, .backman input[type="submit"].btn-success:focus, .backman button.btn-success:hover, .backman button.btn-success:focus, .backman a.btn-success:hover, .backman a.btn-success:focus { color: #fff; background-color: #008d4c; border-color: #398439; } .backman input[type="button"].btn-info, .backman input[type="submit"].btn-info, .backman button.btn-info, .backman a.btn-info { color: #fff; background-color: #00c0ef; border-color: #00acd6; } .backman input[type="button"].btn-info:hover, .backman input[type="button"].btn-info:focus, .backman input[type="submit"].btn-info:hover, .backman input[type="submit"].btn-info:focus, .backman button.btn-info:hover, .backman button.btn-info:focus, .backman a.btn-info:hover, .backman a.btn-info:focus { color: #fff; background-color: #00acd6; border-color: #269abc; } .backman input[type="button"].btn-danger, .backman input[type="submit"].btn-danger, .backman button.btn-danger, .backman a.btn-danger { color: #fff; background-color: #dd4b39; border-color: #d73925; } .backman input[type="button"].btn-danger:hover, .backman input[type="button"].btn-danger:focus, .backman input[type="submit"].btn-danger:hover, .backman input[type="submit"].btn-danger:focus, .backman button.btn-danger:hover, .backman button.btn-danger:focus, .backman a.btn-danger:hover, .backman a.btn-danger:focus { color: #fff; background-color: #d73925; border-color: #ac2925; } .backman input[type="button"].btn-warning, .backman input[type="submit"].btn-warning, .backman button.btn-warning, .backman a.btn-warning { color: #fff; background-color: #f39c12; border-color: #e08e0b; } .backman input[type="button"].btn-warning:hover, .backman input[type="button"].btn-warning:focus, .backman input[type="submit"].btn-warning:hover, .backman input[type="submit"].btn-warning:focus, .backman button.btn-warning:hover, .backman button.btn-warning:focus, .backman a.btn-warning:hover, .backman a.btn-warning:focus { color: #fff; background-color: #e08e0b; border-color: #d58512; } .backman label { display: inline-block; min-height: 20px; margin-right: 10px; margin-bottom: 10px; vertical-align: middle; font-weight: normal; } .bm-select2-box { position: relative; display: inline-block; } .bm-select2-box > input[type="text"] { width: 100%; margin: 0; } .bm-select2-list { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 2px 5px; overflow: auto; max-height: 200px; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } @charset "UTF-8"; /** * 指令:时间选择器 * ----------------- */ input.laydate-icon { height: 30px; } .laydate_box { box-sizing: initial; } .laydate_box * { box-sizing: initial; } @charset "UTF-8"; /** * 指令:富文本编辑器 * ----------------- */ .ke-container { border-radius: 4px; } .ke-container .ke-toolbar { background-color: #fafafa; background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); border-top-left-radius: 4px; border-top-right-radius: 4px; } .ke-container .ke-toolbar .ke-outline:not(.ke-selected):not(.ke-on) { border-color: transparent; } .ke-container .ke-statusbar { background: #fafafa; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .ke-container .ke-statusbar-right-icon { display: none; } .ke-dialog input[type="text"].ke-input-text { height: 23px; } @charset "UTF-8"; /** * 第二代创建css3动画 * ----------------- */ /** * css3属性前缀 * ----------- */ /** * 指令:图片上传工具 * ----------------- */ .bm-upload-img { position: relative; width: 100px; height: 100px; } .bm-upload-img .bm-upload-img-bg { position: relative; z-index: 10; } .bm-upload-img .bm-upload-img-bg i.fa-image { padding: 21px 19px 19px 17px; font-size: 50px; color: #bbb; background: #eee; } .bm-upload-img .bm-upload-img-bg i.fa-plus { position: absolute; top: 22px; right: 18px; font-size: 20px; color: #bbb; text-shadow: #eee -3px 0 0, #eee 0 3px 0; } .bm-upload-img .bm-upload-img-input { position: absolute; top: 0; left: 0; z-index: 20; width: 100px; height: 100px; overflow: hidden; } .bm-upload-img .bm-upload-img-input input[type="file"] { position: absolute; top: 0; right: 0; height: 100px; font-size: 81px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; } .bm-upload-img .bm-upload-img-uping { position: absolute; top: 5px; left: 5px; z-index: 30; width: 90px; height: 90px; line-height: 100px; text-align: center; color: #aaa; background: #eee; } .bm-upload-img .bm-upload-img-uping i.fa-spinner { font-size: 30px; -webkit-animation: uploadImgRotate 3s infinite linear; -moz-animation: uploadImgRotate 3s infinite linear; -ms-animation: uploadImgRotate 3s infinite linear; -o-animation: uploadImgRotate 3s infinite linear; animation: uploadImgRotate 3s infinite linear; } .bm-upload-img .bm-upload-img-view { position: absolute; top: 0; left: 0; z-index: 100; width: 100px; height: 100px; outline: none; } .bm-upload-img .bm-upload-img-view > span { display: inline-block; width: 90px; height: 90px; text-align: center; line-height: 90px; background: #eee; } .bm-upload-img .bm-upload-img-view > span > img { max-width: 100%; max-height: 100%; cursor: pointer; } .bm-upload-img .bm-upload-img-view > i { display: none; position: absolute; top: -12px; right: -12px; z-index: 1; width: 30px; height: 30px; color: #ccc; font-size: 22px; text-align: center; line-height: 26px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; overflow: hidden; cursor: pointer; } .bm-upload-img .bm-upload-img-view > i:hover { color: #fff; background: #da4f49; border-color: #da4f49; -webkit-box-shadow: rgba(128, 79, 73, 0.5) 0 0 4px; -moz-box-shadow: rgba(128, 79, 73, 0.5) 0 0 4px; -ms-box-shadow: rgba(128, 79, 73, 0.5) 0 0 4px; -o-box-shadow: rgba(128, 79, 73, 0.5) 0 0 4px; box-shadow: rgba(128, 79, 73, 0.5) 0 0 4px; } .bm-upload-img .bm-upload-img-view:hover > i, .bm-upload-img .bm-upload-img-view:focus > i { display: block; } .bm-upload-img-super > .layui-layer-title { position: absolute; z-index: 2; width: 100%; background: none; border: none; } .bm-upload-img-super > .layui-layer-content { position: relative; background: #eee; } .bm-upload-img-super > .layui-layer-content > img { position: absolute; max-width: 100%; max-height: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .bm-upload-img-super > .layui-layer-content > span { display: none; position: absolute; bottom: 0; left: 0; z-index: 2; max-width: 80%; padding: 0 7px; overflow: hidden; white-space: nowrap; line-height: 30px; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.75); opacity: 0; } .bm-upload-img-super > .layui-layer-content:hover > span { display: block; } .bm-upload-img-super > .layui-layer-content:hover > span:hover { opacity: 1; } .bm-upload-img-super .layui-layer-resize { right: 1px; bottom: 1px; width: 24px; height: 24px; font: normal normal normal 16px/1 FontAwesome; } .bm-upload-img-super .layui-layer-resize:before { display: block; width: 24px; height: 24px; text-align: center; line-height: 24px; content: "\f07d"; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .bm-upload-img-super .layui-layer-resize:hover, .bm-upload-img-super .layui-layer-resize:active { background: rgba(255, 255, 255, 0.6); } .bm-upload-img-del { max-width: 220px; max-height: 220px; background: #eee; } @-webkit-keyframes uploadImgRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-moz-keyframes uploadImgRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-ms-keyframes uploadImgRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-o-keyframes uploadImgRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes uploadImgRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }