You are here

Home » API reference » Acquia Lift Connector 7

acquia_lift.reports.css in Acquia Lift Connector 7

Same filename and directory in other branches
  1. 7.2 css/acquia_lift.reports.css
/**
 * General styles for lift graph implementations.
 * ----------------------------------------------------------------------------
 */
.lift-statistic-category {
  clear: both;
  padding: 1.4em 1em 1em;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px 0;
  background: #fff;
  -webkit-transition: opacity .4s, position .4s 0 step-start, width .4s 0 step-start, height .4s 0 step-start;
          transition: opacity .4s, position .4s 0 step-start, width .4s 0 step-start, height .4s 0 step-start;
}

.lift-statistic-category.active {
  visibility: visible;
  opacity: 1;
  width: auto;
  height: auto;
}
.lift-statistic-category.inactive {
  position: absolute;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
}

.acquia-lift-report-section-options {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  clear: both;
  width: 100%;
  min-width: 100%;
  /* Slightly better than using an !important. */
  margin-top: 1em;
  padding: .5em 1em .2em;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px 0 0 0;
  background-color: #eee;
}
.acquia-lift-report-section-options .form-item {
  margin-right: 1em;
}
html[dir="rtl"] .acquia-lift-report-section-options .form-item {
  margin-right: auto;
  margin-left: 1em;
}
.acquia-lift-report-section-options .form-item,
.acquia-lift-report-section-options .form-item label,
.acquia-lift-report-section-options .form-item select {
  display: inline-block;
}

.lift-winner {
  display: inline-block;
  padding: .3em .8em;
  line-height: 1em;
  font-weight: bold;
  border-radius: .9em;
  color: #fff;
  background-color: #85b200;
  box-shadow: 0 0.2em 0 #ccc;
}
.lift-winner:after {
  content: '\2713';
  display: inline-block;
  margin-left: .4em;
  font-size: 1.2em;
}
html[dir="rtl"] .lift-winner:after {
  margin-right: .4em;
  margin-left: auto;
}

