v2.0.4-beta
This commit is contained in:
54
assets/html/0021_sticky.html
Normal file
54
assets/html/0021_sticky.html
Normal file
@ -0,0 +1,54 @@
|
||||
<div id="columna_sticky">
|
||||
<div class="ui container">
|
||||
<div class="ui grid">
|
||||
<div class="left column" id="column"></div>
|
||||
<div class="right column">
|
||||
<div class="ui sticky">
|
||||
<form class="ui form">
|
||||
<div class="ui grid">
|
||||
<div class="row">
|
||||
<div class="ten wide column">
|
||||
<div class="titulo">
|
||||
STAND
|
||||
</div>
|
||||
<div class="precio">$ 5.990</div>
|
||||
<div class="colores">
|
||||
<input type="hidden" name="color" value="azul" />
|
||||
<span class="text">COLOR</span>
|
||||
<br />
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue circle"></div>
|
||||
<div class="petrol circle"></div>
|
||||
<div class="cyan circle"></div>
|
||||
<div class="green circle"></div>
|
||||
<div class="yellow circle"></div>
|
||||
<div class="orange circle"></div>
|
||||
<div class="red circle"></div>
|
||||
</div>
|
||||
<div class="input cantidad">
|
||||
<button class="minus" type="button">
|
||||
<i class="minus icon"></i>
|
||||
</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<div class="ui image">
|
||||
<img src="./assets/images/fotos/azul/left.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sixteen wide column">
|
||||
<button class="ui button">AGREGAR AL CARRO</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,29 +1,5 @@
|
||||
<header id="header">
|
||||
<div class="ui container">
|
||||
<nav id="menu" class="ui borderless sticky menu" role="navigation" aria-label="navigation">
|
||||
<div class="left menu item">
|
||||
<div class="ui simple dropdown">
|
||||
<div class="text">
|
||||
<i class="bars icon"></i>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<a class="item" href="./">Inicio</a>
|
||||
<a class="item" href="#ventajas">Ventajas</a>
|
||||
<a class="item" href="#dimensiones">Dimensiones</a>
|
||||
<a class="item" href="#corporativos">Corporativos</a>
|
||||
<a class="item" href="#testimonios">Testimonios</a>
|
||||
<a class="item" href="#contacto">Contacto</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right menu">
|
||||
<a class="item" href="#contacto">
|
||||
<i class="shopping cart icon">
|
||||
<div class="cantidad">0</div>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="ui center aligned basic segment">
|
||||
<div id="logo">
|
||||
<img src="./assets/images/logo.svg" />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section id="descripcion">
|
||||
<section id="descripcion" class="columna">
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
<div class="images">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section id="ventajas">
|
||||
<section id="ventajas" class="columna">
|
||||
<div class="diagonal"></div>
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="ui two columns stackable middle aligned grid">
|
||||
<div class="column">
|
||||
<div class="gallery">
|
||||
<div class="ui large image">
|
||||
<div class="ui large image agrandable">
|
||||
<img src="./assets/images/galeria/foto1.jpg" />
|
||||
</div>
|
||||
<div class="nav left">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section id="dimensiones">
|
||||
<section id="dimensiones" class="columna">
|
||||
<div class="fondo-gris"></div>
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
@ -30,17 +30,17 @@
|
||||
</div>
|
||||
<div class="row fotos">
|
||||
<div class="five wide column">
|
||||
<div class="ui image">
|
||||
<img src="./assets/images/fotos/azul/left-small.jpg" class="left-small" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<div class="ui image">
|
||||
<div class="ui image agrandable">
|
||||
<img src="./assets/images/fotos/azul/left.jpg" class="left" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<div class="ui image">
|
||||
<div class="ui image agrandable">
|
||||
<img src="./assets/images/fotos/azul/center.jpg" class="center" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<div class="ui image agrandable">
|
||||
<img src="./assets/images/fotos/azul/right.jpg" class="right" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section id="construidos">
|
||||
<section id="construidos" class="columna">
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
<div class="titulo">
|
||||
|
||||
26
assets/html/010_nav.html
Normal file
26
assets/html/010_nav.html
Normal file
@ -0,0 +1,26 @@
|
||||
<nav id="menu" class="ui borderless top fixed menu" role="navigation" aria-label="navigation">
|
||||
<div class="ui container">
|
||||
<div class="left menu item">
|
||||
<div class="ui simple dropdown">
|
||||
<div class="text">
|
||||
<i class="bars icon"></i>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<a class="item" href="./">Inicio</a>
|
||||
<a class="item" href="#ventajas">Ventajas</a>
|
||||
<a class="item" href="#dimensiones">Dimensiones</a>
|
||||
<a class="item" href="#corporativos">Corporativos</a>
|
||||
<a class="item" href="#testimonios">Testimonios</a>
|
||||
<a class="item" href="#contacto">Contacto</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right menu">
|
||||
<a class="item" href="#contacto">
|
||||
<i class="shopping cart icon">
|
||||
<div class="cantidad">0</div>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
7
assets/html/011_modal_images.html
Normal file
7
assets/html/011_modal_images.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="ui modal" id="images">
|
||||
<div class="header">
|
||||
<i class="close icon"></i>
|
||||
</div>
|
||||
<div class="content image">
|
||||
</div>
|
||||
</div>
|
||||
@ -9,31 +9,31 @@ let available_colors = {
|
||||
},
|
||||
blue: {
|
||||
name: 'azul',
|
||||
rgb: 'rgb(0, 0, 255)'
|
||||
rgb: 'rgb(0, 110, 230)'
|
||||
},
|
||||
petrol: {
|
||||
name: 'petroleo',
|
||||
rgb: 'rgb(0, 0, 150)'
|
||||
name: 'azul_petroleo',
|
||||
rgb: 'rgb(0, 80, 120)'
|
||||
},
|
||||
cyan: {
|
||||
name: 'celeste',
|
||||
rgb: 'rgb(150, 150, 255)'
|
||||
rgb: 'rgb(80, 200, 255)'
|
||||
},
|
||||
green: {
|
||||
name: 'verde',
|
||||
rgb: 'rgb(0, 255, 0)'
|
||||
rgb: 'rgb(10, 200, 100)'
|
||||
},
|
||||
yellow: {
|
||||
name: 'amarillo',
|
||||
rgb: 'rgb(255, 255, 0)'
|
||||
rgb: 'rgb(255, 240, 70)'
|
||||
},
|
||||
orange: {
|
||||
name: 'naranjo',
|
||||
rgb: 'rgb(255, 130, 0)'
|
||||
rgb: 'rgb(255, 130, 70)'
|
||||
},
|
||||
red: {
|
||||
name: 'rojo',
|
||||
rgb: 'rgb(255, 0, 0)'
|
||||
rgb: 'rgb(255, 20, 50)'
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@ class Colors {
|
||||
this.input = elem.find('input[name="color"]')
|
||||
this.changing = null
|
||||
if (changing) {
|
||||
this.changing = elem.parent().parent().find('.column2 img')
|
||||
this.changing = elem.parent().parent().find('.column img')
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
@ -143,7 +143,7 @@ class Colors {
|
||||
})
|
||||
this.elem.find('.' + color + '.circle').addClass('selected')
|
||||
if (this.changing != null) {
|
||||
this.changing.attr('src', './assets/images/' + this.picked + '.png')
|
||||
this.changing.attr('src', './assets/images/fotos/' + this.picked + '/left.jpg')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -198,7 +198,8 @@ let dimensiones = {
|
||||
setup: function() {
|
||||
this.elem.find('.colores .circle').each((i, el) => {
|
||||
let color = $(el).attr('class').split(' ')[0]
|
||||
if (color == 'petrol' || color == 'cyan') {
|
||||
let cssColor = $(el).css('background-color')
|
||||
if (cssColor != this.colors[color]['rgb']) {
|
||||
$(el).css('background-color', this.colors[color]['rgb'])
|
||||
}
|
||||
$(el).click((e) => {
|
||||
@ -412,15 +413,49 @@ let testimonios = {
|
||||
}
|
||||
}
|
||||
|
||||
let sticky = {
|
||||
elem: $('#columna_sticky'),
|
||||
setup: function() {
|
||||
var h = 0
|
||||
$('section.columna').each((i, el) => {
|
||||
h += $(el).outerHeight(true)
|
||||
})
|
||||
this.elem.height(h)
|
||||
this.elem.find('#column').height(h)
|
||||
|
||||
$('#columna_sticky .sticky').sticky({
|
||||
context: '#column'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let image = {
|
||||
elem: $('.agrandable'),
|
||||
modal: $('#images.modal'),
|
||||
setup: function() {
|
||||
this.modal.modal()
|
||||
this.modal.find('.close.icon').click((e) => {
|
||||
this.modal.modal('hide')
|
||||
this.modal.find('.image').html('')
|
||||
})
|
||||
let p = this
|
||||
this.elem.click(function(e) {
|
||||
let img = $(this).find('img').attr('src')
|
||||
p.modal.find('.image').html('')
|
||||
p.modal.find('.image').append(
|
||||
$('<img />').attr('src', img)
|
||||
)
|
||||
p.modal.modal('show')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#menu.sticky').sticky()
|
||||
$('.column2 .sticky').sticky({
|
||||
context: '#column'
|
||||
})
|
||||
$('#subir').sticky()
|
||||
|
||||
$('.shopping.cart').innerText = 0
|
||||
|
||||
sticky.setup()
|
||||
ventajas.setup()
|
||||
dimensiones.setup()
|
||||
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||
@ -430,6 +465,7 @@ $(document).ready(function() {
|
||||
let cotiza_color = new Colors($('#corporativos .colores'))
|
||||
cotiza_form.setup()
|
||||
conversemos_form.setup()
|
||||
image.setup()
|
||||
|
||||
window.mobileCheck = function() {
|
||||
let check = false;
|
||||
|
||||
@ -1,8 +1,43 @@
|
||||
@import 'header';
|
||||
@import 'descripcion';
|
||||
@import 'ventajas';
|
||||
@import 'dimensiones';
|
||||
@import 'construidos';
|
||||
@import 'corporativos';
|
||||
@import 'testimonios';
|
||||
@import 'contacto';
|
||||
@import 'common/header';
|
||||
@import 'common/descripcion';
|
||||
@import 'common/ventajas';
|
||||
@import 'common/dimensiones';
|
||||
@import 'common/construidos';
|
||||
@import 'common/corporativos';
|
||||
@import 'common/testimonios';
|
||||
@import 'common/contacto';
|
||||
@import 'common/nav';
|
||||
@import 'common/image_modal';
|
||||
|
||||
.white.circle {
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.black.circle {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
.blue.circle {
|
||||
background-color: rgb(0, 110, 230);
|
||||
}
|
||||
.petrol.circle {
|
||||
background-color: rgb(0, 80, 120);
|
||||
}
|
||||
.cyan.circle {
|
||||
background-color: rgb(80, 200, 255);
|
||||
}
|
||||
.green.circle {
|
||||
background-color: rgb(10, 200, 100);
|
||||
}
|
||||
.yellow.circle {
|
||||
background-color: rgb(255, 240, 70);
|
||||
}
|
||||
.orange.circle {
|
||||
background-color: rgb(255, 130, 70);
|
||||
}
|
||||
.red.circle {
|
||||
background-color: rgb(255, 20, 50);
|
||||
}
|
||||
|
||||
.column:not(.row) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
@ -16,28 +16,6 @@
|
||||
margin-right: rem(3);
|
||||
}
|
||||
|
||||
.white {
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.black {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
.green {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
.yellow {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
.orange {
|
||||
background-color: rgb(255, 130, 0);
|
||||
}
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
.circle {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
#header {
|
||||
background-image: $fondo_cabezal;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
color: $blanco;
|
||||
|
||||
.container {
|
||||
#menu {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
position: relative;
|
||||
color: $blanco;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.segment {
|
||||
margin: 0 !important;
|
||||
#logo {
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,8 @@
|
||||
@import 'wide/corporativos';
|
||||
@import 'wide/testimonios';
|
||||
@import 'wide/contacto';
|
||||
@import 'wide/sticky';
|
||||
@import 'wide/nav';
|
||||
|
||||
.left.column {
|
||||
width: 67% !important;
|
||||
@ -25,291 +27,3 @@ section .titulo {
|
||||
body {
|
||||
color: $gris_standard;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: rem($full_width) !important;
|
||||
height: ($content_height)+rem;
|
||||
|
||||
position: relative;
|
||||
top: (-$content_height)+rem;
|
||||
|
||||
&>.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
&>.column1 {
|
||||
width: percentage($column1/100);
|
||||
}
|
||||
&>.column2 {
|
||||
width: percentage($column2/100);
|
||||
height: ($column_height1)+rem;
|
||||
|
||||
.sticky {
|
||||
height: rem(265);
|
||||
width: rem(310);
|
||||
margin: auto;
|
||||
|
||||
.row:first-child {
|
||||
height: rem(170);
|
||||
margin-top: rem(80);
|
||||
|
||||
.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.column1 {
|
||||
vertical-align: bottom;
|
||||
padding-top: rem(20);
|
||||
width: rem(310*2/3);
|
||||
|
||||
.linea {
|
||||
margin-bottom: rem(10);
|
||||
}
|
||||
|
||||
.titulo {
|
||||
font-size: font_size(25);
|
||||
}
|
||||
.precio {
|
||||
font-size: font_size(16);
|
||||
}
|
||||
font-size: font_size(14);
|
||||
|
||||
@include colors;
|
||||
.input {
|
||||
width: 4.5rem;
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: font_size(10);
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column2 {
|
||||
width: rem(310/3);
|
||||
|
||||
img {
|
||||
width: rem(110);
|
||||
height: rem(160);
|
||||
}
|
||||
}
|
||||
}
|
||||
.row:last-child {
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#felices {
|
||||
height: (map.get($heights, "felices"))+rem;
|
||||
|
||||
padding: 0 1rem !important;
|
||||
padding-top: rem(60) !important;
|
||||
|
||||
.header {
|
||||
//margin-top: rem(60);
|
||||
font-size: font_size(22);
|
||||
}
|
||||
.testimonios {
|
||||
margin-top: rem(25);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
|
||||
.testimonio {
|
||||
height: rem(80);
|
||||
color: #666667;
|
||||
margin-top: rem(20);
|
||||
width: percentage(30/100);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #666667;
|
||||
}
|
||||
}
|
||||
|
||||
#formulario {
|
||||
height: (map.get($heights, "formulario"))+rem;
|
||||
|
||||
padding: 0 1rem !important;
|
||||
|
||||
.whatsapp-link {
|
||||
color: inherit;
|
||||
}
|
||||
&>.column {
|
||||
float: left;
|
||||
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
&>.flotante {
|
||||
position: absolute;
|
||||
top: rem(183);
|
||||
margin: auto;
|
||||
left: 40%;
|
||||
width: rem($full_width/5);
|
||||
text-align: center;
|
||||
|
||||
&>.content {
|
||||
width: rem(130);
|
||||
margin: auto;
|
||||
left: -50%;
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: rem(5) 0;
|
||||
}
|
||||
div.whatsapp {
|
||||
height: rem(30);
|
||||
background-color: #1a9947;
|
||||
color: #fff;
|
||||
font-size: rem(10);
|
||||
|
||||
&>i {
|
||||
position: relative;
|
||||
font-size: font_size(16);
|
||||
top: rem(3);
|
||||
}
|
||||
}
|
||||
.rrss {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: rem(20);
|
||||
|
||||
i.inverted.grey {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.column1 {
|
||||
width: percentage($column1/100);
|
||||
margin-top: rem(27);
|
||||
|
||||
&>img {
|
||||
width: rem(540);
|
||||
height: rem(350);
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&>.column2 {
|
||||
width: percentage($column2/100);
|
||||
|
||||
.header {
|
||||
margin-top: rem(20);
|
||||
text-align: center;
|
||||
font-size: font_size(22);
|
||||
|
||||
.whatsapp-link {
|
||||
display: inline-block;
|
||||
width: rem(25);
|
||||
height: rem(25);
|
||||
font-size: font_size(25);
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: rem(25);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
form {
|
||||
input {
|
||||
border-radius: 0 !important;
|
||||
height: rem(18);
|
||||
margin-bottom: rem(9);
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
font-size: font_size(10);
|
||||
&::placeholder {
|
||||
color: $gris_standard;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border-radius: 0 !important;
|
||||
height: rem(72);
|
||||
margin-bottom: rem(25);
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
font-size: font_size(10);
|
||||
&::placeholder {
|
||||
color: $gris_standard;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
background-color: white;
|
||||
color: $gris_standard;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
background: none;
|
||||
|
||||
&.segment>.container {
|
||||
height: 100%;
|
||||
|
||||
&>.column1 {
|
||||
display: inline-block;
|
||||
width: ($column1)+rem;
|
||||
}
|
||||
&>.column2 {
|
||||
display: inline-block;
|
||||
width: ($column2)+rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.simple.segment {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&>.ui.grid {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.fondo-blanco {
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
|
||||
19
assets/sass/common/_header.scss
Normal file
19
assets/sass/common/_header.scss
Normal file
@ -0,0 +1,19 @@
|
||||
#header {
|
||||
background-image: $fondo_cabezal;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
color: $blanco;
|
||||
|
||||
.container {
|
||||
.segment {
|
||||
margin: 0 !important;
|
||||
#logo {
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
assets/sass/common/_image_modal.scss
Normal file
14
assets/sass/common/_image_modal.scss
Normal file
@ -0,0 +1,14 @@
|
||||
#images.modal {
|
||||
text-align: center;
|
||||
|
||||
.header {
|
||||
text-align: right;
|
||||
}
|
||||
.content {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
assets/sass/common/_nav.scss
Normal file
17
assets/sass/common/_nav.scss
Normal file
@ -0,0 +1,17 @@
|
||||
#menu {
|
||||
z-index: 100;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
position: relative;
|
||||
color: $blanco;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,10 @@
|
||||
#descripcion {
|
||||
height: (map.get($heights, "descripcion"))+rem;
|
||||
|
||||
background-position: left rem(112);
|
||||
background-size: 100% rem(110);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
padding-top: rem(100);
|
||||
margin-bottom: rem(25);
|
||||
|
||||
.images {
|
||||
.image {
|
||||
|
||||
@ -3,24 +3,4 @@
|
||||
|
||||
background-size: 160%;
|
||||
background-position: bottom rem(-40) center;
|
||||
|
||||
.container {
|
||||
#menu {
|
||||
i {
|
||||
font-size: font-size(24);
|
||||
}
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
font-size: font-size(12);
|
||||
font-family: $font_family;
|
||||
top: rem(-28);
|
||||
left: rem(3.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
17
assets/sass/wide/_nav.scss
Normal file
17
assets/sass/wide/_nav.scss
Normal file
@ -0,0 +1,17 @@
|
||||
#menu {
|
||||
i {
|
||||
font-size: font-size(24);
|
||||
}
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
font-size: font-size(12);
|
||||
font-family: $font_family;
|
||||
top: rem(-28);
|
||||
left: rem(3.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
69
assets/sass/wide/_sticky.scss
Normal file
69
assets/sass/wide/_sticky.scss
Normal file
@ -0,0 +1,69 @@
|
||||
#columna_sticky {
|
||||
position: absolute;
|
||||
top: (map.get($heights, 'cabezal'))+rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.left.column {
|
||||
pointer-events: none;
|
||||
}
|
||||
.sticky {
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
|
||||
z-index: 10;
|
||||
|
||||
margin-top: rem(40);
|
||||
padding-top: rem(54);
|
||||
|
||||
.row {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.column:first-child {
|
||||
vertical-align: bottom;
|
||||
padding-top: rem(20);
|
||||
|
||||
.titulo {
|
||||
font-size: font_size(25);
|
||||
}
|
||||
.precio {
|
||||
font-size: font_size(16);
|
||||
}
|
||||
font-size: font_size(14);
|
||||
|
||||
@include colors;
|
||||
.input.cantidad {
|
||||
width: 4.5rem;
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: font_size(10);
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user