picasso 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -3391,7 +3415,7 @@ body {
3391
3415
  &lt;/div&gt;</code></pre>
3392
3416
  <blockquote>
3393
3417
  <p>Notar que se utiliza la clase <code>first-&lt;size&gt;</code>.
3394
- La misma permite aplicar aplicar a una columna que no es primera como si lo fuera.
3418
+ La misma permite aplicar a una columna que no es primera como si lo fuera.
3395
3419
  Caso contrario la misma tendrá un margen izquierdo por defecto.
3396
3420
  </p>
3397
3421
  </blockquote>
@@ -3504,6 +3528,28 @@ body {
3504
3528
  &lt;div class=&quot;col3 pull3-large pull3-medium push3-small&quot;&gt;3&lt;/div&gt;
3505
3529
  &lt;div class=&quot;col3 pull9-large pull6-small&quot;&gt;4&lt;/div&gt;
3506
3530
  &lt;/div&gt;</code></pre>
3531
+ <h5>Ejemplo 4</h5>
3532
+ <p> Comportamiento esperado:
3533
+
3534
+ </p>
3535
+ <ul>
3536
+ <li>2 columnas de 6 unidades (orden inverso)</li>
3537
+ <li>Large: 2 columnas de 6 unidades (orden normal)</li>
3538
+ <li>Medium: 2 columnas de 6 unidades (orden inverso)</li>
3539
+ <li>Small: 2 columnas de 6 unidades (orden normal)</li>
3540
+ </ul>
3541
+ <div class="preview"> <div class="row-col">
3542
+ <div class="col6 push6 pull0-large push6-medium pull0-small">1</div>
3543
+ <div class="col6 pull6 push0-large pull6-medium push0-small">2</div>
3544
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
3545
+ &lt;div class=&quot;col6 push6 pull0-large push6-medium pull0-small&quot;&gt;1&lt;/div&gt;
3546
+ &lt;div class=&quot;col6 pull6 push0-large pull6-medium push0-small&quot;&gt;2&lt;/div&gt;
3547
+ &lt;/div&gt;</code></pre>
3548
+ <blockquote>
3549
+ <p>Notar que se utiliza la clase <code>push0-&lt;size&gt;</code>/<code>pull0-&lt;size&gt;</code>.
3550
+ La misma permite resetear el posicionamiento relativo a 0.
3551
+ </p>
3552
+ </blockquote>
3507
3553
  <h4>Centered</h4>
3508
3554
  <p> La grilla ofrece la posibilidad de posicionar una columna de manera centrada a trav&eacute;s de la clase <code>centered</code>.
3509
3555
  A su vez también se encuentran disponibles clases para el manejo ante diferentes resoluciones.
@@ -3686,6 +3732,14 @@ $grid-default-include-push: true !default;
3686
3732
  .#{$grid-default-column-class}0#{$grid-size}{
3687
3733
  display: none;
3688
3734
  }
3735
+
3736
+ //Clase para resetear push/pull
3737
+ .#{$grid-default-push-class}0#{$grid-size},
3738
+ .#{$grid-default-push-class}0#{$grid-size}:first-child,
3739
+ .#{$grid-default-pull-class}0#{$grid-size},
3740
+ .#{$grid-default-pull-class}0#{$grid-size}:first-child{
3741
+ left: 0;
3742
+ }
3689
3743
 
3690
3744
  //Clase para columnas centradas
3691
3745
  .#{$grid-default-centered-class}#{$grid-size},
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;
@@ -2133,6 +2133,12 @@ body {
2133
2133
  .row-col .col0 {
2134
2134
  display: none;
2135
2135
  }
2136
+ .row-col .push0,
2137
+ .row-col .push0:first-child,
2138
+ .row-col .pull0,
2139
+ .row-col .pull0:first-child {
2140
+ left: 0;
2141
+ }
2136
2142
  .row-col .centered,
2137
2143
  .row-col .centered:first-child {
2138
2144
  margin-left: auto;
@@ -2341,6 +2347,12 @@ body {
2341
2347
  .row-col .col0-small {
2342
2348
  display: none;
2343
2349
  }
2350
+ .row-col .push0-small,
2351
+ .row-col .push0-small:first-child,
2352
+ .row-col .pull0-small,
2353
+ .row-col .pull0-small:first-child {
2354
+ left: 0;
2355
+ }
2344
2356
  .row-col .centered-small,
2345
2357
  .row-col .centered-small:first-child {
2346
2358
  margin-left: auto;
@@ -2550,6 +2562,12 @@ body {
2550
2562
  .row-col .col0-medium {
2551
2563
  display: none;
2552
2564
  }
2565
+ .row-col .push0-medium,
2566
+ .row-col .push0-medium:first-child,
2567
+ .row-col .pull0-medium,
2568
+ .row-col .pull0-medium:first-child {
2569
+ left: 0;
2570
+ }
2553
2571
  .row-col .centered-medium,
2554
2572
  .row-col .centered-medium:first-child {
2555
2573
  margin-left: auto;
@@ -2759,6 +2777,12 @@ body {
2759
2777
  .row-col .col0-large {
2760
2778
  display: none;
2761
2779
  }
2780
+ .row-col .push0-large,
2781
+ .row-col .push0-large:first-child,
2782
+ .row-col .pull0-large,
2783
+ .row-col .pull0-large:first-child {
2784
+ left: 0;
2785
+ }
2762
2786
  .row-col .centered-large,
2763
2787
  .row-col .centered-large:first-child {
2764
2788
  margin-left: auto;