修改required属性值

修改弹出框底部为白色
取消分类列表为空
修改CRUD生成required

application/admin/command/Crud.php

@@ -253,7 +253,7 @@ class Crud extends Command
                     // 如果默认值为空,则是一个必选项
                     if ($v['COLUMN_DEFAULT'] == '')
                     {
-                        $attrArr['required'] = '';
+                        $attrArr['data-rule'] = 'required';
                     }
                     if ($field == 'status' && in_array($inputType, ['text', 'number']))
                     {

application/admin/controller/Category.php

@@ -46,7 +46,7 @@ class Category extends Backend
             //构造父类select列表选项数据
             $list = $this->categorylist;
             $total = count($list);
-            $result = array("total" => $total, "rows" => $list);
+            $result = array("total" => 1, "rows" => $list);
 
             return json($result);
         }

application/admin/view/auth/rule/edit.html

@@ -35,7 +35,7 @@
     <div class="form-group">
         <label for="weigh" class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" required="required" />
+            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">

application/admin/view/category/add.html

@@ -3,15 +3,15 @@
         <div class="col-xs-12 col-sm-6">
             <div class="form-group">
                 <label for="type" class="control-label">{:__('Type')}:</label>
-                {:build_select('row[type]', $typelist, [], ['id'=>'c-type','class'=>'form-control selectpicker','required'=>''])}
+                {:build_select('row[type]', $typelist, [], ['id'=>'c-type','class'=>'form-control selectpicker','data-rule'=>'required'])}
             </div>
             <div class="form-group">
                 <label for="title" class="control-label">{:__('Name')}:</label>
-                <input type="text" class="form-control" id="name" name="row[name]" value="" required="required" />
+                <input type="text" class="form-control" id="name" name="row[name]" value="" data-rule="required" />
             </div>
             <div class="form-group">
                 <label for="nickname" class="control-label">{:__('Nickname')}:</label>
-                <input type="text" class="form-control" id="nickname" name="row[nickname]" value="" required="required" />
+                <input type="text" class="form-control" id="nickname" name="row[nickname]" value="" data-rule="required" />
             </div>
             <div class="form-group">
                 <label for="keywords" class="control-label">{:__('Keywords')}:</label>
@@ -25,7 +25,7 @@
                 <div class="col-sm-4">
                     <div class="form-group form-inline">
                         <label for="weigh" class="control-label">{:__('Weigh')}:</label>
-                        <input type="text" class="form-control" id="weigh" name="row[weigh]" value="0" required="required" size="3" />
+                        <input type="text" class="form-control" id="weigh" name="row[weigh]" value="0" data-rule="required" size="3" />
                     </div>
                 </div>
             </div>
@@ -34,11 +34,11 @@
 
             <div class="form-group">
                 <label for="pid" class="control-label">{:__('Parent')}:</label>
-                {:build_select('row[pid]', $parentlist, null, ['id'=>'c-pid','class'=>'form-control selectpicker','required'=>''])}
+                {:build_select('row[pid]', $parentlist, null, ['id'=>'c-pid','class'=>'form-control selectpicker','data-rule'=>'required'])}
             </div>
             <div class="form-group">
                 <label for="c-flag" class="control-label">{:__('Flag')}:</label>
-                {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], null, ['id'=>'c-flag','class'=>'form-control selectpicker','required'=>''])}
+                {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], null, ['id'=>'c-flag','class'=>'form-control selectpicker','data-rule'=>'required'])}
             </div>
             <div class="form-group">
                 <label for="content" class="control-label">{:__('Status')}:</label>

application/admin/view/category/edit.html

@@ -3,15 +3,15 @@
         <div class="col-xs-12 col-sm-6">
             <div class="form-group">
                 <label for="type" class="control-label">{:__('Type')}:</label>
-                {:build_select('row[type]', $typelist, $row['type'], ['id'=>'c-type','class'=>'form-control selectpicker','required'=>''])}
+                {:build_select('row[type]', $typelist, $row['type'], ['id'=>'c-type','class'=>'form-control selectpicker','data-rule'=>'required'])}
             </div>
             <div class="form-group">
                 <label for="title" class="control-label">{:__('Name')}:</label>
-                <input type="text" class="form-control" id="name" name="row[name]" value="{$row.name}" required="required" />
+                <input type="text" class="form-control" id="name" name="row[name]" value="{$row.name}" data-rule="required" />
             </div>
             <div class="form-group">
                 <label for="nickname" class="control-label">{:__('Nickname')}:</label>
