diff --git a/src/resources/dist/css/super-table.css b/src/resources/dist/css/super-table.css index d858686..4c13247 100644 --- a/src/resources/dist/css/super-table.css +++ b/src/resources/dist/css/super-table.css @@ -1 +1 @@ -#plugin-footer .footer-left{float:left}#plugin-footer .footer-right{float:right}.plugin-credit{position:relative;width:78px;height:29px;display:block}.plugin-credit .credit-love{position:absolute;top:0;left:-104px;color:#8f98a3;opacity:0;padding:5px 9px 5px 0;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-webkit-transform:translateY(5px);transform:translateY(5px)}.plugin-credit .credit-pill{float:right;display:inline-block;background:#d5d9dd;border-radius:25px;padding:8px 10px 8px 5px;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.plugin-credit .credit-mask{width:12px;overflow:hidden;padding-left:3px;margin-right:-1px;-webkit-transform:skewX(-25deg);transform:skewX(-25deg);-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.plugin-credit .credit-wrap{width:60px;height:13px;-webkit-transform:skewX(25deg);transform:skewX(25deg)}.plugin-credit .credit-wrap svg{width:100%;height:100%;display:block}.plugin-credit:hover .credit-pill{background:#4b308c}.plugin-credit:hover .credit-love{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:0.4s;transition-delay:0.4s}.plugin-credit:hover .credit-mask{width:61px}.supertable-configurator>.field{max-width:none}.supertable-configurator>.field>.input{min-height:400px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.supertable-configurator .stc-sidebar{width:200px;border-radius:3px 0 0 3px;border:1px solid #e3e5e8;background:rgba(0,0,0,0.03)}.supertable-configurator .stc-sidebar>.col-inner-container>.field-items{margin-top:-1px;padding-top:1px}.supertableconfigitem{position:relative;margin-top:-1px;border-bottom:1px solid rgba(0,0,0,0.06);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default}body.ltr .supertableconfigitem{padding:11px 45px 10px 14px}body.rtl .supertableconfigitem{padding:11px 14px 10px 45px}.supertableconfigitem.sel{background:rgba(0,0,0,0.05)}.supertableconfigitem.error{background:rgba(255,0,0,0.1)}.supertableconfigitem.sel.error{background:rgba(200,0,0,0.2)}.supertableconfigitem .handle{font-size:11px;color:#8f98a3}.supertableconfigitem .actions{position:absolute;width:24px}body.ltr .supertableconfigitem .actions{right:0}body.rtl .supertableconfigitem .actions{left:0}.supertableconfigitem.stci-field .actions{top:20px}.supertableconfigitem .actions .icon{display:block;margin-bottom:1px;text-align:center}.supertable-configurator .stc-sidebar>.col-inner-container>.field-items .btn{margin:14px}.supertable-configurator .stc-settings{border:1px solid #e3e5e8;border-radius:0 3px 3px 0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:9999;flex-shrink:9999}body.ltr .supertable-configurator .stc-settings{border-left:0}body.rtl .supertable-configurator .stc-settings{border-right:0}.supertable-configurator .stc-settings>.col-inner-container>.field-items{padding:24px}.supertable-configurator .stc-sidebar>.col-inner-container>.heading,.supertable-configurator .stc-settings>.col-inner-container>.heading{padding:7px 14px 6px;color:#8f98a3;margin:0;border-bottom:1px solid #e3e5e8;background-image:-webkit-gradient(linear, left top, left bottom, from(#f7f7f8), to(#f4f5f6));background-image:linear-gradient(#f7f7f8, #f4f5f6)}.supertable-configurator .stc-settings>.col-inner-container>.heading{padding-left:24px}.matrix-configurator .supertable-configurator .matrix-configurator .mc-sidebar .items{padding:0}.matrix-configurator>.field>.input{overflow-x:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.matrix-configurator>.field>.input>.field-settings{width:100%}.superTableContainer{position:relative}.superTable-table{border-radius:5px;border:1px solid #ccc;overflow:hidden;width:100%;margin-top:10px;-webkit-box-shadow:0 1px 5px -1px rgba(0,0,0,0.1);box-shadow:0 1px 5px -1px rgba(0,0,0,0.1)}.superTable-table tbody tr td{vertical-align:middle;text-align:left;background:#fff}.superTable-table tbody tr td:not(:first-child),.superTable-table tbody tr th ~ td:not(.hidden) ~ td{border-left:1px solid rgba(0,0,0,0.07)}.superTable-table tbody tr:not(:first-child) td{border-top:1px solid rgba(0,0,0,0.07)}.superTable-table tbody tr td:not(.textual){padding:4px 10px}.superTable-table tbody tr td>.field>.heading{display:none}.superTable-table tbody tr td.action{background:#ebedef;padding:4px 7px}.superTable-table tbody tr td.action+td.action{padding-left:3px;border-left:none}.superTable-layout-table{table-layout:fixed}.superTable-layout-table thead tr th{border-bottom:1px solid rgba(0,0,0,0.15)}.superTable-layout-table thead tr th,.superTable-layout-table tbody tr th{padding:6px 10px;white-space:nowrap}.superTable-layout-table th,.superTable-layout-table td.action{color:#8f98a3;font-weight:normal;background:#ebedef}.superTable-layout-table th.col-header[colspan="2"]{width:29px}.superTable-layout-table .col-header .heading-text.required:after{margin:-4px 0 0 1px}.superTable-layout-table .col-header .heading-text .info:before{margin:1px 0 0 1px}.superTable-layout-table+.btn.add{display:block;border-radius:0 0 2px 2px;border:1px dashed rgba(0,0,20,0.4);border-top-width:0;background:none;-webkit-box-shadow:none;box-shadow:none}.superTableRow{margin:10px 0}.superTableRow .rowHeader{font-weight:bold;vertical-align:top;font-size:11px;line-height:1.2;color:rgba(0,0,0,0.5);border-radius:3px 3px 0 0;padding:8px 7px !important;text-align:left;white-space:nowrap;background:#f9fafa;-webkit-box-shadow:0 2px 1px -2px rgba(0,0,0,0.2);box-shadow:0 2px 1px -2px rgba(0,0,0,0.2)}.superTableRow .rowHeader .heading-text{min-height:30px;display:block}.superTableRow .rowHeader .heading-text.required:after{margin:-4px 0 0 1px}.superTableRow .rowHeader .heading-text .info:before{margin:1px 0 0 1px}.superTableRow .placeholder{width:25px !important}.superTableRow table{position:relative}.superTableRow tfoot tr{right:0;width:45px;position:absolute;top:0;height:100%;text-align:center;background:#ebedef;opacity:1;border-left:1px solid rgba(0,0,0,0.07)}.superTableRow .floating .icon.move:before{position:absolute;top:50%;left:50%;margin:-7px 0 0 -17px}.superTableRow .floating .icon.delete:before{position:absolute;top:50%;left:50%;margin:-7px 0 0 3px}.superTableRow .matrixblock.collapsed .titlebar{position:relative}.superTableRow .matrixblock.collapsed .preview{position:absolute}.superTableRow .matrixblock.collapsed .actions{background:#eef0f1;right:0;padding-right:5px}.superTableContainer .matrix-field .buttons{margin:0}.superTableContainer .matrix-field{padding:6px 0}body.ltr .superTableMatrix>.titlebar{padding:5px 70px 5px 5px}.superTableMatrix .fields .heading-text{display:none}.superTableContainer .field .fruitlinkit .fruitlinkit-options,.superTableContainer .field .fruitlinkit .fruitlinkit-type,.superTableContainer .field .linkit .linkit-type{margin:7px 0}.superTableContainer .field .fruitlinkit .fruitlinkit-type{margin-right:7px}.superTableContainer .field .fruitlinkit .fruitlinkit-options,.superTableContainer .field .fruitlinkit .fruitlinkit-type-option,.superTableContainer .field .fruitlinkit .fruitlinkit-text,.superTableContainer .field .fruitlinkit .fruitlinkit-target,.superTableContainer .field .linkit .linkit-type-option,.superTableContainer .field .linkit .linkit-text,.superTableContainer .field .linkit .linkit-target{margin-bottom:7px} +#plugin-footer .footer-left{float:left}#plugin-footer .footer-right{float:right}.plugin-credit{position:relative;width:78px;height:29px;display:block}.plugin-credit .credit-love{position:absolute;top:0;left:-104px;color:#8f98a3;opacity:0;padding:5px 9px 5px 0;transition:all 0.3s ease 0s;-webkit-transform:translateY(5px);transform:translateY(5px)}.plugin-credit .credit-pill{float:right;display:inline-block;background:#d5d9dd;border-radius:25px;padding:8px 10px 8px 5px;transition:all 0.3s ease}.plugin-credit .credit-mask{width:12px;overflow:hidden;padding-left:3px;margin-right:-1px;-webkit-transform:skewX(-25deg);transform:skewX(-25deg);transition:all 0.3s ease}.plugin-credit .credit-wrap{width:60px;height:13px;-webkit-transform:skewX(25deg);transform:skewX(25deg)}.plugin-credit .credit-wrap svg{width:100%;height:100%;display:block}.plugin-credit:hover .credit-pill{background:#4b308c}.plugin-credit:hover .credit-love{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);transition-delay:0.4s}.plugin-credit:hover .credit-mask{width:61px}.supertable-configurator>.field{max-width:none}.supertable-configurator>.field>.input{min-height:400px;position:relative;display:flex}.supertable-configurator .stc-sidebar{width:200px;border-radius:3px 0 0 3px;border:1px solid #e3e5e8;background:rgba(0,0,0,0.03)}.supertable-configurator .stc-sidebar>.col-inner-container>.field-items{margin-top:-1px;padding-top:1px}.supertableconfigitem{position:relative;margin-top:-1px;border-bottom:1px solid rgba(0,0,0,0.06);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default}body.ltr .supertableconfigitem{padding:11px 45px 10px 14px}body.rtl .supertableconfigitem{padding:11px 14px 10px 45px}.supertableconfigitem.sel{background:rgba(0,0,0,0.05)}.supertableconfigitem.error{background:rgba(255,0,0,0.1)}.supertableconfigitem.sel.error{background:rgba(200,0,0,0.2)}.supertableconfigitem .handle{font-size:11px;color:#8f98a3}.supertableconfigitem .actions{position:absolute;width:24px}body.ltr .supertableconfigitem .actions{right:0}body.rtl .supertableconfigitem .actions{left:0}.supertableconfigitem.stci-field .actions{top:20px}.supertableconfigitem .actions .icon{display:block;margin-bottom:1px;text-align:center}.supertable-configurator .stc-sidebar>.col-inner-container>.field-items .btn{margin:14px}.supertable-configurator .stc-settings{border:1px solid #e3e5e8;border-radius:0 3px 3px 0;flex-grow:1;flex-shrink:9999}body.ltr .supertable-configurator .stc-settings{border-left:0}body.rtl .supertable-configurator .stc-settings{border-right:0}.supertable-configurator .stc-settings>.col-inner-container>.field-items{padding:24px}.supertable-configurator .stc-sidebar>.col-inner-container>.heading,.supertable-configurator .stc-settings>.col-inner-container>.heading{padding:7px 14px 6px;color:#8f98a3;margin:0;border-bottom:1px solid #e3e5e8;background-image:linear-gradient(#f7f7f8, #f4f5f6)}.supertable-configurator .stc-settings>.col-inner-container>.heading{padding-left:24px}.matrix-configurator .supertable-configurator .matrix-configurator .mc-sidebar .items{padding:0}.matrix-configurator>.field>.input{overflow-x:auto;display:flex}.matrix-configurator>.field>.input>.field-settings{width:100%}.superTableContainer{position:relative}.superTable-table{border-radius:5px;border:1px solid #d5d8dd;overflow:hidden;width:100%;margin-top:10px;box-shadow:0 1px 5px -1px rgba(0,0,0,0.1)}.superTable-table tbody tr td{vertical-align:middle;text-align:left;background:#fff}.superTable-table tbody tr td:not(:first-child),.superTable-table tbody tr th ~ td:not(.hidden) ~ td{border-left:1px solid rgba(0,0,0,0.07)}.superTable-table tbody tr:not(:first-child) td{border-top:1px solid rgba(0,0,0,0.07)}.superTable-table tbody tr td:not(.textual){padding:4px 10px}.superTable-table tbody tr td>.field>.heading{display:none}.superTable-table tbody tr td.action{background:#f1f5f8;padding:4px 7px}.superTable-table tbody tr td.action+td.action{padding-left:3px;border-left:none}.superTable-layout-table{table-layout:fixed}.superTable-layout-table thead tr th{border-bottom:1px solid rgba(0,0,0,0.15)}.superTable-layout-table thead tr th,.superTable-layout-table tbody tr th{padding:6px 10px;white-space:nowrap}.superTable-layout-table tbody tr td:nth-child(2){border-left:0}.superTable-layout-table th,.superTable-layout-table td.action{color:#8f98a3;font-weight:normal;background:#f1f5f8}.superTable-layout-table th.col-header[colspan="2"]{width:29px}.superTable-layout-table .col-header .heading-text.required:after{margin:-4px 0 0 1px}.superTable-layout-table .col-header .heading-text{position:relative}.superTable-layout-table .col-header .heading-text .info{position:absolute;top:0;right:-20px}.superTable-layout-table+.btn.add{display:block;border-radius:0 0 2px 2px;border:1px dashed rgba(0,0,20,0.4);border-top-width:0;background:none;box-shadow:none}.superTableRow{margin:10px 0}.superTableRow .rowHeader{vertical-align:top;line-height:1.2;color:#8f98a3;font-weight:normal;border-radius:3px 3px 0 0;padding:8px 7px !important;text-align:left;white-space:nowrap;background:#f1f5f8}.superTableRow .rowHeader .heading-text{min-height:30px;display:block}.superTableRow .rowHeader .heading-text.required:after{margin:-4px 0 0 1px}.superTableRow .rowHeader .heading-text .info:before{margin:1px 0 0 1px}.superTableRow .placeholder{width:25px !important}.superTableRow table{position:relative}.superTableRow tfoot tr{right:0;width:45px;position:absolute;top:0;height:100%;text-align:center;background:#f1f5f8;opacity:1;border-left:1px solid rgba(0,0,0,0.07)}.superTable-layout-row tbody tr td:nth-child(2){border-left:1px solid #e0e4e7}.superTableRow .floating .icon.move:before{position:absolute;top:50%;left:50%;margin:-7px 0 0 -17px}.superTableRow .floating .icon.delete:before{position:absolute;top:50%;left:50%;margin:-7px 0 0 3px}.superTableRow .matrixblock.collapsed .titlebar{position:relative}.superTableRow .matrixblock.collapsed .preview{position:absolute}.superTableRow .matrixblock.collapsed .actions{background:#eef0f1;right:0;padding-right:5px}.superTableContainer .matrix-field .buttons{margin:0}.superTableContainer .matrix-field{padding:6px 0}body.ltr .superTableMatrix>.titlebar{padding:5px 70px 5px 5px}.superTableMatrix .fields .heading-text{display:none}.superTableContainer .field .fruitlinkit .fruitlinkit-options,.superTableContainer .field .fruitlinkit .fruitlinkit-type,.superTableContainer .field .linkit .linkit-type{margin:7px 0}.superTableContainer .field .fruitlinkit .fruitlinkit-type{margin-right:7px}.superTableContainer .field .fruitlinkit .fruitlinkit-options,.superTableContainer .field .fruitlinkit .fruitlinkit-type-option,.superTableContainer .field .fruitlinkit .fruitlinkit-text,.superTableContainer .field .fruitlinkit .fruitlinkit-target,.superTableContainer .field .linkit .linkit-type-option,.superTableContainer .field .linkit .linkit-text,.superTableContainer .field .linkit .linkit-target{margin-bottom:7px} diff --git a/src/resources/src/scss/_input.scss b/src/resources/src/scss/_input.scss index 1c2fbc0..7ab8f0a 100644 --- a/src/resources/src/scss/_input.scss +++ b/src/resources/src/scss/_input.scss @@ -8,7 +8,7 @@ .superTable-table { border-radius: 5px; - border: 1px solid #ccc; + border: 1px solid darken(#e3e5e8, 5%); overflow: hidden; width: 100%; margin-top: 10px; @@ -39,7 +39,7 @@ } .superTable-table tbody tr td.action { - background: #ebedef; + background: #f1f5f8; padding: 4px 7px; } @@ -67,11 +67,15 @@ white-space: nowrap; } +.superTable-layout-table tbody tr td:nth-child(2) { + border-left: 0; +} + .superTable-layout-table th, .superTable-layout-table td.action { color: #8f98a3; font-weight: normal; - background: #ebedef; + background: #f1f5f8; } .superTable-layout-table th.col-header[colspan="2"] { @@ -84,8 +88,14 @@ } /* Tweak the info icon a little */ -.superTable-layout-table .col-header .heading-text .info:before { - margin: 1px 0 0 1px; +.superTable-layout-table .col-header .heading-text { + position: relative; +} + +.superTable-layout-table .col-header .heading-text .info { + position: absolute; + top: 0; + right: -20px; } .superTable-layout-table + .btn.add { @@ -109,17 +119,15 @@ } .superTableRow .rowHeader { - font-weight: bold; vertical-align: top; - font-size: 11px; line-height: 1.2; - color: rgba(0, 0, 0, 0.5); + color: #8f98a3; + font-weight: normal; border-radius: 3px 3px 0 0; padding: 8px 7px !important; text-align: left; white-space: nowrap; - background: #f9fafa; - box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2); + background: #f1f5f8; } .superTableRow .rowHeader .heading-text { @@ -152,12 +160,16 @@ top: 0; height: 100%; text-align: center; - background: #ebedef; + background: #f1f5f8; opacity: 1; border-left: 1px solid rgba(0, 0, 0, 0.07); } +.superTable-layout-row tbody tr td:nth-child(2) { + border-left: 1px solid #e0e4e7; +} + .superTableRow .floating .icon.move:before { position: absolute; top: 50%;