Browse Source

增加公共样式:控件(新增/删除,单选/复选,开关),消息提示框的公用样式

wangcz 8 years ago
parent
commit
dcf9629a35
1 changed files with 226 additions and 0 deletions
  1. 226 0
      src/main/webapp/resources/css/commonComponent.css

+ 226 - 0
src/main/webapp/resources/css/commonComponent.css

@@ -66,6 +66,232 @@
 }
 /*---------------------提示框样式 end---------------------*/
 
+/*---------------------标准控件-新增start---------------------*/
+i.fa-plus-circle{
+    font-size: 16px!important;
+    color: #33b401!important;
+}
+/*---------------------标准控件-新增end---------------------*/
+
+/*---------------------标准控件-删除start---------------------*/
+i.fa-minus-circle{
+    font-size: 16px!important;
+    color: #f51c24!important;
+}
+/*---------------------标准控件-删除end---------------------*/
+
+/*---------------------标准控件-单选框start---------------------*/
+/** html代码
+    <label class="check-act">
+        <input type="radio" id="effect" name="radio" ng-model="isActive" ng-click="exchangeActive(true)" ng-checked="isActive" class="ng-pristine ng-untouched ng-valid">
+        <label for="effect"></label>
+        生效
+    </label>
+    <label class="check-act">
+        <input type="radio" id="no-effect" name="radio" ng-model="isActive" ng-click="exchangeActive(false)" ng-checked="!isActive" class="ng-untouched ng-valid ng-dirty" checked="checked">
+        <label for="no-effect"></label>
+        暂不生效
+    </label>
+**/
+.check-act{
+    margin-right: 40px!important;
+}
+.check-act input[type='radio']{
+    display: none!important;
+    margin: 7px 8px 0!important;
+}
+.check-act input[type='radio'] + label{
+    position: relative!important;
+    top: 7px!important;
+    margin-right: 5px!important;
+    display: inline-block!important;
+    width: 12px!important;
+    height: 12px!important;
+    font-weight: normal!important;
+    background: url(static/img/icon/check-rule.png) no-repeat!important;
+}
+.check-act label{
+    background-position: 0 0!important;
+}
+.check-act input:checked + label{
+    background-position: -15px 0!important;
+}
+/*---------------------标准控件-单选框end---------------------*/
+
+/*---------------------标准控件-复选框start---------------------*/
+/** html代码
+    <label class="check-act">
+       <input type="checkbox" id="1" ng-checked="item.checked" ng-click="checkInvoice(item)" checked="checked">
+           <label for="1"></label>
+    </label>
+**/
+.check-act input[type='checkbox'] {
+    display: none!important;
+}
+.check-act input[type='checkbox'] + label{
+    display: inline-block!important ;
+    position: relative!important ;
+    top: 2px!important ;
+    width: 12px!important ;
+    height: 12px!important ;
+    background: url(static/img/icon/check-rule.png) no-repeat!important ;
+}
+.check-act label {
+    background-position: -48px 0;
+}
+.check-act input:checked + label {
+    background-position: -31px 0;
+}
+/*---------------------标准控件-复选框end---------------------*/
+
+/*---------------------标准控件-开关(蓝色)start---------------------*/
+/** html代码
+    <div class="switch">
+        <span class="checkbox" ng-if="takeSelf.active==0" ng-click="changeActive(takeSelf, true)">
+            <span><em></em></span>
+        </span>
+        <span class="checkbox active" ng-if="takeSelf.active==1" ng-click="changeActive(takeSelf, false)">
+            <span><em></em></span>
+        </span>
+	</div>
+**/
+div.switch .checkbox {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    display: block;
+}
+div.switch .checkbox span {
+    width: 46px;
+    height: 12px;
+    display: inline-block;
+    border-radius: 18px;
+    border: #e4e4e4 1px solid;
+    cursor: pointer;
+    position: relative;
+    box-shadow: 1px 1px 5px #eee;
+    background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#E0E0E0), to(#E8E8E8), color-stop(0.5,#F2F2F2));
+    transition: background-color .1s ease-out;
+}
+div.switch .checkbox.active span{
+    background: #b9cffa;
+}
+div.switch .checkbox.active span em{
+    left: 34px;
+}
+div.switch .checkbox span em{
+    position: absolute;
+    width: 16px;
+    top: -5px;
+    left: 0;
+    height: 16px;
+    line-height: 16px;
+    background-color: #fff;
+    border: #eee 1px solid;
+    border-radius: 50%;
+    box-shadow: -1px 2px 1px #999;
+    transition: background-color .1s ease-out;
+    color: #666;
+    font-size: 12px;
+}
+div.switch .checkbox span em:after{
+    content: '';
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    background: #dedcdc;
+    border-radius: 100%;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+}
+/*---------------------标准控件-开关(蓝色)end---------------------*/
+
+/*---------------------标准控件-开关(绿色)start---------------------*/
+/** html代码
+    <div class="switch">
+        <span class="checkbox" ng-if="takeSelf.active==0" ng-click="changeActive(takeSelf, true)">
+            <span><em></em></span>
+        </span>
+        <span class="checkbox active" ng-if="takeSelf.active==1" ng-click="changeActive(takeSelf, false)">
+            <span><em></em></span>
+        </span>
+	</div>
+**/
+div.switch .checkbox {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    display: block;
+}
+div.switch .checkbox span {
+    width: 34px;
+    height: 18px;
+    display: inline-block;
+    border-radius: 18px;
+    border: #e4e4e4 1px solid;
+    cursor: pointer;
+    position: relative;
+    box-shadow: 1px 1px 5px #eee;
+    background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#bbbcba), to(#bfc1be), color-stop(0.5,#c5c7c4));
+    transition: background-color .1s ease-out;
+}
+div.switch .checkbox.active span{
+    background: #3acb14;
+}
+div.switch .checkbox.active span em{
+    left: 18px;
+}
+div.switch .checkbox span em{
+    position: absolute;
+    top: -2px;
+    left: -3px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    background-color: #fff;
+    border: #eee 1px solid;
+    border-radius: 50%;
+    box-shadow: -1px 2px 1px #999;
+    transition: background-color .1s ease-out;
+    color: #666;
+    font-size: 12px;
+}
+div.switch .checkbox span em:after{
+    content: '';
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    background: #dedcdc;
+    border-radius: 100%;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+}
+/*---------------------标准控件-开关(绿色)end---------------------*/
+
+/*---------------------信息提示框 start---------------------*/
+/** html代码
+    <div class="tip">
+        XXXX
+	</div>
+**/
+div.tip{
+    display: none;
+    padding: 13px 10px;
+    font-size: 12px;
+    color: #333;
+    background-color: #fff;
+    border: 1px solid #89aefa;
+    border-radius: 2px;
+    box-shadow: 2px 2px 5px #dedede;
+    -webkit-box-shadow: 2px 2px 5px #dedede;
+    -moz-box-shadow: 2px 2px 5px #dedede;
+    -o-box-shadow: 2px 2px 5px #dedede;
+}
+/*---------------------信息提示框 end---------------------*/
+
+
 /*---------------------提示浮层 start---------------------*/
 .com-supernatant-box{
     max-width:360px;