-                <input type="text" class="form-control" id="nickname" name="row[nickname]" value="{$row.nickname}" required="required" />
+                <input type="text" class="form-control" id="nickname" name="row[nickname]" value="{$row.nickname}" data-rule="required" />
             </div>
             <div class="form-group">
                 <label for="keywords" class="control-label">{:__('Keywords')}:</label>
@@ -25,7 +25,7 @@
                 <div class="col-sm-4">
                     <div class="form-group form-inline">
                         <label for="weigh" class="control-label">{:__('Weigh')}:</label>
-                        <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" required="required" size="3" />
+                        <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" data-rule="required" size="3" />
                     </div>
                 </div>
             </div>
@@ -34,11 +34,11 @@
 
             <div class="form-group">
                 <label for="pid" class="control-label">{:__('Parent')}:</label>
-                {:build_select('row[pid]', $parentlist, $row['pid'], ['id'=>'c-pid','class'=>'form-control selectpicker','required'=>''])}
+                {:build_select('row[pid]', $parentlist, $row['pid'], ['id'=>'c-pid','class'=>'form-control selectpicker','data-rule'=>'required'])}
             </div>
             <div class="form-group">
                 <label for="c-flag" class="control-label">{:__('Flag')}:</label>
-                {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], $row['flag'], ['id'=>'c-flag','class'=>'form-control selectpicker','required'=>''])}
+                {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], $row['flag'], ['id'=>'c-flag','class'=>'form-control selectpicker','data-rule'=>'required'])}
             </div>
             <div class="form-group">
                 <label for="content" class="control-label">{:__('Status')}:</label>

application/admin/view/general/configvalue/add.html

@@ -8,13 +8,13 @@
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">ID:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="id" name="row[id]" value="" required="required" />
+            <input type="text" class="form-control" id="id" name="row[id]" value="" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="name" name="row[name]" value="" required="required" />
+            <input type="text" class="form-control" id="name" name="row[name]" value="" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
@@ -38,7 +38,7 @@
     <div class="form-group">
         <label for="weigh" class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="0" required="required" size="6" />
+            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="0" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">

application/admin/view/general/configvalue/edit.html

@@ -8,13 +8,13 @@
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">ID:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="id" name="row[id]" value="{$row.id}" required="required" />
+            <input type="text" class="form-control" id="id" name="row[id]" value="{$row.id}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="name" name="row[name]" value="{$row.name}" required="required" />
+            <input type="text" class="form-control" id="name" name="row[name]" value="{$row.name}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
@@ -40,7 +40,7 @@
     <div class="form-group">
         <label for="weigh" class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
         <div class="col-xs-2">
-            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" required="required" size="6" />
+            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">

application/admin/view/general/crontab/add.html

@@ -3,60 +3,60 @@
         padding-top:7px;
     }
 </style>
-<form id="add-form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action="">
+<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="title" name="row[title]" value="" required="required" />
+            <input type="text" class="form-control" id="title" name="row[title]" value="" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
         <div class="col-xs-12 col-sm-8">
-            {:build_select('row[type]', $typedata, null, ['class'=>'form-control'])}
+            {:build_select('row[type]', $typedata, null, ['class'=>'form-control', 'data-rule'=>'required'])}
         </div>
     </div>
     <div class="form-group">
         <label for="content" class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <textarea name="row[content]" id="conent" cols="30" rows="5" class="form-control"></textarea>
+            <textarea name="row[content]" id="conent" cols="30" rows="5" class="form-control" data-rule="required"></textarea>
         </div>
     </div>
     <div class="form-group">
         <label for="schedule" class="control-label col-xs-12 col-sm-2">{:__('Schedule')}:</label>
         <div class="col-xs-12 col-sm-8">
             <div id="schedulepicker"></div>
