You are here

Home » API reference » AT Tools 8.3

grid-4x4.css in AT Tools 8.3

Same filename in this branch
  1. 8.3 at_theme_generator/starterkits/starterkit/layout/plugin-layout-flex/css/grid-4x4.css
  2. 8.3 at_theme_generator/starterkits/starterkit/layout/plugin-layout-float/css/grid-4x4.css
.atl__lr {
  margin: 0 -0.625em;
}

.atl__lc {
  padding: 0 0.625em;
  width: 100%;
}

.atl:before, .atl:after {
  content: " ";
  display: table;
}

.atl:after {
  clear: both;
}

.bp--at-core-simple-tablet-isolate .atl--grid-4x4 > .atl__cw > .atl__lc {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  float: left;
}

.bp--at-core-simple-tablet-isolate .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(2n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}

.bp--at-core-simple-tablet-isolate .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(2n + 2) {
  margin-left: 50%;
  margin-right: -100%;
  clear: none;
}

.bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25%;
  float: left;
}

.bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}

.bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 2) {
  margin-left: 25%;
  margin-right: -100%;
  clear: none;
}

.bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 3) {
  margin-left: 50%;
  margin-right: -100%;
  clear: none;
}

.bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 4) {
  margin-left: 75%;
  margin-right: -100%;
  clear: none;
}

File

at_theme_generator/starterkits/starterkit/layout/plugin-layout-float/css/grid-4x4.css
View source 
  1. .atl__lr {

  2.   margin: 0 -0.625em;

  3. }

  4. 

  5. .atl__lc {

  6.   padding: 0 0.625em;

  7.   width: 100%;

  8. }

  9. 

  10. .atl:before, .atl:after {

  11.   content: " ";

  12.   display: table;

  13. }

  14. 

  15. .atl:after {

  16.   clear: both;

  17. }

  18. 

  19. .bp--at-core-simple-tablet-isolate .atl--grid-4x4 > .atl__cw > .atl__lc {

  20.   -webkit-box-sizing: border-box;

  21.   box-sizing: border-box;

  22.   width: 50%;

  23.   float: left;

  24. }

  25. 

  26. .bp--at-core-simple-tablet-isolate .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(2n + 1) {

  27.   margin-left: 0;

  28.   margin-right: -100%;

  29.   clear: both;

  30.   margin-left: 0;

  31. }

  32. 

  33. .bp--at-core-simple-tablet-isolate .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(2n + 2) {

  34.   margin-left: 50%;

  35.   margin-right: -100%;

  36.   clear: none;

  37. }

  38. 

  39. .bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc {

  40.   -webkit-box-sizing: border-box;

  41.   box-sizing: border-box;

  42.   width: 25%;

  43.   float: left;

  44. }

  45. 

  46. .bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 1) {

  47.   margin-left: 0;

  48.   margin-right: -100%;

  49.   clear: both;

  50.   margin-left: 0;

  51. }

  52. 

  53. .bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 2) {

  54.   margin-left: 25%;

  55.   margin-right: -100%;

  56.   clear: none;

  57. }

  58. 

  59. .bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 3) {

  60.   margin-left: 50%;

  61.   margin-right: -100%;

  62.   clear: none;

  63. }

  64. 

  65. .bp--at-core-simple-wide .atl--grid-4x4 > .atl__cw > .atl__lc:nth-child(4n + 4) {

  66.   margin-left: 75%;

  67.   margin-right: -100%;

  68.   clear: none;

  69. }