.lift-graph {
  font-family: sans-serif;
}
.lift-graph * {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.lift-graph-container {
  padding-right: 1em;
  padding-left: 5em;
  font-family: sans-serif;
}
html[dir="rtl"] .lift-graph-container {
  padding-right: 5em;
  padding-left: 1em;
}
html[dir="rtl"] .lift-graph-container .y_axis .y_ticks text,
html[dir="rtl"] .lift-graph-container .lift-graph-graph .tick text {
  text-anchor: end !important;
}
.lift-graph-container .y-axis-label,
.lift-graph-container .tick text,
.lift-graph-container .tick line {
  color: #666;
  fill: #666;
  opacity: 1;
}
.lift-graph-container .x_ticks_d3 .tick text {
  fill: #666;
  stroke: transparent;
  stroke-width: 0;
}
.lift-graph-container .y_ticks > .tick:first-child {
  display: none;
}
.lift-graph-graph {
  float: left;
  width: 100%;
  height: 20em;
  margin-bottom: 2.8em;
}
.lift-graph-graph .detail {
  width: .2em;
  margin-left: -.1em;
  background: rgba(221, 221, 221, 0.5);
}
.lift-graph-graph .detail .item {
  margin: 1.6em -1em;
  padding: .1em;
  font-size: 0.85714em;
  line-height: 1.3em;
  box-shadow: 0 0.2em 0 rgba(204, 204, 204, 0.6);
}
.lift-graph-graph .detail .item.active {
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border: 0.1em solid #ccc;
  border-radius: .3em;
}
.lift-graph-graph .detail .item .swatch {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .3em;
  border-radius: 50%;
}
html[dir="rtl"] .lift-graph-graph .detail .item .swatch {
  margin-right: auto;
  margin-left: .3em;
}
.lift-graph-graph .detail .item:before, .lift-graph-graph .detail .item:after {
  display: block;
  content: " ";
  position: absolute;
  top: auto;
  right: 50%;
  width: 0;
  height: 0;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
}
.lift-graph-graph .detail .item:before {
  bottom: -1.5em;
  border-width: 0.7em;
  border-top-color: rgba(204, 204, 204, 0.6);
  margin-right: -1.6em;
}
.lift-graph-graph .detail .item:after {
  border-width: 0.5em;
  border-top-color: #fff;
  border-left-color: transparent;
  bottom: -1em;
  margin-right: -1.5em;
}
.lift-graph-graph .detail .item.left:before, .lift-graph-graph .detail .item.left:after {
  top: auto;
  right: auto;
  margin: 0;
}
.lift-graph-graph .detail .item.left:before {
  left: 0.3em;
}
.lift-graph-graph .detail .item.left:after {
  left: 0.5em;
  border-width: .5em;
  border-top-color: #fff;
  border-right-color: transparent;
}
.lift-graph-graph .detail .item.right:before, .lift-graph-graph .detail .item.right:after {
  top: auto;
  margin: 0;
}
.lift-graph-graph .detail .item.right:before {
  right: 0.3em;
}
.lift-graph-graph .detail .item.right:after {
  right: 0.5em;
  border-width: 0.5em;
  border-top-color: #fff;
  border-left-color: transparent;
}
.lift-graph-graph .detail .item.top:before, .lift-graph-graph .detail .item.top:after {
  bottom: auto;
  border-top-color: transparent;
}
.lift-graph-graph .detail .item.top:before {
  top: -1.2em;
  border-width: 0.6em;
  border-bottom-color: #ccc;
}
.lift-graph-graph .detail .item.top:after {
  top: -1em;
  border-bottom-color: #fff;
}
.lift-graph-graph .detail .dot {
  width: .5em;
  height: .5em;
  margin-top: -.35em;
  margin-left: -.35em;
  line-height: .5em;
  border-width: .2em;
  border-radius: 50%;
  box-shadow: none;
}
html[dir="rtl"] .lift-graph-graph .detail .dot {
  margin-right: -.35em;
  margin-left: auto;
}
.lift-graph .label-below .title {
  bottom: -1.8em;
  width: 6em;
  margin-left: -3em;
  text-align: center;
  font-size: .88em;
  font-family: inherit;
  white-space: nowrap;
  opacity: 1;
  color: #666;
}
.lift-graph-axis-x {
  clear: both;
  width: 100%;
}
.lift-graph-axis-x .rickshaw_graph {
  max-width: 100%;
}
.lift-graph-axis-y {
  float: left;
  clear: left;
  width: 5em;
  height: 20em;
  margin-left: -5em;
}
html[dir="rtl"] .lift-graph-axis-y {
  float: right;
  margin-right: -5em;
  margin-left: auto;
}
.lift-graph-legend {
  clear: both;
  background-color: transparent;
  color: #333;
}
.lift-graph-legend li {
  display: inline-block;
}
.lift-graph-legend .line .swatch {
  border-radius: 50%;
}
.lift-graph-detail {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.lift-graph-detail-data {
  margin: 0;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
}
.inactive .lift-graph-detail {
  pointer-events: none;
}
.lift-graph-detail tbody,
.lift-graph-detail thead {
  border: none;
}
.lift-graph-detail th,
.lift-graph-detail td {
  padding: .2em .5em;
  text-align: left;
  background: none;
}
html[dir="rtl"] .lift-graph-detail th, html[dir="rtl"]
.lift-graph-detail td {
  text-align: right;
}
.lift-graph-detail th, .lift-graph-detail th:first-child, .lift-graph-detail th:last-child,
.lift-graph-detail td,
.lift-graph-detail td:first-child,
.lift-graph-detail td:last-child {
  border: none;
}
.lift-graph-detail th {
  text-transform: none;
}
.lift-graph-detail [style^="background-color"] {
  color: #fff;
  font-weight: normal;
}
html[dir] .lift-graph-detail [style^="background-color"] {
  text-align: center;
}
.lift-graph-detail .active {
  background-color: #eee;
}
.lift-graph-result {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.lift-graph-result-data {
  width: 100%;
  max-width: 100%;
  margin: 1.3em 0;
  border-color: #ccc;
  border-collapse: collapse;
  font-size: .88em;
}
.lift-graph-result th,
.lift-graph-result td {
  text-align: left;
}
html[dir="rtl"] .lift-graph-result th, html[dir="rtl"]
.lift-graph-result td {
  text-align: right;
}
.lift-graph-result th:last-child,
.lift-graph-result td:last-child {
  text-align: center;
}
.lift-graph-result td.acquia-lift-ab-winner {
  max-width: 20%;
  width: 150px;
  background: #eee;
}
.lift-graph-result .action {
  margin-right: .6em;
  cursor: pointer;
}
html[dir="rtl"] .lift-graph-result .action {
  margin-right: auto;
  margin-left: .6em;
}
.lift-graph-result .swatch {
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-right: .6em;
  border-radius: 50%;
}
html[dir="rtl"] .lift-graph-result .swatch {
  margin-right: auto;
  margin-left: .6em;
}
.lift-graph-result .label {
  display: inline-block;
  margin-right: .2em;
  font-weight: bold;
}
html[dir="rtl"] .lift-graph-result .label {
  margin-right: auto;
  margin-left: .2em;
}
.lift-graph-result .toggle-enabled .line {
  cursor: pointer;
}
.lift-graph-result .toggle-enabled .line.disabled .action {
  opacity: .4;
}

.lift-graph-range-slider {
  clear: both;
  margin-right: 2.5em;
  margin-left: 2.5em;
  width: auto !important;
}

.acquia-lift-handle-value {
  position: absolute;
  width: 5em;
  top: -2.6em;
  left: 50%;
  margin-left: -2.5em;
  padding-top: .3em;
  padding-bottom: .2em;
  font-size: .88em;
  font-weight: normal;
  line-height: 1.4;
  background-color: #fff;
  border: 0.1em solid #ccc;
  border-radius: .2em;
  color: #333;
  text-align: center;
  text-decoration: none;
}
.acquia-lift-handle-value:after {
  content: "";
  display: block;
  position: absolute;
  border: 0.5em solid transparent;
  border-top-color: #ccc;
  bottom: -0.9em;
  left: 50%;
  margin-left: -0.5em;
}

File

css/acquia_lift.reports.css
View source 
  1. /**

  2.  * General styles for lift graph implementations.

  3.  * ----------------------------------------------------------------------------

  4.  */

  5. .lift-statistic-category {

  6.   clear: both;

  7.   padding: 1.4em 1em 1em;

  8.   border-style: solid;

  9.   border-color: #ccc;

  10.   border-width: 1px 0;

  11.   background: #fff;

  12.   -webkit-transition: opacity .4s, position .4s 0 step-start, width .4s 0 step-start, height .4s 0 step-start;

  13.           transition: opacity .4s, position .4s 0 step-start, width .4s 0 step-start, height .4s 0 step-start;

  14. }

  15. 

  16. .lift-statistic-category.active {

  17.   visibility: visible;

  18.   opacity: 1;

  19.   width: auto;

  20.   height: auto;

  21. }

  22. .lift-statistic-category.inactive {

  23.   position: absolute;

  24.   margin: 0;

  25.   overflow: hidden;

  26.   visibility: hidden;

  27.   opacity: 0;

  28.   width: 0;

  29.   height: 0;

  30. }

  31. 

  32. .acquia-lift-report-section-options {

  33.   -moz-box-sizing: border-box;

  34.        box-sizing: border-box;

  35.   clear: both;

  36.   width: 100%;

  37.   min-width: 100%;

  38.   /* Slightly better than using an !important. */

  39.   margin-top: 1em;

  40.   padding: .5em 1em .2em;

  41.   border-style: solid;

  42.   border-color: #ccc;

  43.   border-width: 1px 0 0 0;

  44.   background-color: #eee;

  45. }

  46. .acquia-lift-report-section-options .form-item {

  47.   margin-right: 1em;

  48. }

  49. html[dir="rtl"] .acquia-lift-report-section-options .form-item {

  50.   margin-right: auto;

  51.   margin-left: 1em;

  52. }

  53. .acquia-lift-report-section-options .form-item,

  54. .acquia-lift-report-section-options .form-item label,

  55. .acquia-lift-report-section-options .form-item select {

  56.   display: inline-block;

  57. }

  58. 

  59. .lift-winner {

  60.   display: inline-block;

  61.   padding: .3em .8em;

  62.   line-height: 1em;

  63.   font-weight: bold;

  64.   border-radius: .9em;

  65.   color: #fff;

  66.   background-color: #85b200;

  67.   box-shadow: 0 0.2em 0 #ccc;

  68. }

  69. .lift-winner:after {

  70.   content: '\2713';

  71.   display: inline-block;

  72.   margin-left: .4em;

  73.   font-size: 1.2em;

  74. }

  75. html[dir="rtl"] .lift-winner:after {

  76.   margin-right: .4em;

  77.   margin-left: auto;

  78. }

  79. 

  80. .lift-graph {

  81.   font-family: sans-serif;

  82. }

  83. .lift-graph * {

  84.   -moz-box-sizing: border-box;

  85.        box-sizing: border-box;

  86. }

  87. .lift-graph-container {

  88.   padding-right: 1em;

  89.   padding-left: 5em;

  90.   font-family: sans-serif;

  91. }

  92. html[dir="rtl"] .lift-graph-container {

  93.   padding-right: 5em;

  94.   padding-left: 1em;

  95. }

  96. html[dir="rtl"] .lift-graph-container .y_axis .y_ticks text,

  97. html[dir="rtl"] .lift-graph-container .lift-graph-graph .tick text {

  98.   text-anchor: end !important;

  99. }

  100. .lift-graph-container .y-axis-label,

  101. .lift-graph-container .tick text,

  102. .lift-graph-container .tick line {

  103.   color: #666;

  104.   fill: #666;

  105.   opacity: 1;

  106. }

  107. .lift-graph-container .x_ticks_d3 .tick text {

  108.   fill: #666;

  109.   stroke: transparent;

  110.   stroke-width: 0;

  111. }

  112. .lift-graph-container .y_ticks > .tick:first-child {

  113.   display: none;

  114. }

  115. .lift-graph-graph {

  116.   float: left;

  117.   width: 100%;

  118.   height: 20em;

  119.   margin-bottom: 2.8em;

  120. }

  121. .lift-graph-graph .detail {

  122.   width: .2em;

  123.   margin-left: -.1em;

  124.   background: rgba(221, 221, 221, 0.5);

  125. }

  126. .lift-graph-graph .detail .item {

  127.   margin: 1.6em -1em;

  128.   padding: .1em;

  129.   font-size: 0.85714em;

  130.   line-height: 1.3em;

  131.   box-shadow: 0 0.2em 0 rgba(204, 204, 204, 0.6);

  132. }

  133. .lift-graph-graph .detail .item.active {

  134.   background: rgba(255, 255, 255, 0.8);

  135.   color: #333;

  136.   border: 0.1em solid #ccc;

  137.   border-radius: .3em;

  138. }

  139. .lift-graph-graph .detail .item .swatch {

  140.   display: inline-block;

  141.   width: 1em;

  142.   height: 1em;

  143.   margin-right: .3em;

  144.   border-radius: 50%;

  145. }

  146. html[dir="rtl"] .lift-graph-graph .detail .item .swatch {

  147.   margin-right: auto;

  148.   margin-left: .3em;

  149. }

  150. .lift-graph-graph .detail .item:before, .lift-graph-graph .detail .item:after {

  151.   display: block;

  152.   content: " ";

  153.   position: absolute;

  154.   top: auto;

  155.   right: 50%;

  156.   width: 0;

  157.   height: 0;

  158.   overflow: hidden;

  159.   border-style: solid;

  160.   border-color: transparent;

  161. }

  162. .lift-graph-graph .detail .item:before {

  163.   bottom: -1.5em;

  164.   border-width: 0.7em;

  165.   border-top-color: rgba(204, 204, 204, 0.6);

  166.   margin-right: -1.6em;

  167. }

  168. .lift-graph-graph .detail .item:after {

  169.   border-width: 0.5em;

  170.   border-top-color: #fff;

  171.   border-left-color: transparent;

  172.   bottom: -1em;

  173.   margin-right: -1.5em;

  174. }

  175. .lift-graph-graph .detail .item.left:before, .lift-graph-graph .detail .item.left:after {

  176.   top: auto;

  177.   right: auto;

  178.   margin: 0;

  179. }

  180. .lift-graph-graph .detail .item.left:before {

  181.   left: 0.3em;

  182. }

  183. .lift-graph-graph .detail .item.left:after {

  184.   left: 0.5em;

  185.   border-width: .5em;

  186.   border-top-color: #fff;

  187.   border-right-color: transparent;

  188. }

  189. .lift-graph-graph .detail .item.right:before, .lift-graph-graph .detail .item.right:after {

  190.   top: auto;

  191.   margin: 0;

  192. }

  193. .lift-graph-graph .detail .item.right:before {

  194.   right: 0.3em;

  195. }

  196. .lift-graph-graph .detail .item.right:after {

  197.   right: 0.5em;

  198.   border-width: 0.5em;

  199.   border-top-color: #fff;

  200.   border-left-color: transparent;

  201. }

  202. .lift-graph-graph .detail .item.top:before, .lift-graph-graph .detail .item.top:after {

  203.   bottom: auto;

  204.   border-top-color: transparent;

  205. }

  206. .lift-graph-graph .detail .item.top:before {

  207.   top: -1.2em;

  208.   border-width: 0.6em;

  209.   border-bottom-color: #ccc;

  210. }

  211. .lift-graph-graph .detail .item.top:after {

  212.   top: -1em;

  213.   border-bottom-color: #fff;

  214. }

  215. .lift-graph-graph .detail .dot {

  216.   width: .5em;

  217.   height: .5em;

  218.   margin-top: -.35em;

  219.   margin-left: -.35em;

  220.   line-height: .5em;

  221.   border-width: .2em;

  222.   border-radius: 50%;

  223.   box-shadow: none;

  224. }

  225. html[dir="rtl"] .lift-graph-graph .detail .dot {

  226.   margin-right: -.35em;

  227.   margin-left: auto;

  228. }

  229. .lift-graph .label-below .title {

  230.   bottom: -1.8em;

  231.   width: 6em;

  232.   margin-left: -3em;

  233.   text-align: center;

  234.   font-size: .88em;

  235.   font-family: inherit;

  236.   white-space: nowrap;

  237.   opacity: 1;

  238.   color: #666;

  239. }

  240. .lift-graph-axis-x {

  241.   clear: both;

  242.   width: 100%;

  243. }

  244. .lift-graph-axis-x .rickshaw_graph {

  245.   max-width: 100%;

  246. }

  247. .lift-graph-axis-y {

  248.   float: left;

  249.   clear: left;

  250.   width: 5em;

  251.   height: 20em;

  252.   margin-left: -5em;

  253. }

  254. html[dir="rtl"] .lift-graph-axis-y {

  255.   float: right;

  256.   margin-right: -5em;

  257.   margin-left: auto;

  258. }

  259. .lift-graph-legend {

  260.   clear: both;

  261.   background-color: transparent;

  262.   color: #333;

  263. }

  264. .lift-graph-legend li {

  265.   display: inline-block;

  266. }

  267. .lift-graph-legend .line .swatch {

  268.   border-radius: 50%;

  269. }

  270. .lift-graph-detail {

  271.   pointer-events: auto;

  272.   width: 100%;

  273.   max-width: 100%;

  274.   overflow-x: auto;

  275. }

  276. .lift-graph-detail-data {

  277.   margin: 0;

  278.   border: none;

  279.   border-collapse: collapse;

  280.   border-spacing: 0;

  281.   font-size: 1em;

  282. }

  283. .inactive .lift-graph-detail {

  284.   pointer-events: none;

  285. }

  286. .lift-graph-detail tbody,

  287. .lift-graph-detail thead {

  288.   border: none;

  289. }

  290. .lift-graph-detail th,

  291. .lift-graph-detail td {

  292.   padding: .2em .5em;

  293.   text-align: left;

  294.   background: none;

  295. }

  296. html[dir="rtl"] .lift-graph-detail th, html[dir="rtl"]

  297. .lift-graph-detail td {

  298.   text-align: right;

  299. }

  300. .lift-graph-detail th, .lift-graph-detail th:first-child, .lift-graph-detail th:last-child,

  301. .lift-graph-detail td,

  302. .lift-graph-detail td:first-child,

  303. .lift-graph-detail td:last-child {

  304.   border: none;

  305. }

  306. .lift-graph-detail th {

  307.   text-transform: none;

  308. }

  309. .lift-graph-detail [style^="background-color"] {

  310.   color: #fff;

  311.   font-weight: normal;

  312. }

  313. html[dir] .lift-graph-detail [style^="background-color"] {

  314.   text-align: center;

  315. }

  316. .lift-graph-detail .active {

  317.   background-color: #eee;

  318. }

  319. .lift-graph-result {

  320.   width: 100%;

  321.   max-width: 100%;

  322.   overflow-x: auto;

  323. }

  324. .lift-graph-result-data {

  325.   width: 100%;

  326.   max-width: 100%;

  327.   margin: 1.3em 0;

  328.   border-color: #ccc;

  329.   border-collapse: collapse;

  330.   font-size: .88em;

  331. }

  332. .lift-graph-result th,

  333. .lift-graph-result td {

  334.   text-align: left;

  335. }

  336. html[dir="rtl"] .lift-graph-result th, html[dir="rtl"]

  337. .lift-graph-result td {

  338.   text-align: right;

  339. }

  340. .lift-graph-result th:last-child,

  341. .lift-graph-result td:last-child {

  342.   text-align: center;

  343. }

  344. .lift-graph-result td.acquia-lift-ab-winner {

  345.   max-width: 20%;

  346.   width: 150px;

  347.   background: #eee;

  348. }

  349. .lift-graph-result .action {

  350.   margin-right: .6em;

  351.   cursor: pointer;

  352. }

  353. html[dir="rtl"] .lift-graph-result .action {

  354.   margin-right: auto;

  355.   margin-left: .6em;

  356. }

  357. .lift-graph-result .swatch {

  358.   display: inline-block;

  359.   width: .9em;

  360.   height: .9em;

  361.   margin-right: .6em;

  362.   border-radius: 50%;

  363. }

  364. html[dir="rtl"] .lift-graph-result .swatch {

  365.   margin-right: auto;

  366.   margin-left: .6em;

  367. }

  368. .lift-graph-result .label {

  369.   display: inline-block;

  370.   margin-right: .2em;

  371.   font-weight: bold;

  372. }

  373. html[dir="rtl"] .lift-graph-result .label {

  374.   margin-right: auto;

  375.   margin-left: .2em;

  376. }

  377. .lift-graph-result .toggle-enabled .line {

  378.   cursor: pointer;

  379. }

  380. .lift-graph-result .toggle-enabled .line.disabled .action {

  381.   opacity: .4;

  382. }

  383. 

  384. .lift-graph-range-slider {

  385.   clear: both;

  386.   margin-right: 2.5em;

  387.   margin-left: 2.5em;

  388.   width: auto !important;

  389. }

  390. 

  391. .acquia-lift-handle-value {

  392.   position: absolute;

  393.   width: 5em;

  394.   top: -2.6em;

  395.   left: 50%;

  396.   margin-left: -2.5em;

  397.   padding-top: .3em;

  398.   padding-bottom: .2em;

  399.   font-size: .88em;

  400.   font-weight: normal;

  401.   line-height: 1.4;

  402.   background-color: #fff;

  403.   border: 0.1em solid #ccc;

  404.   border-radius: .2em;

  405.   color: #333;

  406.   text-align: center;

  407.   text-decoration: none;

  408. }

  409. .acquia-lift-handle-value:after {

  410.   content: "";

  411.   display: block;

  412.   position: absolute;

  413.   border: 0.5em solid transparent;

  414.   border-top-color: #ccc;

  415.   bottom: -0.9em;

  416.   left: 50%;

  417.   margin-left: -0.5em;

  418. }