-            <input type="text" class="form-control hide" id="schedule" name="row[schedule]" value="" required="required" />
+            <input type="text" class="form-control hide" id="schedule" name="row[schedule]" value="" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="sleep" class="control-label col-xs-12 col-sm-2">{:__('sleep')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="number" class="form-control" id="sleep" name="row[sleep]" value="0" required="required" size="6" />
+            <input type="number" class="form-control" id="sleep" name="row[sleep]" value="0" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="maximums" class="control-label col-xs-12 col-sm-2">{:__('Maximums')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="number" class="form-control" id="maximums" name="row[maximums]" value="0" required="required" size="6" />
+            <input type="number" class="form-control" id="maximums" name="row[maximums]" value="0" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="begintime" class="control-label col-xs-12 col-sm-2">{:__('Begin time')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="text" class="form-control datetimepicker" id="begintime" name="row[begintime]" value="" required="required" size="6" />
+            <input type="text" class="form-control datetimepicker" id="begintime" name="row[begintime]" value="" data-rule="{:__('Begin time')}:required" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="endtime" class="control-label col-xs-12 col-sm-2">{:__('End time')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="text" class="form-control datetimepicker" id="endtime" name="row[endtime]" value="" required="required" size="6" />
+            <input type="text" class="form-control datetimepicker" id="endtime" name="row[endtime]" value="" data-rule="{:__('End time')}:required;match(gte, row[begintime], datetime)" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="weigh" class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="0" required="required" size="6" />
+            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="0" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">

application/admin/view/general/crontab/edit.html

@@ -7,50 +7,56 @@
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="title" name="row[title]" value="{$row.title}" required="required" />
+            <input type="text" class="form-control" id="title" name="row[title]" value="{$row.title}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
         <div class="col-xs-12 col-sm-8">
-            {:build_select('row[type]', $typedata, $row['type'], ['class'=>'form-control'])}
+            {:build_select('row[type]', $typedata, $row['type'], ['class'=>'form-control', 'data-rule'=>'required'])}
         </div>
     </div>
     <div class="form-group">
         <label for="content" class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <textarea name="row[content]" id="conent" cols="30" rows="5" class="form-control">{$row.content}</textarea>
+            <textarea name="row[content]" id="conent" cols="30" rows="5" class="form-control" data-rule="required">{$row.content}</textarea>
         </div>
     </div>
     <div class="form-group">
         <label for="schedule" class="control-label col-xs-12 col-sm-2">{:__('Schedule')}:</label>
         <div class="col-xs-12 col-sm-8">
             <div id="schedulepicker"></div>
-            <input type="text" class="form-control hide" id="schedule" name="row[schedule]" value="{$row.schedule}" required="required" />
+            <input type="text" class="form-control hide" id="schedule" name="row[schedule]" value="{$row.schedule}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="sleep" class="control-label col-xs-12 col-sm-2">{:__('sleep')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="number" class="form-control" id="sleep" name="row[sleep]" value="{$row.sleep}" required="required" size="6" />
+            <input type="number" class="form-control" id="sleep" name="row[sleep]" value="{$row.sleep}" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="maximums" class="control-label col-xs-12 col-sm-2">{:__('Maximums')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="number" class="form-control" id="maximums" name="row[maximums]" value="{$row.maximums}" required="required" size="6" />
+            <input type="number" class="form-control" id="maximums" name="row[maximums]" value="{$row.maximums}" data-rule="required" size="6" />
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="begintime" class="control-label col-xs-12 col-sm-2">{:__('Begin time')}:</label>
+        <div class="col-xs-12 col-sm-4">
+            <input type="text" class="form-control datetimepicker" id="begintime" name="row[begintime]" value="{$row.begintime|datetime}" data-rule="{:__('Begin time')}:required" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="endtime" class="control-label col-xs-12 col-sm-2">{:__('End time')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="text" class="form-control datetimepicker" id="endtime" name="row[endtime]" value="{$row.endtime|datetime}" required="required" size="6" />
+            <input type="text" class="form-control datetimepicker" id="endtime" name="row[endtime]" value="{$row.endtime|datetime}" data-rule="{:__('End time')}:required;match(gte, row[begintime], datetime)" size="6" />
         </div>
     </div>
     <div class="form-group">
         <label for="weigh" class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
         <div class="col-xs-12 col-sm-4">
-            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" required="required" size="6" />
+            <input type="text" class="form-control" id="weigh" name="row[weigh]" value="{$row.weigh}" data-rule="required" size="6" />
         </div>
     </div>
     <div class="form-group">

application/admin/view/page/add.html

@@ -20,7 +20,7 @@
     <div class="form-group">
         <label for="c-flag" class="control-label col-xs-12 col-sm-2">{:__('Flag')}:</label>
         <div class="col-xs-12 col-sm-8">
-            {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], null, ['id'=>'c-flag','class'=>'form-control selectpicker','required'=>''])}
+            {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], null, ['id'=>'c-flag','class'=>'form-control selectpicker','data-rule'=>'required'])}
         </div>
     </div>
     <div class="form-group">

application/admin/view/page/edit.html

@@ -21,7 +21,7 @@
     <div class="form-group">
         <label for="c-flag" class="control-label col-xs-12 col-sm-2">{:__('Flag')}:</label>
         <div class="col-xs-12 col-sm-8">
-            {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], $row['flag'], ['id'=>'c-flag','class'=>'form-control selectpicker','required'=>''])}
+            {:build_select('row[flag]', ['recommend'=>__('Recommend'), 'index'=>__('Index'), 'hot'=>__('Hot')], $row['flag'], ['id'=>'c-flag','class'=>'form-control selectpicker','data-rule'=>'required'])}
         </div>
     </div>
     <div class="form-group">

