WordPress.org
Get WordPress

Plugin Directory

Changeset 1486248


Ignore:
Timestamp:
08/30/2016 09:50:19 AM (9 years ago)
Author:
tranthethang
Message:

fix bug: advance field not working for old themes

Location:
kopatheme/trunk
Files:
3 added
23 edited

Legend:

Unmodified
Added
Removed

  • kopatheme/trunk/assets/css/_image_field.scss

    r1470471 r1486248  
    1 /*
    2  Author     : vutuan.sw
    3 */
    41.kopa-field{
    5     &.kopa-field-image{
    6         &{
    7             position: relative;
    8         }
    9         &.hasimage{
    10             .item-add{
    11                 border: none;
    12             }
    13         }
    14         .item-add{
    15             &{
    16                 display: block;
    17                 height: 102px;
    18                 overflow: hidden;
    19                 position: relative;
    20                 border: 1px dashed rgba(125, 125, 125, 0.4);
    21             }
    222
    23             &:before{
    24                 content: "";
    25                 display: block;
    26                 width: 39px;
    27                 height: 38px;
    28                 background-image: url('../images/empty_row_sprite.png');
    29                 background-position: top center;
    30                 background-repeat: no-repeat;
    31                 cursor: pointer;
    32                 border: none !important;
    33                 position: absolute;
    34                 top: 0px;
    35                 left: 0px;
    36                 right: 0px;
    37                 bottom: 0px;
    38                 margin: auto;
    39             }
    40             &:hover:before{
    41                 background-position: bottom center;
    42             }
     3    &.kopa-field-image-thumb{
     4        width: 150px;       
     5        height: 100px;
     6   
     7        .item-add{
     8            width: 150px;                     
     9      .img{
     10        width: 100%;
     11        height: 100px;
     12        background-repeat: no-repeat;
     13        background-size: contain;
     14        background-position: center center;
     15      }
     16        }       
     17    }
    4318
    44             .img{
    45                 width: 100%;
    46                 height: 100%;
    47                 background-size: cover;
    48                 background-position: center;
    49             }
    50         }
    5119
    52         .item-remove{
    53             display: none;
    54             position: absolute;
    55             top: 1px;
    56             right: 1px;
    57             width: 25px;
    58             height: 25px;
    59             background: url("../images/remove.png") no-repeat;
    60             background-size: 10px;
    61             background-position: center;
    62             display: none;
    63             cursor: pointer;
    64             border: none;
    65         }
     20    &.kopa-field-image-full{
     21        .item-add{     
     22      height: 102px;
     23      .img{
     24        width: 100%;
     25        height: 100%;
     26        background-size: cover;
     27        background-position: center;
     28      }
     29        }
     30    }
    6631
     32  &.kopa-field-image{
     33    &{
     34        position: relative;
     35    }
     36    &.hasimage{
     37            background: url( ../images/transp_bg.png ) repeat center center transparent;   
     38   
     39      .item-add{
     40          border: none;
     41      }
     42    }
     43    .item-add{
     44      &{
     45        display: block;
     46        height: 102px;
     47        overflow: hidden;
     48        position: relative;
     49        border: 1px dashed rgba(125, 125, 125, 0.4);
     50      }
     51
     52      &:before{
     53        content: "";
     54        display: block;
     55        width: 39px;
     56        height: 38px;
     57        background-image: url('../images/empty_row_sprite.png');
     58        background-position: top center;
     59        background-repeat: no-repeat;
     60        cursor: pointer;
     61        border: none !important;
     62        position: absolute;
     63        top: 0px;
     64        left: 0px;
     65        right: 0px;
     66        bottom: 0px;
     67        margin: auto;
     68      }
     69      &:hover:before{
     70        background-position: bottom center;
     71      }
    6772    }
    6873
    69     img{
    70         border:1px solid #d5d5d5;
    71         max-width: 100%;
     74    .item-remove{
     75      display: none;
     76      position: absolute;
     77      top: 1px;
     78      right: 1px;
     79      width: 25px;
     80      height: 25px;
     81      background: url("../images/remove.png") no-repeat;
     82      background-size: 10px;
     83      background-position: center;
     84      display: none;
     85      cursor: pointer;
     86      border: none;
    7287    }
     88  }
    7389
     90  img{
     91    border:1px solid #d5d5d5;
     92    max-width: 100%;
     93  }
    7494
    75     &.hasimage:hover .item-remove{
    76         display: block;
    77     }
    78     &.hasimage .item-add:before{
    79         display: none;
    80     }
    81     &.header_image a img{
    82         height: auto;
    83         position: absolute;
    84     }
     95  &.hasimage:hover .item-remove{
     96    display: block;
     97  }
     98
     99  &.hasimage .item-add:before{
     100    display: none;
     101  }
     102
     103  &.header_image a img{
     104    height: auto;
     105    position: absolute;
     106  }
    85107}
    86108

  • kopatheme/trunk/assets/css/admin.css

    r1471418 r1486248  
    294294  position: absolute;
    295295  right: -1px;
    296   top: 0;
     296  top: 16px;
    297297  display: inline-block;
    298298  width: auto;

  • kopatheme/trunk/assets/css/admin.scss

    r1471418 r1486248  
    287287            position: absolute;
    288288            right: -1px;
    289             top: 0;
     289            top: 16px;
    290290            @extend %form-control;
    291291            display: inline-block;

  • kopatheme/trunk/assets/css/custom-layout.css

    r1471418 r1486248  
    3333  box-sizing: border-box;
    3434}
     35
    3536.kopa_section_group_layout a {
    3637  text-decoration: none;
    3738}
     39
    3840.kopa_section_group_layout a:hover, .kopa_section_group_layout a:focus {
    3941  text-decoration: none;
    4042  outline: none;
    4143}
     44
    4245.kopa_section_group_layout input[type="text"] {
    4346  margin: 0;
    4447}
     48
    4549.kopa_section_group_layout .kopa_section_group {
    4650  position: relative;
    4751}
     52
    4853.kopa_section_group_layout .kopa_controls {
    4954  position: relative;
    5055}
     56
    5157.kopa_section_group_layout .kopa_controls select {
    5258  margin: 0;
    5359  width: 100%;
    5460}
     61
    5562.kopa_section_group_layout .kopa_group_content {
    5663  overflow: hidden;
    5764}
     65
    5866.kopa_section_group_layout .kopa_section_layout_image {
    5967  padding-left: 20px;
    … …  
    6169  width: 65%;
    6270}
     71
    6372.kopa_section_group_layout .kopa_section_layout_image img {
    6473  display: block;
    … …  
    6776  border: 1px solid #d3d7da;
    6877}
     78
    6979.kopa_section_group_layout .kopa_section {
    7080  padding: 15px 20px 20px;
    … …  
    7383  background: #fff;
    7484}
     85
    7586.kopa_section_group_layout .kopa_section_select_layout {
    7687  margin-bottom: 10px;
    7788  margin-top: 0;
    7889}
     90
    7991.kopa_section_group_layout .kopa_section_select_layout, .kopa_section_group_layout .kopa_section_select_area_container {
    8092  float: left;
    8193  width: 35%;
    8294}
     95
    8396.kopa_section_group_layout label {
    8497  margin-bottom: 20px;
    … …  
    8699  display: inline-block;
    87100}
     101
    88102.kopa_section_group_layout .kopa_heading {
    89103  font-size: 14px;
    … …  
    95109  line-height: 1.4;
    96110}
     111
    97112.kopa_section_group_layout .kopa_section_select_area_container, .kopa_section_group_layout .kopa_section_layout_image {
    98113  display: none;

  • kopatheme/trunk/assets/css/widget.css

    r1471418 r1486248  
    1 /*
    2  Author     : vutuan.sw
    3 */
    4 .kopa-field.kopa-field-image {
    5   position: relative;
    6 }
    7 .kopa-field.kopa-field-image.hasimage .item-add {
    8   border: none;
    9 }
    10 .kopa-field.kopa-field-image .item-add {
    11   display: block;
    12   height: 102px;
    13   overflow: hidden;
    14   position: relative;
    15   border: 1px dashed rgba(125, 125, 125, 0.4);
    16 }
    17 .kopa-field.kopa-field-image .item-add:before {
    18   content: "";
    19   display: block;
    20   width: 39px;
    21   height: 38px;
    22   background-image: url("../images/empty_row_sprite.png");
    23   background-position: top center;
    24   background-repeat: no-repeat;
    25   cursor: pointer;
    26   border: none !important;
    27   position: absolute;
    28   top: 0px;
    29   left: 0px;
    30   right: 0px;
    31   bottom: 0px;
    32   margin: auto;
    33 }
    34 .kopa-field.kopa-field-image .item-add:hover:before {
    35   background-position: bottom center;
    36 }
    37 .kopa-field.kopa-field-image .item-add .img {
    38   width: 100%;
    39   height: 100%;
    40   background-size: cover;
    41   background-position: center;
    42 }
    43 .kopa-field.kopa-field-image .item-remove {
    44   display: none;
    45   position: absolute;
    46   top: 1px;
    47   right: 1px;
    48   width: 25px;
    49   height: 25px;
    50   background: url("../images/remove.png") no-repeat;
    51   background-size: 10px;
    52   background-position: center;
    53   display: none;
    54   cursor: pointer;
    55   border: none;
    56 }
    57 .kopa-field img {
    58   border: 1px solid #d5d5d5;
    59   max-width: 100%;
    60 }
    61 .kopa-field.hasimage:hover .item-remove {
    62   display: block;
    63 }
    64 .kopa-field.hasimage .item-add:before {
    65   display: none;
    66 }
    67 .kopa-field.header_image a img {
    68   height: auto;
    69   position: absolute;
    70 }
    71 
    72 .clearfix:before, .clearfix:after {
    73   content: " ";
    74   display: table;
    75 }
    76 
    77 .clearfix:after {
    78   clear: both;
    79 }
    80 
    81 .kopa-widget-block {
    82   margin-top: 12px;
    83   margin-bottom: 12px;
    84 }
    85 
    86 .kopa-widget-desc {
    87   margin-top: 6px;
    88 }
    89 
    90 /* advanced fields */
    911.kopa-row:before, .kopa-row:after {
    922  display: table;
    … …  
    1023933  }
    1024934}
     935.kopa-field.kopa-field-image-thumb {
     936  width: 150px;
     937  height: 100px;
     938}
     939.kopa-field.kopa-field-image-thumb .item-add {
     940  width: 150px;
     941}
     942.kopa-field.kopa-field-image-thumb .item-add .img {
     943  width: 100%;
     944  height: 100px;
     945  background-repeat: no-repeat;
     946  background-size: contain;
     947  background-position: center center;
     948}
     949.kopa-field.kopa-field-image-full .item-add {
     950  height: 102px;
     951}
     952.kopa-field.kopa-field-image-full .item-add .img {
     953  width: 100%;
     954  height: 100%;
     955  background-size: cover;
     956  background-position: center;
     957}
     958.kopa-field.kopa-field-image {
     959  position: relative;
     960}
     961.kopa-field.kopa-field-image.hasimage {
     962  background: url(../images/transp_bg.png) repeat center center transparent;
     963}
     964.kopa-field.kopa-field-image.hasimage .item-add {
     965  border: none;
     966}
     967.kopa-field.kopa-field-image .item-add {
     968  display: block;
     969  height: 102px;
     970  overflow: hidden;
     971  position: relative;
     972  border: 1px dashed rgba(125, 125, 125, 0.4);
     973}
     974.kopa-field.kopa-field-image .item-add:before {
     975  content: "";
     976  display: block;
     977  width: 39px;
     978  height: 38px;
     979  background-image: url("../images/empty_row_sprite.png");
     980  background-position: top center;
     981  background-repeat: no-repeat;
     982  cursor: pointer;
     983  border: none !important;
     984  position: absolute;
     985  top: 0px;
     986  left: 0px;
     987  right: 0px;
     988  bottom: 0px;
     989  margin: auto;
     990}
     991.kopa-field.kopa-field-image .item-add:hover:before {
     992  background-position: bottom center;
     993}
     994.kopa-field.kopa-field-image .item-remove {
     995  display: none;
     996  position: absolute;
     997  top: 1px;
     998  right: 1px;
     999  width: 25px;
     1000  height: 25px;
     1001  background: url("../images/remove.png") no-repeat;
     1002  background-size: 10px;
     1003  background-position: center;
     1004  display: none;
     1005  cursor: pointer;
     1006  border: none;
     1007}
     1008.kopa-field img {
     1009  border: 1px solid #d5d5d5;
     1010  max-width: 100%;
     1011}
     1012.kopa-field.hasimage:hover .item-remove {
     1013  display: block;
     1014}
     1015.kopa-field.hasimage .item-add:before {
     1016  display: none;
     1017}
     1018.kopa-field.header_image a img {
     1019  height: auto;
     1020  position: absolute;
     1021}
     1022
     1023.ui-draggable-handle {
     1024  -ms-touch-action: none;
     1025  touch-action: none;
     1026}
     1027
     1028.ui-helper-hidden {
     1029  display: none;
     1030}
     1031
     1032.ui-helper-hidden-accessible {
     1033  border: 0;
     1034  clip: rect(0 0 0 0);
     1035  height: 1px;
     1036  margin: -1px;
     1037  overflow: hidden;
     1038  padding: 0;
     1039  position: absolute;
     1040  width: 1px;
     1041}
     1042
     1043.ui-helper-reset {
     1044  margin: 0;
     1045  padding: 0;
     1046  border: 0;
     1047  outline: 0;
     1048  line-height: 1.3;
     1049  text-decoration: none;
     1050  font-size: 100%;
     1051  list-style: none;
     1052}
     1053
     1054.ui-helper-clearfix:before,
     1055.ui-helper-clearfix:after {
     1056  content: "";
     1057  display: table;
     1058  border-collapse: collapse;
     1059}
     1060
     1061.ui-helper-clearfix:after {
     1062  clear: both;
     1063}
     1064
     1065.ui-helper-zfix {
     1066  width: 100%;
     1067  height: 100%;
     1068  top: 0;
     1069  left: 0;
     1070  position: absolute;
     1071  opacity: 0;
     1072  filter: Alpha(Opacity=0);
     1073  /* support: IE8 */
     1074}
     1075
     1076.ui-front {
     1077  z-index: 100;
     1078}
     1079
     1080.ui-state-disabled {
     1081  cursor: default !important;
     1082  pointer-events: none;
     1083}
     1084
     1085.ui-icon {
     1086  display: inline-block;
     1087  vertical-align: middle;
     1088  margin-top: -.25em;
     1089  position: relative;
     1090  text-indent: -99999px;
     1091  overflow: hidden;
     1092  background-repeat: no-repeat;
     1093}
     1094
     1095.ui-widget-icon-block {
     1096  left: 50%;
     1097  margin-left: -8px;
     1098  display: block;
     1099}
     1100
     1101.ui-widget-overlay {
     1102  position: fixed;
     1103  top: 0;
     1104  left: 0;
     1105  width: 100%;
     1106  height: 100%;
     1107}
     1108
     1109.ui-resizable {
     1110  position: relative;
     1111}
     1112
     1113.ui-resizable-handle {
     1114  position: absolute;
     1115  font-size: 0.1px;
     1116  display: block;
     1117  -ms-touch-action: none;
     1118  touch-action: none;
     1119}
     1120
     1121.ui-resizable-disabled .ui-resizable-handle,
     1122.ui-resizable-autohide .ui-resizable-handle {
     1123  display: none;
     1124}
     1125
     1126.ui-resizable-n {
     1127  cursor: n-resize;
     1128  height: 7px;
     1129  width: 100%;
     1130  top: -5px;
     1131  left: 0;
     1132}
     1133
     1134.ui-resizable-s {
     1135  cursor: s-resize;
     1136  height: 7px;
     1137  width: 100%;
     1138  bottom: -5px;
     1139  left: 0;
     1140}
     1141
     1142.ui-resizable-e {
     1143  cursor: e-resize;
     1144  width: 7px;
     1145  right: -5px;
     1146  top: 0;
     1147  height: 100%;
     1148}
     1149
     1150.ui-resizable-w {
     1151  cursor: w-resize;
     1152  width: 7px;
     1153  left: -5px;
     1154  top: 0;
     1155  height: 100%;
     1156}
     1157
     1158.ui-resizable-se {
     1159  cursor: se-resize;
     1160  width: 12px;
     1161  height: 12px;
     1162  right: 1px;
     1163  bottom: 1px;
     1164}
     1165
     1166.ui-resizable-sw {
     1167  cursor: sw-resize;
     1168  width: 9px;
     1169  height: 9px;
     1170  left: -5px;
     1171  bottom: -5px;
     1172}
     1173
     1174.ui-resizable-nw {
     1175  cursor: nw-resize;
     1176  width: 9px;
     1177  height: 9px;
     1178  left: -5px;
     1179  top: -5px;
     1180}
     1181
     1182.ui-resizable-ne {
     1183  cursor: ne-resize;
     1184  width: 9px;
     1185  height: 9px;
     1186  right: -5px;
     1187  top: -5px;
     1188}
     1189
     1190.ui-dialog {
     1191  position: absolute;
     1192  top: 0;
     1193  left: 0;
     1194  padding: .2em;
     1195  outline: 0;
     1196}
     1197
     1198.ui-dialog .ui-dialog-titlebar {
     1199  padding: .4em 1em;
     1200  position: relative;
     1201}
     1202
     1203.ui-dialog .ui-dialog-title {
     1204  float: left;
     1205  margin: .1em 0;
     1206  white-space: nowrap;
     1207  overflow: hidden;
     1208  text-overflow: ellipsis;
     1209}
     1210
     1211.ui-dialog .ui-dialog-titlebar-close {
     1212  display: block;
     1213  float: right;
     1214  cursor: pointer;
     1215  border-color: transparent;
     1216  background-color: transparent;
     1217  padding: 0;
     1218}
     1219.ui-dialog .ui-dialog-titlebar-close:hover {
     1220  color: red;
     1221}
     1222
     1223.ui-dialog .ui-dialog-content {
     1224  position: relative;
     1225  border: 0;
     1226  padding: .5em 1em;
     1227  background: none;
     1228  overflow: auto;
     1229}
     1230
     1231.ui-dialog .ui-dialog-buttonpane {
     1232  text-align: left;
     1233  border-top: 1px solid #ddd;
     1234  background-image: none;
     1235  margin-top: 6px;
     1236  padding: 6px;
     1237}
     1238.ui-dialog .ui-dialog-buttonpane .button {
     1239  margin-top: 0;
     1240  margin-bottom: 0;
     1241}
     1242
     1243.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
     1244  float: right;
     1245}
     1246
     1247.ui-dialog .ui-dialog-buttonpane button {
     1248  margin: .5em .4em .5em 0;
     1249  cursor: pointer;
     1250}
     1251
     1252.ui-dialog .ui-resizable-n {
     1253  height: 2px;
     1254  top: 0;
     1255}
     1256
     1257.ui-dialog .ui-resizable-e {
     1258  width: 2px;
     1259  right: 0;
     1260}
     1261
     1262.ui-dialog .ui-resizable-s {
     1263  height: 2px;
     1264  bottom: 0;
     1265}
     1266
     1267.ui-dialog .ui-resizable-w {
     1268  width: 2px;
     1269  left: 0;
     1270}
     1271
     1272.ui-dialog .ui-resizable-se,
     1273.ui-dialog .ui-resizable-sw,
     1274.ui-dialog .ui-resizable-ne,
     1275.ui-dialog .ui-resizable-nw {
     1276  width: 7px;
     1277  height: 7px;
     1278}
     1279
     1280.ui-dialog .ui-resizable-se {
     1281  right: 0;
     1282  bottom: 0;
     1283}
     1284
     1285.ui-dialog .ui-resizable-sw {
     1286  left: 0;
     1287  bottom: 0;
     1288}
     1289
     1290.ui-dialog .ui-resizable-ne {
     1291  right: 0;
     1292  top: 0;
     1293}
     1294
     1295.ui-dialog .ui-resizable-nw {
     1296  left: 0;
     1297  top: 0;
     1298}
     1299
     1300.ui-draggable .ui-dialog-titlebar {
     1301  cursor: move;
     1302}
     1303
     1304.ui-widget .ui-widget {
     1305  font-size: 1em;
     1306}
     1307
     1308.ui-widget input,
     1309.ui-widget select,
     1310.ui-widget textarea,
     1311.ui-widget button {
     1312  font-family: Arial,Helvetica,sans-serif;
     1313  font-size: 1em;
     1314}
     1315
     1316.ui-widget-header {
     1317  background: #e9e9e9;
     1318  color: #333333;
     1319  font-weight: bold;
     1320}
     1321
     1322.ui-widget-header a {
     1323  color: #333333;
     1324}
     1325
     1326.ui-widget-overlay {
     1327  background: #aaaaaa;
     1328  opacity: .3;
     1329  filter: Alpha(Opacity=30);
     1330  z-index: 10000 !important;
     1331}
     1332
     1333.ui-widget-shadow {
     1334  -webkit-box-shadow: 0px 0px 5px #666666;
     1335  box-shadow: 0px 0px 5px #666666;
     1336}
     1337
     1338.ui-widget.ui-dialog {
     1339  background-color: #fff;
     1340}
     1341
     1342.clearfix:before, .clearfix:after {
     1343  content: " ";
     1344  display: table;
     1345}
     1346
     1347.clearfix:after {
     1348  clear: both;
     1349}
     1350
     1351.kopa-widget-block {
     1352  margin-top: 12px;
     1353  margin-bottom: 12px;
     1354}
     1355
     1356.kopa-widget-desc {
     1357  margin-top: 6px;
     1358}
     1359
    10251360.kopa-icon-picker,
    10261361.kopa-icon-picker-preview {
    … …  
    11911526.kopa-metabox-wrapper .kopa_screenshot {
    11921527  display: block;
     1528}
     1529.kopa-metabox-wrapper .kopa_screenshot img {
     1530  display: block;
    11931531  text-align: center;
    1194   background-color: #eee;
     1532  background-color: #fafafa;
    11951533  border: 1px solid #ddd;
    1196   padding: 24px;
    1197 }
    1198 .kopa-metabox-wrapper .kopa_screenshot img {
    1199   max-width: 320px;
     1534  padding: 3px;
     1535  max-width: 300px;
    12001536}
    12011537.kopa-metabox-wrapper .kopa_screenshot .kopa_remove_image {
    12021538  display: none;
    12031539}
    1204 
    1205 .ui-draggable-handle {
    1206   -ms-touch-action: none;
    1207   touch-action: none;
    1208 }
    1209 
    1210 /* Layout helpers
    1211 ----------------------------------*/
    1212 .ui-helper-hidden {
    1213   display: none;
    1214 }
    1215 
    1216 .ui-helper-hidden-accessible {
    1217   border: 0;
    1218   clip: rect(0 0 0 0);
    1219   height: 1px;
    1220   margin: -1px;
    1221   overflow: hidden;
    1222   padding: 0;
    1223   position: absolute;
    1224   width: 1px;
    1225 }
    1226 
    1227 .ui-helper-reset {
    1228   margin: 0;
    1229   padding: 0;
    1230   border: 0;
    1231   outline: 0;
    1232   line-height: 1.3;
    1233   text-decoration: none;
    1234   font-size: 100%;
    1235   list-style: none;
    1236 }
    1237 
    1238 .ui-helper-clearfix:before,
    1239 .ui-helper-clearfix:after {
    1240   content: "";
    1241   display: table;
    1242   border-collapse: collapse;
    1243 }
    1244 
    1245 .ui-helper-clearfix:after {
    1246   clear: both;
    1247 }
    1248 
    1249 .ui-helper-zfix {
    1250   width: 100%;
    1251   height: 100%;
    1252   top: 0;
    1253   left: 0;
    1254   position: absolute;
    1255   opacity: 0;
    1256   filter: Alpha(Opacity=0);
    1257   /* support: IE8 */
    1258 }
    1259 
    1260 .ui-front {
    1261   z-index: 100;
    1262 }
    1263 
    1264 /* Interaction Cues
    1265 ----------------------------------*/
    1266 .ui-state-disabled {
    1267   cursor: default !important;
    1268   pointer-events: none;
    1269 }
    1270 
    1271 /* Icons
    1272 ----------------------------------*/
    1273 .ui-icon {
    1274   display: inline-block;
    1275   vertical-align: middle;
    1276   margin-top: -.25em;
    1277   position: relative;
    1278   text-indent: -99999px;
    1279   overflow: hidden;
    1280   background-repeat: no-repeat;
    1281 }
    1282 
    1283 .ui-widget-icon-block {
    1284   left: 50%;
    1285   margin-left: -8px;
    1286   display: block;
    1287 }
    1288 
    1289 /* Misc visuals
    1290 ----------------------------------*/
    1291 /* Overlays */
    1292 .ui-widget-overlay {
    1293   position: fixed;
    1294   top: 0;
    1295   left: 0;
    1296   width: 100%;
    1297   height: 100%;
    1298 }
    1299 
    1300 .ui-resizable {
    1301   position: relative;
    1302 }
    1303 
    1304 .ui-resizable-handle {
    1305   position: absolute;
    1306   font-size: 0.1px;
    1307   display: block;
    1308   -ms-touch-action: none;
    1309   touch-action: none;
    1310 }
    1311 
    1312 .ui-resizable-disabled .ui-resizable-handle,
    1313 .ui-resizable-autohide .ui-resizable-handle {
    1314   display: none;
    1315 }
    1316 
    1317 .ui-resizable-n {
    1318   cursor: n-resize;
    1319   height: 7px;
    1320   width: 100%;
    1321   top: -5px;
    1322   left: 0;
    1323 }
    1324 
    1325 .ui-resizable-s {
    1326   cursor: s-resize;
    1327   height: 7px;
    1328   width: 100%;
    1329   bottom: -5px;
    1330   left: 0;
    1331 }
    1332 
    1333 .ui-resizable-e {
    1334   cursor: e-resize;
    1335   width: 7px;
    1336   right: -5px;
    1337   top: 0;
    1338   height: 100%;
    1339 }
    1340 
    1341 .ui-resizable-w {
    1342   cursor: w-resize;
    1343   width: 7px;
    1344   left: -5px;
    1345   top: 0;
    1346   height: 100%;
    1347 }
    1348 
    1349 .ui-resizable-se {
    1350   cursor: se-resize;
    1351   width: 12px;
    1352   height: 12px;
    1353   right: 1px;
    1354   bottom: 1px;
    1355 }
    1356 
    1357 .ui-resizable-sw {
    1358   cursor: sw-resize;
    1359   width: 9px;
    1360   height: 9px;
    1361   left: -5px;
    1362   bottom: -5px;
    1363 }
    1364 
    1365 .ui-resizable-nw {
    1366   cursor: nw-resize;
    1367   width: 9px;
    1368   height: 9px;
    1369   left: -5px;
    1370   top: -5px;
    1371 }
    1372 
    1373 .ui-resizable-ne {
    1374   cursor: ne-resize;
    1375   width: 9px;
    1376   height: 9px;
    1377   right: -5px;
    1378   top: -5px;
    1379 }
    1380 
    1381 .ui-controlgroup {
    1382   vertical-align: middle;
    1383   display: inline-block;
    1384 }
    1385 
    1386 .ui-controlgroup > .ui-controlgroup-item {
    1387   float: left;
    1388   margin-left: 0;
    1389   margin-right: 0;
    1390 }
    1391 
    1392 .ui-controlgroup > .ui-controlgroup-item:focus,
    1393 .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
    1394   z-index: 9999;
    1395 }
    1396 
    1397 .ui-controlgroup-vertical > .ui-controlgroup-item {
    1398   display: block;
    1399   float: none;
    1400   width: 100%;
    1401   margin-top: 0;
    1402   margin-bottom: 0;
    1403   text-align: left;
    1404 }
    1405 
    1406 .ui-controlgroup-vertical .ui-controlgroup-item {
    1407   box-sizing: border-box;
    1408 }
    1409 
    1410 .ui-controlgroup .ui-controlgroup-label {
    1411   padding: .4em 1em;
    1412 }
    1413 
    1414 .ui-controlgroup .ui-controlgroup-label span {
    1415   font-size: 80%;
    1416 }
    1417 
    1418 .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
    1419   border-left: none;
    1420 }
    1421 
    1422 .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
    1423   border-top: none;
    1424 }
    1425 
    1426 .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
    1427   border-right: none;
    1428 }
    1429 
    1430 .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
    1431   border-bottom: none;
    1432 }
    1433 
    1434 /* Spinner specific style fixes */
    1435 .ui-controlgroup-vertical .ui-spinner-input {
    1436   /* Support: IE8 only, Android < 4.4 only */
    1437   width: 75%;
    1438   width: calc(100% - 2.4em );
    1439 }
    1440 
    1441 .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    1442   border-top-style: solid;
    1443 }
    1444 
    1445 .ui-checkboxradio-label .ui-icon-background {
    1446   box-shadow: inset 1px 1px 1px #ccc;
    1447   border-radius: .12em;
    1448   border: none;
    1449 }
    1450 
    1451 .ui-checkboxradio-radio-label .ui-icon-background {
    1452   width: 16px;
    1453   height: 16px;
    1454   border-radius: 1em;
    1455   overflow: visible;
    1456   border: none;
    1457 }
    1458 
    1459 .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
    1460 .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    1461   background-image: none;
    1462   width: 8px;
    1463   height: 8px;
    1464   border-width: 4px;
    1465   border-style: solid;
    1466 }
    1467 
    1468 .ui-checkboxradio-disabled {
    1469   pointer-events: none;
    1470 }
    1471 
    1472 .ui-dialog {
    1473   position: absolute;
    1474   top: 0;
    1475   left: 0;
    1476   padding: .2em;
    1477   outline: 0;
    1478 }
    1479 
    1480 .ui-dialog .ui-dialog-titlebar {
    1481   padding: .4em 1em;
    1482   position: relative;
    1483 }
    1484 
    1485 .ui-dialog .ui-dialog-title {
    1486   float: left;
    1487   margin: .1em 0;
    1488   white-space: nowrap;
    1489   overflow: hidden;
    1490   text-overflow: ellipsis;
    1491 }
    1492 
    1493 .ui-dialog .ui-dialog-titlebar-close {
    1494   display: block;
    1495   float: right;
    1496   cursor: pointer;
    1497   border-color: transparent;
    1498   background-color: transparent;
    1499   padding: 0;
    1500 }
    1501 .ui-dialog .ui-dialog-titlebar-close:hover {
    1502   color: red;
    1503 }
    1504 
    1505 .ui-dialog .ui-dialog-content {
    1506   position: relative;
    1507   border: 0;
    1508   padding: .5em 1em;
    1509   background: none;
    1510   overflow: auto;
    1511 }
    1512 
    1513 .ui-dialog .ui-dialog-buttonpane {
    1514   text-align: left;
    1515   border-width: 1px 0 0 0;
    1516   background-image: none;
    1517   margin-top: .5em;
    1518   padding: .3em 1em .5em .4em;
    1519 }
    1520 
    1521 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    1522   float: right;
    1523 }
    1524 
    1525 .ui-dialog .ui-dialog-buttonpane button {
    1526   margin: .5em .4em .5em 0;
    1527   cursor: pointer;
    1528 }
    1529 
    1530 .ui-dialog .ui-resizable-n {
    1531   height: 2px;
    1532   top: 0;
    1533 }
    1534 
    1535 .ui-dialog .ui-resizable-e {
    1536   width: 2px;
    1537   right: 0;
    1538 }
    1539 
    1540 .ui-dialog .ui-resizable-s {
    1541   height: 2px;
    1542   bottom: 0;
    1543 }
    1544 
    1545 .ui-dialog .ui-resizable-w {
    1546   width: 2px;
    1547   left: 0;
    1548 }
    1549 
    1550 .ui-dialog .ui-resizable-se,
    1551 .ui-dialog .ui-resizable-sw,
    1552 .ui-dialog .ui-resizable-ne,
    1553 .ui-dialog .ui-resizable-nw {
    1554   width: 7px;
    1555   height: 7px;
    1556 }
    1557 
    1558 .ui-dialog .ui-resizable-se {
    1559   right: 0;
    1560   bottom: 0;
    1561 }
    1562 
    1563 .ui-dialog .ui-resizable-sw {
    1564   left: 0;
    1565   bottom: 0;
    1566 }
    1567 
    1568 .ui-dialog .ui-resizable-ne {
    1569   right: 0;
    1570   top: 0;
    1571 }
    1572 
    1573 .ui-dialog .ui-resizable-nw {
    1574   left: 0;
    1575   top: 0;
    1576 }
    1577 
    1578 .ui-draggable .ui-dialog-titlebar {
    1579   cursor: move;
    1580 }
    1581 
    1582 /* Component containers
    1583 ----------------------------------*/
    1584 .ui-widget {
    1585   font-family: Arial,Helvetica,sans-serif;
    1586   font-size: 1em;
    1587 }
    1588 
    1589 .ui-widget .ui-widget {
    1590   font-size: 1em;
    1591 }
    1592 
    1593 .ui-widget input,
    1594 .ui-widget select,
    1595 .ui-widget textarea,
    1596 .ui-widget button {
    1597   font-family: Arial,Helvetica,sans-serif;
    1598   font-size: 1em;
    1599 }
    1600 
    1601 .ui-widget.ui-widget-content {
    1602   border: 1px solid #c5c5c5;
    1603 }
    1604 
    1605 .ui-widget-content {
    1606   border: 1px solid #dddddd;
    1607   background: #ffffff;
    1608   color: #333333;
    1609 }
    1610 
    1611 .ui-widget-content a {
    1612   color: #333333;
    1613 }
    1614 
    1615 .ui-widget-header {
    1616   border: 1px solid #dddddd;
    1617   background: #e9e9e9;
    1618   color: #333333;
    1619   font-weight: bold;
    1620 }
    1621 
    1622 .ui-widget-header a {
    1623   color: #333333;
    1624 }
    1625 
    1626 /* Interaction states
    1627 ----------------------------------*/
    1628 /* Overlays */
    1629 .ui-widget-overlay {
    1630   background: #aaaaaa;
    1631   opacity: .3;
    1632   filter: Alpha(Opacity=30);
    1633   /* support: IE8 */
    1634 }
    1635 
    1636 .ui-widget-shadow {
    1637   -webkit-box-shadow: 0px 0px 5px #666666;
    1638   box-shadow: 0px 0px 5px #666666;
    1639 }

  • kopatheme/trunk/assets/css/widget.scss

    r1471418 r1486248  
     1@import 'grid';
    12@import 'image_field';
     3@import 'jquery_ui';
    24
    35.clearfix:before, .clearfix:after {
    … …  
    1719}
    1820
    19 /* advanced fields */
    20 .kopa-row:before, .kopa-row:after {
    21     display: table;
    22     content: " ";
    23 }
    24 .kopa-row:after {
    25     clear: both;
    26 }
    27 .kopa-row, .kopa-row *, .kopa-row:before, .kopa-row:after {
    28     -webkit-box-sizing: border-box;
    29     -moz-box-sizing: border-box;
    30     box-sizing: border-box;
    31 }
    32 .kopa-col-xs-1,
    33 .kopa-col-sm-1,
    34 .kopa-col-md-1,
    35 .kopa-col-lg-1,
    36 .kopa-col-xs-2,
    37 .kopa-col-sm-2,
    38 .kopa-col-md-2,
    39 .kopa-col-lg-2,
    40 .kopa-col-xs-3,
    41 .kopa-col-sm-3,
    42 .kopa-col-md-3,
    43 .kopa-col-lg-3,
    44 .kopa-col-xs-4,
    45 .kopa-col-sm-4,
    46 .kopa-col-md-4,
    47 .kopa-col-lg-4,
    48 .kopa-col-xs-5,
    49 .kopa-col-sm-5,
    50 .kopa-col-md-5,
    51 .kopa-col-lg-5,
    52 .kopa-col-xs-6,
    53 .kopa-col-sm-6,
    54 .kopa-col-md-6,
    55 .kopa-col-lg-6,
    56 .kopa-col-xs-7,
    57 .kopa-col-sm-7,
    58 .kopa-col-md-7,
    59 .kopa-col-lg-7,
    60 .kopa-col-xs-8,
    61 .kopa-col-sm-8,
    62 .kopa-col-md-8,
    63 .kopa-col-lg-8,
    64 .kopa-col-xs-9,
    65 .kopa-col-sm-9,
    66 .kopa-col-md-9,
    67 .kopa-col-lg-9,
    68 .kopa-col-xs-10,
    69 .kopa-col-sm-10,
    70 .kopa-col-md-10,
    71 .kopa-col-lg-10,
    72 .kopa-col-xs-11,
    73 .kopa-col-sm-11,
    74 .kopa-col-md-11,
    75 .kopa-col-lg-11,
    76 .kopa-col-xs-12,
    77 .kopa-col-sm-12,
    78 .kopa-col-md-12,
    79 .kopa-col-lg-12 {
    80     float: left !important;
    81     position: relative;
    82     min-height: 1px;
    83     padding-right: 15px;
    84     padding-left: 15px;
    85 }
    86 
    87 .kopa-col-xs-12 {
    88     width: 100%;
    89 }
    90 
    91 .kopa-col-xs-11 {
    92     width: 91.66666666666666%;
    93 }
    94 
    95 .kopa-col-xs-10 {
    96     width: 83.33333333333334%;
    97 }
    98 
    99 .kopa-col-xs-9 {
    100     width: 75%;
    101 }
    102 
    103 .kopa-col-xs-8 {
    104     width: 66.66666666666666%;
    105 }
    106 
    107 .kopa-col-xs-7 {
    108     width: 58.333333333333336%;
    109 }
    110 
    111 .kopa-col-xs-6 {
    112     width: 50%;
    113 }
    114 
    115 .kopa-col-xs-5 {
    116     width: 41.66666666666667%;
    117 }
    118 
    119 .kopa-col-xs-4 {
    120     width: 33.33333333333333%;
    121 }
    122 
    123 .kopa-col-xs-3 {
    124     width: 25%;
    125 }
    126 
    127 .kopa-col-xs-2 {
    128     width: 16.666666666666664%;
    129 }
    130 
    131 .kopa-col-xs-1 {
    132     width: 8.333333333333332%;
    133 }
    134 
    135 .kopa-col-xs-pull-12 {
    136     right: 100%;
    137 }
    138 
    139 .kopa-col-xs-pull-11 {
    140     right: 91.66666666666666%;
    141 }
    142 
    143 .kopa-col-xs-pull-10 {
    144     right: 83.33333333333334%;
    145 }
    146 
    147 .kopa-col-xs-pull-9 {
    148     right: 75%;
    149 }
    150 
    151 .kopa-col-xs-pull-8 {
    152     right: 66.66666666666666%;
    153 }
    154 
    155 .kopa-col-xs-pull-7 {
    156     right: 58.333333333333336%;
    157 }
    158 
    159 .kopa-col-xs-pull-6 {
    160     right: 50%;
    161 }
    162 
    163 .kopa-col-xs-pull-5 {
    164     right: 41.66666666666667%;
    165 }
    166 
    167 .kopa-col-xs-pull-4 {
    168     right: 33.33333333333333%;
    169 }
    170 
    171 .kopa-col-xs-pull-3 {
    172     right: 25%;
    173 }
    174 
    175 .kopa-col-xs-pull-2 {
    176     right: 16.666666666666664%;
    177 }
    178 
    179 .kopa-col-xs-pull-1 {
    180     right: 8.333333333333332%;
    181 }
    182 
    183 .kopa-col-xs-pull-0 {
    184     right: 0;
    185 }
    186 
    187 .kopa-col-xs-push-12 {
    188     left: 100%;
    189 }
    190 
    191 .kopa-col-xs-push-11 {
    192     left: 91.66666666666666%;
    193 }
    194 
    195 .kopa-col-xs-push-10 {
    196     left: 83.33333333333334%;
    197 }
    198 
    199 .kopa-col-xs-push-9 {
    200     left: 75%;
    201 }
    202 
    203 .kopa-col-xs-push-8 {
    204     left: 66.66666666666666%;
    205 }
    206 
    207 .kopa-col-xs-push-7 {
    208     left: 58.333333333333336%;
    209 }
    210 
    211 .kopa-col-xs-push-6 {
    212     left: 50%;
    213 }
    214 
    215 .kopa-col-xs-push-5 {
    216     left: 41.66666666666667%;
    217 }
    218 
    219 .kopa-col-xs-push-4 {
    220     left: 33.33333333333333%;
    221 }
    222 
    223 .kopa-col-xs-push-3 {
    224     left: 25%;
    225 }
    226 
    227 .kopa-col-xs-push-2 {
    228     left: 16.666666666666664%;
    229 }
    230 
    231 .kopa-col-xs-push-1 {
    232     left: 8.333333333333332%;
    233 }
    234 
    235 .kopa-col-xs-push-0 {
    236     left: 0;
    237 }
    238 
    239 .kopa-col-xs-offset-12 {
    240     margin-left: 100%;
    241 }
    242 
    243 .kopa-col-xs-offset-11 {
    244     margin-left: 91.66666666666666%;
    245 }
    246 
    247 .kopa-col-xs-offset-10 {
    248     margin-left: 83.33333333333334%;
    249 }
    250 
    251 .kopa-col-xs-offset-9 {
    252     margin-left: 75%;
    253 }
    254 
    255 .kopa-col-xs-offset-8 {
    256     margin-left: 66.66666666666666%;
    257 }
    258 
    259 .kopa-col-xs-offset-7 {
    260     margin-left: 58.333333333333336%;
    261 }
    262 
    263 .kopa-col-xs-offset-6 {
    264     margin-left: 50%;
    265 }
    266 
    267 .kopa-col-xs-offset-5 {
    268     margin-left: 41.66666666666667%;
    269 }
    270 
    271 .kopa-col-xs-offset-4 {
    272     margin-left: 33.33333333333333%;
    273 }
    274 
    275 .kopa-col-xs-offset-3 {
    276     margin-left: 25%;
    277 }
    278 
    279 .kopa-col-xs-offset-2 {
    280     margin-left: 16.666666666666664%;
    281 }
    282 
    283 .kopa-col-xs-offset-1 {
    284     margin-left: 8.333333333333332%;
    285 }
    286 
    287 .kopa-col-xs-offset-0 {
    288     margin-left: 0;
    289 }
    290 
    291 @media (min-width: 768px) {
    292     .kopa-col-sm-1,
    293     .kopa-col-sm-2,
    294     .kopa-col-sm-3,
    295     .kopa-col-sm-4,
    296     .kopa-col-sm-5,
    297     .kopa-col-sm-6,
    298     .kopa-col-sm-7,
    299     .kopa-col-sm-8,
    300     .kopa-col-sm-9,
    301     .kopa-col-sm-10,
    302     .kopa-col-sm-11,
    303     .kopa-col-sm-12 {
    304         float: left;
    305     }
    306 
    307     .kopa-col-sm-12 {
    308         width: 100%;
    309     }
    310 
    311     .kopa-col-sm-11 {
    312         width: 91.66666666666666%;
    313     }
    314 
    315     .kopa-col-sm-10 {
    316         width: 83.33333333333334%;
    317     }
    318 
    319     .kopa-col-sm-9 {
    320         width: 75%;
    321     }
    322 
    323     .kopa-col-sm-8 {
    324         width: 66.66666666666666%;
    325     }
    326 
    327     .kopa-col-sm-7 {
    328         width: 58.333333333333336%;
    329     }
    330 
    331     .kopa-col-sm-6 {
    332         width: 50%;
    333     }
    334 
    335     .kopa-col-sm-5 {
    336         width: 41.66666666666667%;
    337     }
    338 
    339     .kopa-col-sm-4 {
    340         width: 33.33333333333333%;
    341     }
    342 
    343     .kopa-col-sm-3 {
    344         width: 25%;
    345     }
    346 
    347     .kopa-col-sm-2 {
    348         width: 16.666666666666664%;
    349     }
    350 
    351     .kopa-col-sm-1 {
    352         width: 8.333333333333332%;
    353     }
    354 
    355     .kopa-col-sm-pull-12 {
    356         right: 100%;
    357     }
    358 
    359     .kopa-col-sm-pull-11 {
    360         right: 91.66666666666666%;
    361     }
    362 
    363     .kopa-col-sm-pull-10 {
    364         right: 83.33333333333334%;
    365     }
    366 
    367     .kopa-col-sm-pull-9 {
    368         right: 75%;
    369     }
    370 
    371     .kopa-col-sm-pull-8 {
    372         right: 66.66666666666666%;
    373     }
    374 
    375     .kopa-col-sm-pull-7 {
    376         right: 58.333333333333336%;
    377     }
    378 
    379     .kopa-col-sm-pull-6 {
    380         right: 50%;
    381     }
    382 
    383     .kopa-col-sm-pull-5 {
    384         right: 41.66666666666667%;
    385     }
    386 
    387     .kopa-col-sm-pull-4 {
    388         right: 33.33333333333333%;
    389     }
    390 
    391     .kopa-col-sm-pull-3 {
    392         right: 25%;
    393     }
    394 
    395     .kopa-col-sm-pull-2 {
    396         right: 16.666666666666664%;
    397     }
    398 
    399     .kopa-col-sm-pull-1 {
    400         right: 8.333333333333332%;
    401     }
    402 
    403     .kopa-col-sm-pull-0 {
    404         right: 0;
    405     }
    406 
    407     .kopa-col-sm-push-12 {
    408         left: 100%;
    409     }
    410 
    411     .kopa-col-sm-push-11 {
    412         left: 91.66666666666666%;
    413     }
    414 
    415     .kopa-col-sm-push-10 {
    416         left: 83.33333333333334%;
    417     }
    418 
    419     .kopa-col-sm-push-9 {
    420         left: 75%;
    421     }
    422 
    423     .kopa-col-sm-push-8 {
    424         left: 66.66666666666666%;
    425     }
    426 
    427     .kopa-col-sm-push-7 {
    428         left: 58.333333333333336%;
    429     }
    430 
    431     .kopa-col-sm-push-6 {
    432         left: 50%;
    433     }
    434 
    435     .kopa-col-sm-push-5 {
    436         left: 41.66666666666667%;
    437     }
    438 
    439     .kopa-col-sm-push-4 {
    440         left: 33.33333333333333%;
    441     }
    442 
    443     .kopa-col-sm-push-3 {
    444         left: 25%;
    445     }
    446 
    447     .kopa-col-sm-push-2 {
    448         left: 16.666666666666664%;
    449     }
    450 
    451     .kopa-col-sm-push-1 {
    452         left: 8.333333333333332%;
    453     }
    454 
    455     .kopa-col-sm-push-0 {
    456         left: 0;
    457     }
    458 
    459     .kopa-col-sm-offset-12 {
    460         margin-left: 100%;
    461     }
    462 
    463     .kopa-col-sm-offset-11 {
    464         margin-left: 91.66666666666666%;
    465     }
    466 
    467     .kopa-col-sm-offset-10 {
    468         margin-left: 83.33333333333334%;
    469     }
    470 
    471     .kopa-col-sm-offset-9 {
    472         margin-left: 75%;
    473     }
    474 
    475     .kopa-col-sm-offset-8 {
    476         margin-left: 66.66666666666666%;
    477     }
    478 
    479     .kopa-col-sm-offset-7 {
    480         margin-left: 58.333333333333336%;
    481     }
    482 
    483     .kopa-col-sm-offset-6 {
    484         margin-left: 50%;
    485     }
    486 
    487     .kopa-col-sm-offset-5 {
    488         margin-left: 41.66666666666667%;
    489     }
    490 
    491     .kopa-col-sm-offset-4 {
    492         margin-left: 33.33333333333333%;
    493     }
    494 
    495     .kopa-col-sm-offset-3 {
    496         margin-left: 25%;
    497     }
    498 
    499     .kopa-col-sm-offset-2 {
    500         margin-left: 16.666666666666664%;
    501     }
    502 
    503     .kopa-col-sm-offset-1 {
    504         margin-left: 8.333333333333332%;
    505     }
    506 
    507     .kopa-col-sm-offset-0 {
    508         margin-left: 0;
    509     }
    510 }
    511 @media (min-width: 992px) {
    512     .kopa-col-md-1,
    513     .kopa-col-md-2,
    514     .kopa-col-md-3,
    515     .kopa-col-md-4,
    516     .kopa-col-md-5,
    517     .kopa-col-md-6,
    518     .kopa-col-md-7,
    519     .kopa-col-md-8,
    520     .kopa-col-md-9,
    521     .kopa-col-md-10,
    522     .kopa-col-md-11,
    523     .kopa-col-md-12 {
    524         float: left;
    525     }
    526 
    527     .kopa-col-md-12 {
    528         width: 100%;
    529     }
    530 
    531     .kopa-col-md-11 {
    532         width: 91.66666666666666%;
    533     }
    534 
    535     .kopa-col-md-10 {
    536         width: 83.33333333333334%;
    537     }
    538 
    539     .kopa-col-md-9 {
    540         width: 75%;
    541     }
    542 
    543     .kopa-col-md-8 {
    544         width: 66.66666666666666%;
    545     }
    546 
    547     .kopa-col-md-7 {
    548         width: 58.333333333333336%;
    549     }
    550 
    551     .kopa-col-md-6 {
    552         width: 50%;
    553     }
    554 
    555     .kopa-col-md-5 {
    556         width: 41.66666666666667%;
    557     }
    558 
    559     .kopa-col-md-4 {
    560         width: 33.33333333333333%;
    561     }
    562 
    563     .kopa-col-md-3 {
    564         width: 25%;
    565     }
    566 
    567     .kopa-col-md-2 {
    568         width: 16.666666666666664%;
    569     }
    570 
    571     .kopa-col-md-1 {
    572         width: 8.333333333333332%;
    573     }
    574 
    575     .kopa-col-md-pull-12 {
    576         right: 100%;
    577     }
    578 
    579     .kopa-col-md-pull-11 {
    580         right: 91.66666666666666%;
    581     }
    582 
    583     .kopa-col-md-pull-10 {
    584         right: 83.33333333333334%;
    585     }
    586 
    587     .kopa-col-md-pull-9 {
    588         right: 75%;
    589     }
    590 
    591     .kopa-col-md-pull-8 {
    592         right: 66.66666666666666%;
    593     }
    594 
    595     .kopa-col-md-pull-7 {
    596         right: 58.333333333333336%;
    597     }
    598 
    599     .kopa-col-md-pull-6 {
    600         right: 50%;
    601     }
    602 
    603     .kopa-col-md-pull-5 {
    604         right: 41.66666666666667%;
    605     }
    606 
    607     .kopa-col-md-pull-4 {
    608         right: 33.33333333333333%;
    609     }
    610 
    611     .kopa-col-md-pull-3 {
    612         right: 25%;
    613     }
    614 
    615     .kopa-col-md-pull-2 {
    616         right: 16.666666666666664%;
    617     }
    618 
    619     .kopa-col-md-pull-1 {
    620         right: 8.333333333333332%;
    621     }
    622 
    623     .kopa-col-md-pull-0 {
    624         right: 0;
    625     }
    626 
    627     .kopa-col-md-push-12 {
    628         left: 100%;
    629     }
    630 
    631     .kopa-col-md-push-11 {
    632         left: 91.66666666666666%;
    633     }
    634 
    635     .kopa-col-md-push-10 {
    636         left: 83.33333333333334%;
    637     }
    638 
    639     .kopa-col-md-push-9 {
    640         left: 75%;
    641     }
    642 
    643     .kopa-col-md-push-8 {
    644         left: 66.66666666666666%;
    645     }
    646 
    647     .kopa-col-md-push-7 {
    648         left: 58.333333333333336%;
    649     }
    650 
    651     .kopa-col-md-push-6 {
    652         left: 50%;
    653     }
    654 
    655     .kopa-col-md-push-5 {
    656         left: 41.66666666666667%;
    657     }
    658 
    659     .kopa-col-md-push-4 {
    660         left: 33.33333333333333%;
    661     }
    662 
    663     .kopa-col-md-push-3 {
    664         left: 25%;
    665     }
    666 
    667     .kopa-col-md-push-2 {
    668         left: 16.666666666666664%;
    669     }
    670 
    671     .kopa-col-md-push-1 {
    672         left: 8.333333333333332%;
    673     }
    674 
    675     .kopa-col-md-push-0 {
    676         left: 0;
    677     }
    678 
    679     .kopa-col-md-offset-12 {
    680         margin-left: 100%;
    681     }
    682 
    683     .kopa-col-md-offset-11 {
    684         margin-left: 91.66666666666666%;
    685     }
    686 
    687     .kopa-col-md-offset-10 {
    688         margin-left: 83.33333333333334%;
    689     }
    690 
    691     .kopa-col-md-offset-9 {
    692         margin-left: 75%;
    693     }
    694 
    695     .kopa-col-md-offset-8 {
    696         margin-left: 66.66666666666666%;
    697     }
    698 
    699     .kopa-col-md-offset-7 {
    700         margin-left: 58.333333333333336%;
    701     }
    702 
    703     .kopa-col-md-offset-6 {
    704         margin-left: 50%;
    705     }
    706 
    707     .kopa-col-md-offset-5 {
    708         margin-left: 41.66666666666667%;
    709     }
    710 
    711     .kopa-col-md-offset-4 {
    712         margin-left: 33.33333333333333%;
    713     }
    714 
    715     .kopa-col-md-offset-3 {
    716         margin-left: 25%;
    717     }
    718 
    719     .kopa-col-md-offset-2 {
    720         margin-left: 16.666666666666664%;
    721     }
    722 
    723     .kopa-col-md-offset-1 {
    724         margin-left: 8.333333333333332%;
    725     }
    726 
    727     .kopa-col-md-offset-0 {
    728         margin-left: 0;
    729     }
    730 }
    731 @media (min-width: 1200px) {
    732     .kopa-col-lg-1,
    733     .kopa-col-lg-2,
    734     .kopa-col-lg-3,
    735     .kopa-col-lg-4,
    736     .kopa-col-lg-5,
    737     .kopa-col-lg-6,
    738     .kopa-col-lg-7,
    739     .kopa-col-lg-8,
    740     .kopa-col-lg-9,
    741     .kopa-col-lg-10,
    742     .kopa-col-lg-11,
    743     .kopa-col-lg-12 {
    744         float: left;
    745     }
    746 
    747     .kopa-col-lg-12 {
    748         width: 100%;
    749     }
    750 
    751     .kopa-col-lg-11 {
    752         width: 91.66666666666666%;
    753     }
    754 
    755     .kopa-col-lg-10 {
    756         width: 83.33333333333334%;
    757     }
    758 
    759     .kopa-col-lg-9 {
    760         width: 75%;
    761     }
    762 
    763     .kopa-col-lg-8 {
    764         width: 66.66666666666666%;
    765     }
    766 
    767     .kopa-col-lg-7 {
    768         width: 58.333333333333336%;
    769     }
    770 
    771     .kopa-col-lg-6 {
    772         width: 50%;
    773     }
    774 
    775     .kopa-col-lg-5 {
    776         width: 41.66666666666667%;
    777     }
    778 
    779     .kopa-col-lg-4 {
    780         width: 33.33333333333333%;
    781     }
    782 
    783     .kopa-col-lg-3 {
    784         width: 25%;
    785     }
    786 
    787     .kopa-col-lg-2 {
    788         width: 16.666666666666664%;
    789     }
    790 
    791     .kopa-col-lg-1 {
    792         width: 8.333333333333332%;
    793     }
    794 
    795     .kopa-col-lg-pull-12 {
    796         right: 100%;
    797     }
    798 
    799     .kopa-col-lg-pull-11 {
    800         right: 91.66666666666666%;
    801     }
    802 
    803     .kopa-col-lg-pull-10 {
    804         right: 83.33333333333334%;
    805     }
    806 
    807     .kopa-col-lg-pull-9 {
    808         right: 75%;
    809     }
    810 
    811     .kopa-col-lg-pull-8 {
    812         right: 66.66666666666666%;
    813     }
    814 
    815     .kopa-col-lg-pull-7 {
    816         right: 58.333333333333336%;
    817     }
    818 
    819     .kopa-col-lg-pull-6 {
    820         right: 50%;
    821     }
    822 
    823     .kopa-col-lg-pull-5 {
    824         right: 41.66666666666667%;
    825     }
    826 
    827     .kopa-col-lg-pull-4 {
    828         right: 33.33333333333333%;
    829     }
    830 
    831     .kopa-col-lg-pull-3 {
    832         right: 25%;
    833     }
    834 
    835     .kopa-col-lg-pull-2 {
    836         right: 16.666666666666664%;
    837     }
    838 
    839     .kopa-col-lg-pull-1 {
    840         right: 8.333333333333332%;
    841     }
    842 
    843     .kopa-col-lg-pull-0 {
    844         right: 0;
    845     }
    846 
    847     .kopa-col-lg-push-12 {
    848         left: 100%;
    849     }
    850 
    851     .kopa-col-lg-push-11 {
    852         left: 91.66666666666666%;
    853     }
    854 
    855     .kopa-col-lg-push-10 {
    856         left: 83.33333333333334%;
    857     }
    858 
    859     .kopa-col-lg-push-9 {
    860         left: 75%;
    861     }
    862 
    863     .kopa-col-lg-push-8 {
    864         left: 66.66666666666666%;
    865     }
    866 
    867     .kopa-col-lg-push-7 {
    868         left: 58.333333333333336%;
    869     }
    870 
    871     .kopa-col-lg-push-6 {
    872         left: 50%;
    873     }
    874 
    875     .kopa-col-lg-push-5 {
    876         left: 41.66666666666667%;
    877     }
    878 
    879     .kopa-col-lg-push-4 {
    880         left: 33.33333333333333%;
    881     }
    882 
    883     .kopa-col-lg-push-3 {
    884         left: 25%;
    885     }
    886 
    887     .kopa-col-lg-push-2 {
    888         left: 16.666666666666664%;
    889     }
    890 
    891     .kopa-col-lg-push-1 {
    892         left: 8.333333333333332%;
    893     }
    894 
    895     .kopa-col-lg-push-0 {
    896         left: 0;
    897     }
    898 
    899     .kopa-col-lg-offset-12 {
    900         margin-left: 100%;
    901     }
    902 
    903     .kopa-col-lg-offset-11 {
    904         margin-left: 91.66666666666666%;
    905     }
    906 
    907     .kopa-col-lg-offset-10 {
    908         margin-left: 83.33333333333334%;
    909     }
    910 
    911     .kopa-col-lg-offset-9 {
    912         margin-left: 75%;
    913     }
    914 
    915     .kopa-col-lg-offset-8 {
    916         margin-left: 66.66666666666666%;
    917     }
    918 
    919     .kopa-col-lg-offset-7 {
    920         margin-left: 58.333333333333336%;
    921     }
    922 
    923     .kopa-col-lg-offset-6 {
    924         margin-left: 50%;
    925     }
    926 
    927     .kopa-col-lg-offset-5 {
    928         margin-left: 41.66666666666667%;
    929     }
    930 
    931     .kopa-col-lg-offset-4 {
    932         margin-left: 33.33333333333333%;
    933     }
    934 
    935     .kopa-col-lg-offset-3 {
    936         margin-left: 25%;
    937     }
    938 
    939     .kopa-col-lg-offset-2 {
    940         margin-left: 16.666666666666664%;
    941     }
    942 
    943     .kopa-col-lg-offset-1 {
    944         margin-left: 8.333333333333332%;
    945     }
    946 
    947     .kopa-col-lg-offset-0 {
    948         margin-left: 0;
    949     }
    950 }
    95121
    95222.kopa-icon-picker,
    … …  
    1119189.kopa-metabox-wrapper{ 
    1120190
    1121     .kopa_screenshot{
    1122         display: block;     
    1123         text-align: center;             
    1124         background-color: #eee;
    1125         border: 1px solid #ddd;
    1126         padding: 24px;     
    1127 
    1128         img{
    1129             max-width: 320px;
    1130         }
    1131 
    1132         .kopa_remove_image{
    1133             display: none;
    1134         }
    1135     }
    1136 
    1137 }
    1138 
    1139 .ui-draggable-handle {
    1140     -ms-touch-action: none;
    1141     touch-action: none;
    1142 }
    1143 /* Layout helpers
    1144 ----------------------------------*/
    1145 .ui-helper-hidden {
    1146     display: none;
    1147 }
    1148 .ui-helper-hidden-accessible {
    1149     border: 0;
    1150     clip: rect(0 0 0 0);
    1151     height: 1px;
    1152     margin: -1px;
    1153     overflow: hidden;
    1154     padding: 0;
    1155     position: absolute;
    1156     width: 1px;
    1157 }
    1158 .ui-helper-reset {
    1159     margin: 0;
    1160     padding: 0;
    1161     border: 0;
    1162     outline: 0;
    1163     line-height: 1.3;
    1164     text-decoration: none;
    1165     font-size: 100%;
    1166     list-style: none;
    1167 }
    1168 .ui-helper-clearfix:before,
    1169 .ui-helper-clearfix:after {
    1170     content: "";
    1171     display: table;
    1172     border-collapse: collapse;
    1173 }
    1174 .ui-helper-clearfix:after {
    1175     clear: both;
    1176 }
    1177 .ui-helper-zfix {
    1178     width: 100%;
    1179     height: 100%;
    1180     top: 0;
    1181     left: 0;
    1182     position: absolute;
    1183     opacity: 0;
    1184     filter:Alpha(Opacity=0); /* support: IE8 */
    1185 }
    1186 
    1187 .ui-front {
    1188     z-index: 100;
    1189 }
    1190 
    1191 
    1192 /* Interaction Cues
    1193 ----------------------------------*/
    1194 .ui-state-disabled {
    1195     cursor: default !important;
    1196     pointer-events: none;
    1197 }
    1198 
    1199 
    1200 /* Icons
    1201 ----------------------------------*/
    1202 .ui-icon {
    1203     display: inline-block;
    1204     vertical-align: middle;
    1205     margin-top: -.25em;
    1206     position: relative;
    1207     text-indent: -99999px;
    1208     overflow: hidden;
    1209     background-repeat: no-repeat;
    1210 }
    1211 
    1212 .ui-widget-icon-block {
    1213     left: 50%;
    1214     margin-left: -8px;
    1215     display: block;
    1216 }
    1217 
    1218 /* Misc visuals
    1219 ----------------------------------*/
    1220 
    1221 /* Overlays */
    1222 .ui-widget-overlay {
    1223     position: fixed;
    1224     top: 0;
    1225     left: 0;
    1226     width: 100%;
    1227     height: 100%;
    1228 }
    1229 .ui-resizable {
    1230     position: relative;
    1231 }
    1232 .ui-resizable-handle {
    1233     position: absolute;
    1234     font-size: 0.1px;
    1235     display: block;
    1236     -ms-touch-action: none;
    1237     touch-action: none;
    1238 }
    1239 .ui-resizable-disabled .ui-resizable-handle,
    1240 .ui-resizable-autohide .ui-resizable-handle {
    1241     display: none;
    1242 }
    1243 .ui-resizable-n {
    1244     cursor: n-resize;
    1245     height: 7px;
    1246     width: 100%;
    1247     top: -5px;
    1248     left: 0;
    1249 }
    1250 .ui-resizable-s {
    1251     cursor: s-resize;
    1252     height: 7px;
    1253     width: 100%;
    1254     bottom: -5px;
    1255     left: 0;
    1256 }
    1257 .ui-resizable-e {
    1258     cursor: e-resize;
    1259     width: 7px;
    1260     right: -5px;
    1261     top: 0;
    1262     height: 100%;
    1263 }
    1264 .ui-resizable-w {
    1265     cursor: w-resize;
    1266     width: 7px;
    1267     left: -5px;
    1268     top: 0;
    1269     height: 100%;
    1270 }
    1271 .ui-resizable-se {
    1272     cursor: se-resize;
    1273     width: 12px;
    1274     height: 12px;
    1275     right: 1px;
    1276     bottom: 1px;
    1277 }
    1278 .ui-resizable-sw {
    1279     cursor: sw-resize;
    1280     width: 9px;
    1281     height: 9px;
    1282     left: -5px;
    1283     bottom: -5px;
    1284 }
    1285 .ui-resizable-nw {
    1286     cursor: nw-resize;
    1287     width: 9px;
    1288     height: 9px;
    1289     left: -5px;
    1290     top: -5px;
    1291 }
    1292 .ui-resizable-ne {
    1293     cursor: ne-resize;
    1294     width: 9px;
    1295     height: 9px;
    1296     right: -5px;
    1297     top: -5px;
    1298 }
    1299 .ui-controlgroup {
    1300     vertical-align: middle;
    1301     display: inline-block;
    1302 }
    1303 .ui-controlgroup > .ui-controlgroup-item {
    1304     float: left;
    1305     margin-left: 0;
    1306     margin-right: 0;
    1307 }
    1308 .ui-controlgroup > .ui-controlgroup-item:focus,
    1309 .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
    1310     z-index: 9999;
    1311 }
    1312 .ui-controlgroup-vertical > .ui-controlgroup-item {
    1313     display: block;
    1314     float: none;
    1315     width: 100%;
    1316     margin-top: 0;
    1317     margin-bottom: 0;
    1318     text-align: left;
    1319 }
    1320 .ui-controlgroup-vertical .ui-controlgroup-item {
    1321     box-sizing: border-box;
    1322 }
    1323 .ui-controlgroup .ui-controlgroup-label {
    1324     padding: .4em 1em;
    1325 }
    1326 .ui-controlgroup .ui-controlgroup-label span {
    1327     font-size: 80%;
    1328 }
    1329 .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
    1330     border-left: none;
    1331 }
    1332 .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
    1333     border-top: none;
    1334 }
    1335 .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
    1336     border-right: none;
    1337 }
    1338 .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
    1339     border-bottom: none;
    1340 }
    1341 
    1342 /* Spinner specific style fixes */
    1343 .ui-controlgroup-vertical .ui-spinner-input {
    1344 
    1345     /* Support: IE8 only, Android < 4.4 only */
    1346     width: 75%;
    1347     width: calc( 100% - 2.4em );
    1348 }
    1349 .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    1350     border-top-style: solid;
    1351 }
    1352 
    1353 .ui-checkboxradio-label .ui-icon-background {
    1354     box-shadow: inset 1px 1px 1px #ccc;
    1355     border-radius: .12em;
    1356     border: none;
    1357 }
    1358 .ui-checkboxradio-radio-label .ui-icon-background {
    1359     width: 16px;
    1360     height: 16px;
    1361     border-radius: 1em;
    1362     overflow: visible;
    1363     border: none;
    1364 }
    1365 .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
    1366 .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    1367     background-image: none;
    1368     width: 8px;
    1369     height: 8px;
    1370     border-width: 4px;
    1371     border-style: solid;
    1372 }
    1373 .ui-checkboxradio-disabled {
    1374     pointer-events: none;
    1375 }
    1376 .ui-dialog {
    1377     position: absolute;
    1378     top: 0;
    1379     left: 0;
    1380     padding: .2em;
    1381     outline: 0;
    1382 }
    1383 .ui-dialog .ui-dialog-titlebar {
    1384     padding: .4em 1em;
    1385     position: relative;
    1386 }
    1387 .ui-dialog .ui-dialog-title {
    1388     float: left;
    1389     margin: .1em 0;
    1390     white-space: nowrap;
    1391     overflow: hidden;
    1392     text-overflow: ellipsis;
    1393 }
    1394 .ui-dialog .ui-dialog-titlebar-close {
    1395     display: block;
    1396     float: right;
    1397     cursor: pointer;
    1398     border-color: transparent;
    1399     background-color: transparent; 
    1400     padding: 0;
    1401     &:hover{
    1402         color: red;
    1403     }
    1404 }
    1405 
    1406 .ui-dialog .ui-dialog-content {
    1407     position: relative;
    1408     border: 0;
    1409     padding: .5em 1em;
    1410     background: none;
    1411     overflow: auto;
    1412 }
    1413 .ui-dialog .ui-dialog-buttonpane {
    1414     text-align: left;
    1415     border-width: 1px 0 0 0;
    1416     background-image: none;
    1417     margin-top: .5em;
    1418     padding: .3em 1em .5em .4em;
    1419 }
    1420 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    1421     float: right;
    1422 }
    1423 .ui-dialog .ui-dialog-buttonpane button {
    1424     margin: .5em .4em .5em 0;
    1425     cursor: pointer;
    1426 }
    1427 .ui-dialog .ui-resizable-n {
    1428     height: 2px;
    1429     top: 0;
    1430 }
    1431 .ui-dialog .ui-resizable-e {
    1432     width: 2px;
    1433     right: 0;
    1434 }
    1435 .ui-dialog .ui-resizable-s {
    1436     height: 2px;
    1437     bottom: 0;
    1438 }
    1439 .ui-dialog .ui-resizable-w {
    1440     width: 2px;
    1441     left: 0;
    1442 }
    1443 .ui-dialog .ui-resizable-se,
    1444 .ui-dialog .ui-resizable-sw,
    1445 .ui-dialog .ui-resizable-ne,
    1446 .ui-dialog .ui-resizable-nw {
    1447     width: 7px;
    1448     height: 7px;
    1449 }
    1450 .ui-dialog .ui-resizable-se {
    1451     right: 0;
    1452     bottom: 0;
    1453 }
    1454 .ui-dialog .ui-resizable-sw {
    1455     left: 0;
    1456     bottom: 0;
    1457 }
    1458 .ui-dialog .ui-resizable-ne {
    1459     right: 0;
    1460     top: 0;
    1461 }
    1462 .ui-dialog .ui-resizable-nw {
    1463     left: 0;
    1464     top: 0;
    1465 }
    1466 .ui-draggable .ui-dialog-titlebar {
    1467     cursor: move;
    1468 }
    1469 
    1470 /* Component containers
    1471 ----------------------------------*/
    1472 .ui-widget {
    1473     font-family: Arial,Helvetica,sans-serif;
    1474     font-size: 1em;
    1475 }
    1476 .ui-widget .ui-widget {
    1477     font-size: 1em;
    1478 }
    1479 .ui-widget input,
    1480 .ui-widget select,
    1481 .ui-widget textarea,
    1482 .ui-widget button {
    1483     font-family: Arial,Helvetica,sans-serif;
    1484     font-size: 1em;
    1485 }
    1486 .ui-widget.ui-widget-content {
    1487     border: 1px solid #c5c5c5;
    1488 }
    1489 .ui-widget-content {
    1490     border: 1px solid #dddddd;
    1491     background: #ffffff;
    1492     color: #333333;
    1493 }
    1494 .ui-widget-content a {
    1495     color: #333333;
    1496 }
    1497 .ui-widget-header {
    1498     border: 1px solid #dddddd;
    1499     background: #e9e9e9;
    1500     color: #333333;
    1501     font-weight: bold;
    1502 }
    1503 .ui-widget-header a {
    1504     color: #333333;
    1505 }
    1506 
    1507 /* Interaction states
    1508 ----------------------------------*/
    1509 
    1510 /* Overlays */
    1511 .ui-widget-overlay {
    1512     background: #aaaaaa;
    1513     opacity: .3;
    1514     filter: Alpha(Opacity=30); /* support: IE8 */
    1515 }
    1516 .ui-widget-shadow {
    1517     -webkit-box-shadow: 0px 0px 5px #666666;
    1518     box-shadow: 0px 0px 5px #666666;
    1519 }
    1520 
     191  .kopa_screenshot{
     192    display: block;     
     193    img{
     194        display: block;
     195            text-align: center;             
     196            background-color: #fafafa;
     197            border: 1px solid #ddd;
     198            padding: 3px;   
     199            max-width: 300px;
     200    }
     201    .kopa_remove_image{
     202        display: none;
     203    }
     204  }
     205}
     206

  • kopatheme/trunk/assets/js/admin-fields.js

    r1470471 r1486248  
    77
    88jQuery(document).ready(function ($) {
    9     Kopa_UI.init();
    10     Kopa_Field_Image.init($);
     9  Kopa_UI.init();
     10  Kopa_Field_Image.init($);
    1111});
    1212
    13 jQuery( document ).ajaxSuccess( function() {
    14     Kopa_UI.init();
     13jQuery( document ).ajaxSuccess( function($) {
     14  Kopa_UI.init($);
     15  Kopa_Field_Image.init($);
    1516});
    1617
    1718var Kopa_UI = {
    18     init: function (){
    19         Kopa_Datetime_Js.init_field_datetime();
    20         Kopa_UI_Gallery.init();
    21         Kopa_UI_Gallery_Sortable.init();
    22         Kopa_Icon_Picker.init();       
    23     }
     19  init: function () {
     20    Kopa_Datetime_Js.init_field_datetime();
     21    Kopa_UI_Gallery.init();
     22    Kopa_UI_Gallery_Sortable.init();
     23    Kopa_Icon_Picker.init();       
     24  }
    2425}
    2526

  • kopatheme/trunk/includes/abstracts/abstract-kopa-widget.php

    r1462803 r1486248  
    161161     */
    162162    function form( $instance ) {
    163 
     163        printf( '<div class="%s">', $this->control_options['id_base'] );
    164164        if ( ! $this->settings )
    165165            return;
    … …  
    371371
    372372                    if ( isset( $setting['taxonomy'] ) && !empty( $setting['taxonomy'] ) ) {
    373                         $taxonomy = esc_html( $setting['taxonomy'] );
    374                         $terms    = get_terms( $taxonomy );
    375                         if( $terms ){
    376                             foreach( $terms as $term ){
    377                                 $setting['options'][$term->term_id] = $term->name;
    378                             }
    379                         }
    380                     }                                   
     373                                        $taxonomy = esc_html( $setting['taxonomy'] );
     374                                        $terms    = get_terms( $taxonomy );
     375                                        if( $terms ){
     376                                            foreach( $terms as $term ){
     377                                                $setting['options'][$term->term_id] = $term->name;
     378                                            }
     379                                        }
     380                                    }                                   
    381381                   
    382382                    ?>
    … …  
    460460            echo apply_filters( sprintf('kopa_widget_form_field_%s', $setting['type']), $html, $wrap_start, $wrap_end, $setting, $value, $key );
    461461        }
     462
     463        print('</div>');
    462464    }
    463465

  • kopatheme/trunk/includes/admin/class-kopa-admin-assets.php

    r1471418 r1486248  
    5858        }
    5959       
    60         /**
    61         * @since 1.1.9
    62         * @add `appearance_page_kopa-framework` to check in_array()
    63         *
    64         * @since 1.2.0
    65         * @add `edit-tags.php`, `term.php` to check in_array()
    66         */
    67        
    68         if ( in_array( $hook, array( 'widgets.php', 'post.php', 'post-new.php', 'appearance_page_kopa-framework', 'edit-tags.php','term.php' ) ) ) {
     60            /**
     61            * @since 1.1.9
     62            * @add `appearance_page_kopa-framework` to check in_array()
     63            *
     64            * @since 1.2.0
     65            * @add `edit-tags.php`, `term.php` to check in_array()
     66            */
     67           
     68            if ( in_array( $hook, array( 'widgets.php', 'post.php', 'post-new.php', 'appearance_page_kopa-framework', 'edit-tags.php','term.php' ) ) ) {
    6969                wp_enqueue_style( 'kopa_widget' );
    7070          if ( $advanced_field ) {
    … …  
    107107            $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
    108108
     109            wp_enqueue_media();
     110           
    109111            // Register scripts
    110112            wp_register_script( 'kopa_admin', KF()->framework_url() . '/assets/js/admin'.$suffix.'.js', array( 'jquery', 'wp-color-picker', 'jquery-ui-sortable', 'kopa_media_uploader' ), KOPA_FRAMEWORK_VERSION );
    … …  
    126128            wp_register_script( 'kopa_datetimepicker', KF()->framework_url() . '/assets/js/jquery.datetimepicker'.$suffix.'.js', array( 'jquery' ), KOPA_FRAMEWORK_VERSION );
    127129        }
     130
     131
    128132
    129133            // KopaFramework admin pages

  • kopatheme/trunk/includes/admin/class-kopa-admin-meta-box.php

    r1470471 r1486248  
    206206
    207207                $wrap_start = apply_filters( 'kopa_admin_meta_box_wrap_start', $wrap_start, $settings, $_loop_index );
    208                 $wrap_end = apply_filters( 'kopa_admin_meta_box_wrap_end', $wrap_end, $settings, $_loop_index );
    209 
    210 
    211 
    212                 /**
    213                  * @deprecated since 1.1.9
    214                  *
    215                  * $advanced_field = apply_filters( 'kopa_admin_metabox_advanced_field', false );
    216                  */
    217                
     208                $wrap_end   = apply_filters( 'kopa_admin_meta_box_wrap_end', $wrap_end, $settings, $_loop_index );
     209
     210
     211
     212
     213                /**
     214                 * Integrate with versions < 1.1.9
     215                 * @since 1.2.2
     216                 */
     217                $is_use_advanced_field = apply_filters( 'kopa_admin_metabox_advanced_field', false );
     218                $advanced_fields       = array( 'icon', 'color', 'gallery', 'datetime' );
     219
    218220                /**
    219221                 * Field value
    … …  
    233235                 */
    234236                $field_keys = array_keys( $kopa_form_fields, $settings['type'] );
    235                
     237
    236238                $form_field_callback = 'kopa_form_field_';
    237                 if(isset($field_keys[0])){
    238                     $form_field_callback = $form_field_callback.$kopa_form_fields[$field_keys[0]];
    239                 }
    240                
     239                if ( isset( $field_keys[0] ) ) {
     240                    $form_field_callback = $form_field_callback . $kopa_form_fields[$field_keys[0]];
     241                }
     242
    241243                /**
    242244                 * Check form field is exist then call function
    … …  
    244246                 */
    245247                if ( function_exists( $form_field_callback ) ) {
    246                     $output.=call_user_func( $form_field_callback, $wrap_start, $wrap_end, $settings, $value );
     248                    if ( in_array( $settings['type'], $advanced_fields ) ) {
     249                        /**
     250                         * Integrate with versions < 1.1.9
     251                         * @since 1.2.2
     252                         */
     253                        if ( $is_use_advanced_field ) {
     254                            $output.=call_user_func( $form_field_callback, $wrap_start, $wrap_end, $settings, $value );
     255                        } else {
     256                            $output .= apply_filters( 'kopa_admin_meta_box_field_' . $settings['type'], '', $wrap_start, $wrap_end, $settings, $value );
     257                        }
     258                    } else {
     259                        $output.=call_user_func( $form_field_callback, $wrap_start, $wrap_end, $settings, $value );
     260                    }
    247261                } else {
    248262                    $output .= apply_filters( 'kopa_admin_meta_box_field_' . $settings['type'], '', $wrap_start, $wrap_end, $settings, $value );

  • kopatheme/trunk/includes/admin/class-kopa-admin-settings.php

    r1470471 r1486248  
    467467                 */
    468468                if ( function_exists( $form_field_callback ) ) {
    469                     $output.=call_user_func( $form_field_callback, $wrap_start, $wrap_end, $settings, $value );
     469                    $output.= call_user_func( $form_field_callback, $wrap_start, $wrap_end, $settings, $value );
    470470                } else {
    471471                    $output .= apply_filters( 'kopa_admin_field_' . $settings['type'], '', $wrap_start, $wrap_end, $settings, $value );

  • kopatheme/trunk/includes/admin/fields/default_fields.php

    r1471418 r1486248  
    103103function kopa_form_field_textarea( $wrap_start, $wrap_end, $settings, $value ) {
    104104    $rows = !empty( $settings['rows'] ) ? 'rows="' . $settings['rows'] . '"' : '';
    105    
     105
    106106    $class = 'large-text';
    107107    if ( isset( $value['class'] ) && !empty( $value['class'] ) ) {
    … …  
    136136
    137137    $options = '';
    138     $output ='';
     138    $output = '';
    139139    if ( !empty( $settings['options'] ) ) {
    140140        foreach ( $settings['options'] as $key => $text ) {
    … …  
    258258 */
    259259function kopa_form_field_radio( $wrap_start, $wrap_end, $settings, $value ) {
    260    
    261     $output= $wrap_start;
     260
     261    $output = $wrap_start;
    262262
    263263    foreach ( $settings['options'] as $key => $val ) {
    … …  
    296296        'datepicker' => 1,
    297297        'timepicker' => 0,
    298     ) );
     298            ) );
    299299   
    300     $value = date( $settings['format'], $value );
    301     $output='';
     300    if ( !empty( $value ) ) {
     301        $value = date( $settings['format'], $value );
     302    }
     303    $output = '';
    302304    $output .= $wrap_start;
    303305    $output .= '<input
    304                                         class="medium-text kopa-framework-datetime"
    305                                         type="' . esc_attr( $settings['type'] ) . '"
    306                                         name="' . esc_attr( $settings['id'] ) . '"
    307                                         id="' . esc_attr( $settings['id'] ) . '"
    308                                         value="' . esc_attr( $value ) . '"
    309                                         data-timepicker="' . esc_attr( $settings['timepicker'] ) . '"
    310                                         data-datepicker="' . esc_attr( $settings['datepicker'] ) . '"
    311                                         data-format="' . wp_kses_post( $settings['format'] ) . '"
    312                                         autocomplete="off">';
     306        class="medium-text kopa-framework-datetime"
     307        type="' . esc_attr( $settings['type'] ) . '"
     308        name="' . esc_attr( $settings['id'] ) . '"
     309        id="' . esc_attr( $settings['id'] ) . '"
     310        value="' . esc_attr( $value ) . '"
     311        data-timepicker="' . esc_attr( $settings['timepicker'] ) . '"
     312        data-datepicker="' . esc_attr( $settings['datepicker'] ) . '"
     313        data-format="' . wp_kses_post( $settings['format'] ) . '"
     314        autocomplete="off">';
    313315    $output .= $wrap_end;
    314316

  • kopatheme/trunk/includes/admin/fields/deprecated_fields.php

    r1470471 r1486248  
    3030    $output = $wrap_start;
    3131    $output .= '<div class="kopa-framework-gallery-box">';
    32     $output .= '<input
    33                                         class="medium-text kopa-framework-gallery"
    34                                         type="text"
    35                                         name="' . esc_attr( $settings['id'] ) . '"
    36                                         id="' . esc_attr( $settings['id'] ) . '"
    37                                         value="' . esc_attr( $value ) . '"
    38                                         autocomplete="off">';
    39 
     32    $output .= '<input class="medium-text kopa-framework-gallery" type="text" name="' . esc_attr( $settings['id'] ) . '" id="' . esc_attr( $settings['id'] ) . '" value="' . esc_attr( $value ) . '" autocomplete="off">';
    4033    $output .= '<a href="#" class="kopa-framework-gallery-config button button-secondary">' . esc_html__( 'Select images', 'kopa-framework' ) . '</a>';
    4134    $output .= '</div>';

  • kopatheme/trunk/includes/admin/fields/field_color.php

    r1470471 r1486248  
    2929
    3030    $output = $wrap_start;
    31     $output .= '<input
    32                                         class="' . esc_attr( $field_class ) . '"
    33                                         style="' . esc_attr( $settings['css'] ) . '"
    34                                         type="' . esc_attr( $settings['type'] ) . '"
    35                                         name="' . esc_attr( $settings['id'] ) . '"
    36                                         id="' . esc_attr( $settings['id'] ) . '"
    37                                         value="' . esc_attr( $value ) . '"' .
    38             $default_color . '>';
     31    $output .= '<input class="' . esc_attr( $field_class ) . '" style="' . esc_attr( $settings['css'] ) . '" type="' . esc_attr( $settings['type'] ) . '" name="' . esc_attr( $settings['id'] ) . '" id="' . esc_attr( $settings['id'] ) . '" value="' . esc_attr( $value ) . '"' . $default_color . '>';
    3932    $output .= $wrap_end;
    4033

  • kopatheme/trunk/includes/admin/fields/field_font.php

    r1470471 r1486248  
    2424        'size' => '',
    2525        'color' => '',
    26             ) );
     26    ) );
    2727
    2828    $preview = isset( $settings['preview'] ) ? $settings['preview'] : __( 'preview text', 'kopa-framework' );
    … …  
    3232    // select section
    3333    // font family
    34     $output .= '<select
    35                         class="kopa_select_font"
    36                         id="' . esc_attr( $settings['id'] ) . '"
    37                         name="' . esc_attr( $settings['id'] ) . '[family]"
    38                         data-main-id="' . esc_attr( $settings['id'] ) . '">';
     34    $output .= '<select class="kopa_select_font" id="' . esc_attr( $settings['id'] ) . '" name="' . esc_attr( $settings['id'] ) . '[family]" data-main-id="' . esc_attr( $settings['id'] ) . '">';
    3935    foreach ( $settings['options'] as $key => $val ) {
    4036        // check font groups
    … …  
    6763
    6864    // preview section
    69     $output .= '<p
    70                         class="kopa_google_font_preview"
    71                         id="' . esc_attr( $settings['id'] ) . '_preview">' . esc_html( $preview ) . '</p>';
     65    $output .= '<p class="kopa_google_font_preview" id="' . esc_attr( $settings['id'] ) . '_preview">' . esc_html( $preview ) . '</p>';
    7266    $output .= $wrap_end;
    7367

  • kopatheme/trunk/includes/admin/fields/field_icon.php

    r1470471 r1486248  
    1919    $output = $wrap_start;
    2020    $output .= '<div class="kopa-icon-picker-wrap clearfix">';
    21     $output .= '<input type="hidden"
    22                                 name="' . esc_attr( $settings['id'] ) . '"
    23                                 id="' . esc_attr( $settings['id'] ) . '"
    24                                 value="' . esc_attr( $value ) . '"
    25                                 autocomplete="off"
    26                                 class="large-text kopa-icon-picker-value"/>';
     21    $output .= '<input type="hidden" name="' . esc_attr( $settings['id'] ) . '" id="' . esc_attr( $settings['id'] ) . '" value="' . esc_attr( $value ) . '" autocomplete="off" class="large-text kopa-icon-picker-value"/>';
    2722    $output .= '<span class="kopa-icon-picker-preview"><i class="' . esc_attr( $value ) . '"></i></span>';
    2823    $output .= '<a class="kopa-icon-picker dashicons dashicons-arrow-down" href="#"></a>';

  • kopatheme/trunk/includes/admin/fields/field_image.php

    r1470471 r1486248  
    11<?php
    2 if ( ! defined( 'ABSPATH' ) ) {
     2if ( !defined( 'ABSPATH' ) ) {
    33    die( '-1' );
    44}
    5 
    65
    76/**
    … …  
    1918 */
    2019function kopa_form_field_image( $wrap_start, $wrap_end, $settings, $value ) {
     20   
    2121    ob_start();
    2222
    … …  
    2424
    2525    $thumbnail_id = absint( $value );
    26     $image_url = '';
    27     $hasimage = '';
     26    $image_url    = '';
     27    $classes      = array();
    2828
    2929    if ( $thumbnail_id ) {
    3030        $image_url = wp_get_attachment_image_url( $thumbnail_id, 'full' );
    31         $hasimage = 'hasimage';
     31        $classes[] = 'hasimage';
    3232    }
    3333
    34     if ( function_exists( 'wp_enqueue_media' ) ) {
    35         wp_enqueue_media();
    36     } else {
    37         wp_enqueue_script( 'media-upload' );
    38         wp_enqueue_script( 'thickbox' );
    39         wp_enqueue_style( 'thickbox' );
     34    $size = isset( $settings[ 'size' ] ) ? $settings[ 'size' ] : 'full';
     35    if( !in_array( $size, array( 'thumb', 'full' ) ) ){
     36        $size = 'full';
    4037    }
     38
     39    $classes[] = "kopa-field-image-{$size}";
    4140    ?>
    4241
    43     <div class="kopa-field kopa-field-image <?php echo esc_attr( $hasimage ) ?>">
    44         <a href="#" class="item-add" title="<?php echo esc_html__( 'Select an image', 'hub-toolkit' ) ?>">
     42    <div class="kopa-field kopa-field-image <?php echo esc_attr( implode( ' ', $classes ) ); ?>">       
     43        <a href="#" class="item-add" title="<?php echo esc_html__( 'Select an image', 'kopa-framework' ) ?>">
    4544            <?php
    4645            printf( '<div class="img" style="background-image:url(%s)"></div>', esc_url( $image_url ) );
    … …  
    5554
    5655    return ob_get_clean();
     56
    5757}

  • kopatheme/trunk/includes/admin/fields/field_layout_manager.php

    r1470471 r1486248  
    1919 */
    2020function kopa_form_field_layout_manager( $wrap_start, $wrap_end, $settings, $value ) {
    21     $settings = wp_parse_args( $settings, array(
    22         'layouts' => array(),
    23             ) );
     21    $settings = wp_parse_args( $settings, array( 'layouts' => array() ) );
    2422
    2523    global $wp_registered_sidebars;

  • kopatheme/trunk/includes/admin/fields/field_upload.php

    r1470471 r1486248  
    2020function kopa_form_field_upload( $wrap_start, $wrap_end, $settings, $value ) {
    2121    // make sure mimes key is set
    22     $settings = wp_parse_args( $settings, array(
    23         'mimes' => '',
    24             ) );
     22    $settings = wp_parse_args( $settings, array( 'mimes' => '' ) );
    2523
    26     $output = '<div class="kopa_section">';
    27     $output .= $wrap_start;
     24    $output = $wrap_start;
    2825
    29     $output .= '<input type="text"
    30                             class="large-text kopa_upload"
    31                             name="' . esc_attr( $settings['id'] ) . '"
    32                             id="' . esc_attr( $settings['id'] ) . '"
    33                             value="' . esc_attr( $value ) . '"
    34                             data-type="' . esc_attr( $settings['mimes'] ) . '">';
     26    $output .= '<div class="kopa_section">';
     27
     28    $output .= '<input type="text" class="large-text kopa_upload" name="' . esc_attr( $settings['id'] ) . '" id="' . esc_attr( $settings['id'] ) . '" value="' . esc_attr( $value ) . '" data-type="' . esc_attr( $settings['mimes'] ) . '">';
    3529
    3630    $output .= '<br>';
    … …  
    5751
    5852    $output .= '</p>';
     53
     54
    5955    $output .= '</div>';
    60 
     56   
    6157    $output .= $wrap_end;
    6258

  • kopatheme/trunk/includes/admin/fields/load.php

    r1470471 r1486248  
    1111 * @category    Fields
    1212 * @package     KopaFramework/Admin
    13  * @since       1.1.9
     13 * @since     1.1.9
    1414 */
    1515require_once 'default_fields.php';

  • kopatheme/trunk/kopa-framework.php

    r1471418 r1486248  
    88 * License: GPLv2 or later
    99 * Requires at least: 4.1
    10  * Tested up to: 4.5.3
     10 * Tested up to: 4.6
    1111 *
    1212 * Text Domain: kopa-framework

  • kopatheme/trunk/languages/kopa-framework-en_US.pot

    r1470471 r1486248  
    44"Project-Id-Version: Kopa Framework\n"
    55"Report-Msgid-Bugs-To: \n"
    6 "POT-Creation-Date: 2016-08-09 11:30+0700\n"
     6"POT-Creation-Date: 2016-08-18 10:03+0700\n"
    77"PO-Revision-Date: 2015-05-17 23:17+0700\n"
    88"Last-Translator: thanh4890 <[email protected]>\n"

  • kopatheme/trunk/readme.txt

    r1471418 r1486248  
    44Donate link:
    55Requires at least: 4.1
    6 Tested up to: 4.5.3
     6Tested up to: 4.6
    77Stable tag: 1.2.1
    88License: GPLv2 or later
    … …  
    2121
    2222== Changelog ==
     23= 1.2.2 =
     24* Fix Advanced fields JS bug
     25
    2326= 1.2.1 =
    2427* Fix some CSS
Note: See TracChangeset for help on using the changeset viewer.