Skip to content

Luciano Barletta / mini-web

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 763035d4 by Georgina Mondino
Options

Numeros Tab e Input

1 parent 7812463d
Inline Side-by-side
Showing 2 changed files with 50 additions and 9 deletions
Style/Templates.css
...@@ -18,24 +18,36 @@ body{ ...@@ -18,24 +18,36 @@ body{
padding: 2%; padding: 2%;
border-radius: 2px; border-radius: 2px;
} }
.TabTitle{ .TabTitle, .TabNumber{
color: grey;
margin-bottom: 5%; margin-bottom: 5%;
font-size: 30px; font-size: 30px;
width: 94%; width: 84%;
text-align: left; text-align: left;
border:none; border:none;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
} }
.TabNumber{
width: 10%;
}
.InputContainer{ .InputContainer{
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.Input{ .InputNumber{
width: 5%;
}
.Input,.InputNumber{
color: grey;
border:none; border:none;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
width: 25%; width: 25%;
margin: 1%; margin: 1%;
} }
.InputNumber{
width: 5%;
}
.NewTabButton, .NewInputButton, .RemoveInputButton, .RemoveTabButton{ .NewTabButton, .NewInputButton, .RemoveInputButton, .RemoveTabButton{
text-align: center; text-align: center;
margin: auto; margin: auto;
...@@ -86,16 +98,21 @@ body{ ...@@ -86,16 +98,21 @@ body{
border-radius: 5px; border-radius: 5px;
} }
@media ( max-width: 900px) { @media ( max-width: 1050px) {
.TabNumber{
width: 10%;
}
.TabTitle{ .TabTitle{
width: 90%; width: 80%;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.TabNumber{
width: 10%;
}
.TabTitle{ .TabTitle{
width: 85%; width:75%;
} }
.RemoveInputButton{ .RemoveInputButton{
width: 30px; width: 30px;
...@@ -107,7 +124,28 @@ body{ ...@@ -107,7 +124,28 @@ body{
height: 30px; height: 30px;
} }
.Input{ .Input{
width: 20%; width: 16%;
margin: 1%; margin: none;
}
}
@media ( max-width: 350px) {
.TabNumber{
width: 10%;
}
.TabTitle{
width:70%;
}
.RemoveInputButton{
width: 30px;
height: 30px;
}
.RemoveTabButton{
width: 30px;
height: 30px;
}
.Input{
width: 15%;
margin: 0%;
} }
} }
\ No newline at end of file \ No newline at end of file
generate.html
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
<!-- templates --> <!-- templates -->
<template id="tabTemplate"> <template id="tabTemplate">
<div class="TabCards"> <div class="TabCards">
<input type="number" class="TabNumber" value="01">
<input class="TabTitle" placeholder="Titulo del Tab" type="text"> <input class="TabTitle" placeholder="Titulo del Tab" type="text">
<button class="RemoveTabButton" onclick="removeTab(this)"> <button class="RemoveTabButton" onclick="removeTab(this)">
X X
...@@ -42,6 +43,8 @@ ...@@ -42,6 +43,8 @@
<template id="fieldTemplate"> <template id="fieldTemplate">
<div class="InputContainer"> <div class="InputContainer">
<input type="number" class="InputNumber" value="01">
<input type="text" id="Titulo" class="Input" placeholder="Título"> <input type="text" id="Titulo" class="Input" placeholder="Título">
<select name="input" class="Input"> <select name="input" class="Input">
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!