application/admin/view/wechat/config/add.html

@@ -2,19 +2,19 @@
     <div class="form-group">
         <label for="module" class="control-label col-xs-12 col-sm-2">{:__('Id')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="id" name="row[id]" value="" pattern="[A-Za-z0-9_\.]{3,}" required="required" />
+            <input type="text" class="form-control" id="id" name="row[id]" value="" pattern="[A-Za-z0-9_\.]{3,}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="controller" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="name" name="row[name]" value="" required="required" />
+            <input type="text" class="form-control" id="name" name="row[name]" value="" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="action" class="control-label col-xs-12 col-sm-2">{:__('Value')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <textarea class="form-control" id="value" name="row[value]" required="required"></textarea>
+            <textarea class="form-control" id="value" name="row[value]" data-rule="required"></textarea>
             <a href="javascript:;" class="btn-insertlink">{:__('Insert link')}</a>
         </div>
     </div>

application/admin/view/wechat/config/edit.html

@@ -2,19 +2,19 @@
     <div class="form-group">
         <label for="module" class="control-label col-xs-12 col-sm-2">{:__('Id')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="id" name="row[id]" value="{$row.id}" pattern="[A-Za-z0-9_\.]{3,}" required="required" />
+            <input type="text" class="form-control" id="id" name="row[id]" value="{$row.id}" pattern="[A-Za-z0-9_\.]{3,}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="controller" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="name" name="row[name]" value="{$row.name}" required="required" />
+            <input type="text" class="form-control" id="name" name="row[name]" value="{$row.name}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="action" class="control-label col-xs-12 col-sm-2">{:__('Value')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <textarea class="form-control" id="value" name="row[value]" required="required">{$row.value}</textarea>
+            <textarea class="form-control" id="value" name="row[value]" data-rule="required">{$row.value}</textarea>
             <a href="javascript:;" class="btn-insertlink">{:__('Insert link')}</a>
         </div>
     </div>

application/admin/view/wechat/response/add.html

@@ -2,7 +2,7 @@
     <div class="form-group">
         <label for="module" class="control-label col-xs-12 col-sm-2">{:__('Resource title')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="title" name="row[title]" value="" required="required" />
+            <input type="text" class="form-control" id="title" name="row[title]" value="" data-rule="required" />
         </div>
     </div>
     <div class="form-group">

application/admin/view/wechat/response/edit.html

@@ -3,13 +3,13 @@
     <div class="form-group">
         <label for="module" class="control-label col-xs-12 col-sm-2">{:__('Resource title')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type="text" class="form-control" id="title" name="row[title]" value="{$row.title}" required="required" />
+            <input type="text" class="form-control" id="title" name="row[title]" value="{$row.title}" data-rule="required" />
         </div>
     </div>
     <div class="form-group">
         <label for="controller" class="control-label col-xs-12 col-sm-2">{:__('Event key')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <input type='text' class="form-control" id="eventkey" name="row[eventkey]" value="{$row.eventkey}" pattern="[A-Za-z0-9_]{1,}" required="required" readonly />
+            <input type='text' class="form-control" id="eventkey" name="row[eventkey]" value="{$row.eventkey}" pattern="[A-Za-z0-9_]{1,}" data-rule="required" readonly />
         </div>
     </div>
     <div class="form-group">

public/assets/css/backend.css

@@ -11,6 +11,9 @@
 body {
   background: #f1f4f6;
 }
+body.is-dialog {
+  background: #fff;
+}
 .selection {
   position: absolute;
   border: 1px solid #8B9;

public/assets/js/backend/general/crontab.js

@@ -42,18 +42,14 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
             Table.api.bindevent(table);
         },
         add: function () {
-            Form.api.bindevent($("form[role=form]"));
             Controller.api.bindevent();
         },
         edit: function () {
-            Form.api.bindevent($("form[role=form]"));
             Controller.api.bindevent();
         },
         api: {
             bindevent: function () {
-                $(document).on("click", "#fieldlist .append", function () {
-
-                });
+                Form.api.bindevent($("form[role=form]"));
                 //拖拽排序
                 require(['crontab'], function () {
                     $('#schedulepicker').jqCron({

public/assets/less/backend.less

@@ -33,6 +33,9 @@
 body {
     background:#f1f4f6;
 }
+body.is-dialog {
+    background:#fff;
+}
 
 .selection {
     position: absolute;