Merge pull request #2 from woocommerce/develop

Merge fork

assets/css/admin/facebook-for-woocommerce-advertise-asc.css

@@ -0,0 +1,317 @@
+.fb-asc-ads {
+  margin: 0;
+  padding: 0;
+}
+
+.fb-asc-ads .default-view-table {
+  width: 1200px;
+}
+
+.fb-asc-ads .top-pad {
+  padding-top: 30px;
+}
+
+.fb-asc-ads .default-view-table th {
+  text-align: left;
+  font-weight: 400;
+}
+
+.fb-asc-ads .default-view-table td {
+  text-align: left;
+  vertical-align: top;
+  padding-top: 0px;
+  padding-right: 10px;
+}
+
+.fb-asc-ads .horizontal-align {
+  display: flex;
+  align-items: center;
+}
+
+.fb-asc-ads .round {
+  border-radius: 20% 20% 20% / 60%;
+}
+
+.fb-asc-ads .main-ui-button {
+  background-color: #b4d0a1;
+  font-weight: 600;
+  border-radius: 10px;
+  border: 1px solid black;
+  padding: 15px;
+}
+
+.fb-asc-ads .main-ui-button:hover {
+  background-color: #f4d0a1;
+}
+
+.fb-asc-ads .main-ui-button:active {
+  background-color: #f8b277;
+  color: gray;
+}
+
+.fb-asc-ads .insights-header {
+  margin: '0 20px';
+  padding: 0;
+}
+
+.fb-asc-ads .zero-border-element {
+  margin: 0;
+  padding: 0;
+}
+
+.fb-asc-ads .edit-view-topic {
+  margin: 0;
+  padding: 0;
+}
+
+.fb-asc-ads .country-selector {
+  margin-top: 0;
+  width: 100%; 
+  max-width: 200px;
+  max-height: 150px;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.fb-asc-ads .preview-object-iframe {
+  border: none;
+  overflow: hidden;
+  width: 330px;
+  height: 550px;
+}
+
+.fb-asc-ads .preview-object-iframe-parent {
+  overflow: hidden; 
+  background: transparent;
+}
+
+.fb-asc-ads .loading-preview-parent {
+  width: 700px; 
+  height: 550px; 
+  display: inline-block;
+}
+
+.fb-asc-ads .loading-preview-container {
+  width: 650px; 
+  height: 475px; 
+  align-items: center; 
+  justify-content: center; 
+  display: flex ;
+}
+
+.fb-asc-ads .navigation-footer-container {
+  background: transparent; 
+  min-width: 400px;
+  width: 100%;
+  height: 50px;
+  position: relative;
+}
+
+.fb-asc-ads .navigation-footer-container .fit-to-left{
+  left:0;
+}
+
+.fb-asc-ads .navigation-footer-button{
+  position: absolute;
+  top:5px;
+}
+
+.fb-asc-ads .navigation-footer-container .fit-to-right{
+  right:0;
+}
+
+.fb-asc-ads .main-ui-button:disabled {
+  border: 1px solid #999999;
+  background-color: #cccccc;
+  color: #666666;
+  opacity: 0.5;
+  box-shadow: none;
+}
+
+.fb-asc-ads .transparent-background {
+  background: transparent;
+}
+
+.fb-asc-ads .funnel-table-header{
+  margin:0; padding:0;
+  line-height: 10px;
+}
+
+.fb-asc-ads .funnel-table-header label{
+  margin:0; 
+  padding:0; 
+  line-height:10px;
+  font-size: 10px;
+}
+
+.fb-asc-ads .main-ui-container {
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
+    sans-serif;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  border: 1px solid black;
+  width: 500px;
+  height: 300px;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+  padding: 0;
+  justify-content: center;
+}
+
+.fb-asc-ads .main-ui-container-item {
+  padding: 0;
+  margin: 20px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.fb-asc-ads .campaign-edit-view-header {
+  color: #1d2327;
+}
+
+.fb-asc-ads .campaign-edit-view-header-tooltip {
+  font-size: 75%;
+  align-content: center;
+}
+
+.fb-asc-ads .campaign-edit-view-messagebox {
+  width: 300px;
+  margin-left: 5px; 
+  margin-right: 5px;
+  resize: none;
+}
+
+.fb-asc-ads .campaign-edit-view-thumbnail-container {
+  margin: 4px 0 0 0;
+  position: relative;
+  border-color: #5a5a5a; 
+  border-width: 0.5px;
+  border-style: solid;
+  width: 100%;
+  height: 100%;
+}
+
+.fb-asc-ads .campaign-edit-secondary-header {
+  color: #949494;
+  font-size: 75%;
+}
+
+.fb-asc-ads .secondary-header-color {
+  color: #949494;
+}
+
+.fb-asc-ads .campaign-edit-view-img {
+  display: block;
+  margin-left: 0;
+  margin-bottom: 5px;
+  width: 300px;
+  margin-top: 20px;
+}
+
+.fb-asc-ads .main-ui-header {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+  margin: 0;
+  padding: 0;
+}
+
+.fb-asc-ads .round:before {
+  border-radius: 80%;
+}
+
+.fb-asc-ads .bar-chart {
+  width: 100%;
+}
+
+.fb-asc-ads .bar-chart thead {
+  height: 90%;
+}
+
+.fb-asc-ads .bar-chart tbody {
+  height: 10%;
+}
+
+.fb-asc-ads .bar-chart tbody label {
+  white-space: pre-wrap;
+}
+
+.fb-asc-ads .bar-chart th {
+  vertical-align: bottom;
+}
+
+.fb-asc-ads .bar-chart th div {
+  width: 70%;
+  position: relative;
+  left: 15%;
+  text-align: center;
+  background-color: #2271b1;
+}
+
+.fb-asc-ads .bar-chart td {
+  text-align: center;
+}
+
+.fb-asc-ads .waiting-window {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+.hidden_view {
+  display: none !important;
+}
+
+.fb-asc-ads iframe {
+  border: 0;
+  width: 100%;
+  height: 550px;
+  margin: 10px;
+  border: none;
+  overflow: hidden;
+}
+
+.fb-asc-ads .error {
+  font-size: x-small;
+  color: red;
+}
+
+.fb-asc-ads .busy-indicator {
+  background-image: linear-gradient(90deg, rgba(9, 137, 163, 1) 0%, rgba(9, 137, 163, 1) 8%, rgba(9, 137, 163, 1) 44%, rgba(255, 255, 255, 1) 50%, rgba(9, 137, 163, 1) 56%, rgba(9, 137, 163, 1) 83%, rgba(9, 137, 163, 1) 90%, rgba(9, 137, 163, 1) 96%);
+  transition: 0.5s;
+  bottom: 0px;
+  height: 5px;
+  width: 100%;
+  background-size: 200%;
+  border-radius: 50px;
+  display: flex;
+  position: relative;
+  animation: busy-indicator-animation 2s infinite linear;
+}
+
+.fb-asc-ads .busy-indicator:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  border-radius: 10%;
+  left: 0;
+  pointer-events: none;
+  background-image: radial-gradient(ellipse at 50%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 1) 95%);
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes busy-indicator-animation {
+  0% {
+    background-position: right;
+  }
+
+  50% {
+    background-position: left;
+  }
+
+  100% {
+    background-position: right;
+  }
+}