You are here

Home » API reference » AT Tools 8.2

threecol-3-6-3.css in AT Tools 8.2

Same filename in this branch
  1. 8.2 at_theme_generator/starterkits/starterkit/styles/layout_plugin_floats/css/threecol-3-6-3.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/layout_plugin_flex/css/threecol-3-6-3.css
  3. 8.2 at_theme_generator/starterkits/starterkit/layout/site-builder/css/threecol/threecol-3-6-3.css
  4. 8.2 at_theme_generator/starterkits/starterkit/layout/flex-builder/css/threecol/threecol-3-6-3.css
.atl__lr {
  margin: 0 -0.625em;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.atl__lc {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0 0.625em;
  width: 100%;
}

.bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:first-child,
.bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:first-child {
  width: 75%;
}

.bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:last-child,
.bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:last-child {
  width: 25%;
}

.bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:first-child,
.bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:first-child {
  width: 75%;
}

.bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:last-child,
.bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:last-child {
  width: 25%;
}

.bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--2-3 > .atl__cw > .atl__lc,
.bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--2-3 > .atl__cw > .atl__lc {
  width: 50%;
}

.bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:nth-child(2), .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:last-child {
  width: 50%;
}

.bp--at-core-simple-wide .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:first-child {
  width: 50%;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

.bp--at-core-simple-wide .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:nth-child(2) {
  width: 25%;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.bp--at-core-simple-wide .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:last-child {
  width: 25%;
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
}

File

at_theme_generator/starterkits/starterkit/styles/layout_plugin_flex/css/threecol-3-6-3.css
View source 
  1. .atl__lr {

  2.   margin: 0 -0.625em;

  3.   display: -webkit-flex;

  4.   display: -ms-flexbox;

  5.   display: flex;

  6.   -webkit-flex-wrap: wrap;

  7.       -ms-flex-wrap: wrap;

  8.           flex-wrap: wrap;

  9.   -webkit-flex-direction: row;

  10.       -ms-flex-direction: row;

  11.           flex-direction: row;

  12.   -webkit-justify-content: space-between;

  13.       -ms-flex-pack: justify;

  14.           justify-content: space-between;

  15. }

  16. 

  17. .atl__lc {

  18.   -webkit-flex: 0 0 auto;

  19.       -ms-flex: 0 0 auto;

  20.           flex: 0 0 auto;

  21.   padding: 0 0.625em;

  22.   width: 100%;

  23. }

  24. 

  25. .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:first-child,

  26. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:first-child {

  27.   width: 75%;

  28. }

  29. 

  30. .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:last-child,

  31. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-2 > .atl__cw > .atl__lc:last-child {

  32.   width: 25%;

  33. }

  34. 

  35. .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:first-child,

  36. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:first-child {

  37.   width: 75%;

  38. }

  39. 

  40. .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:last-child,

  41. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--1-3 > .atl__cw > .atl__lc:last-child {

  42.   width: 25%;

  43. }

  44. 

  45. .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-ac--2-3 > .atl__cw > .atl__lc,

  46. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-ac--2-3 > .atl__cw > .atl__lc {

  47.   width: 50%;

  48. }

  49. 

  50. .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:nth-child(2), .bp--at-core-simple-tablet-isolate .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:last-child {

  51.   width: 50%;

  52. }

  53. 

  54. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:first-child {

  55.   width: 50%;

  56.   -webkit-order: 2;

  57.       -ms-flex-order: 2;

  58.           order: 2;

  59. }

  60. 

  61. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:nth-child(2) {

  62.   width: 25%;

  63.   -webkit-order: 1;

  64.       -ms-flex-order: 1;

  65.           order: 1;

  66. }

  67. 

  68. .bp--at-core-simple-wide .atl--threecol-3-6-3.l-arc--3 > .atl__cw > .atl__lc:last-child {

  69.   width: 25%;

  70.   -webkit-order: 3;

  71.       -ms-flex-order: 3;

  72.           order: 3;

  73. }