1
0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
This commit is contained in:
Jenil Gogari 2017-04-02 02:05:23 -04:00
parent 6df149f291
commit 43ceac5805
8 changed files with 90 additions and 49 deletions

69
dist/chota.css vendored
View File

@ -58,6 +58,7 @@ h6{
a{
color:var(--primary-color);
text-decoration:none;
}
a:hover:not(.button){
@ -132,6 +133,7 @@ pre{
pre code{
background:none;
padding:0;
}
abbr[title]{
@ -168,57 +170,67 @@ fieldset,iframe{
}
.col,[class*=" col-"],[class^=col-]{
margin-bottom:var(--grid-gutter);
margin-left:calc(var(--grid-gutter) / 2);
margin-right:calc(var(--grid-gutter) / 2);
margin:0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
}
.col-1{
width:calc((100% / (12/1)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width:calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2{
width:calc((100% / (12/2)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width:calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3{
width:calc((100% / (12/3)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width:calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4{
width:calc((100% / (12/4)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width:calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5{
width:calc((100% / (12/5)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width:calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6{
width:calc((100% / (12/6)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width:calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7{
width:calc((100% / (12/7)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width:calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8{
width:calc((100% / (12/8)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width:calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9{
width:calc((100% / (12/9)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width:calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10{
width:calc((100% / (12/10)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width:calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11{
width:calc((100% / (12/11)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width:calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12{
width:calc((100% / (12/12)) - var(--grid-gutter));
flex:0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width:calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width:768px){
@ -227,7 +239,8 @@ fieldset,iframe{
}
.col,[class*=" col-"],[class^=col-]{
flex-basis:100%;
flex:0 1 100%;
max-width:100%;
}
}
@ -302,6 +315,7 @@ select{
border:none;
font-size:1.5rem;
line-height:1;
text-align:center;
transition:all .2s ease;
text-decoration:none;
transform:scale(1);
@ -321,7 +335,7 @@ select{
transform:scale(.98);
}
input[disabled]{
button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
opacity:.4;
cursor:not-allowed;
}
@ -393,20 +407,14 @@ input[disabled]{
}
.nav .brand,.nav a{
text-decoration:none;
display:flex;
align-items:center;
}
.nav a{
text-decoration:none;
cursor:pointer;
}
.card,.nav a{
padding:1rem 2rem;
padding:0 2rem;
}
.card{
padding:1rem 2rem;
border-radius:4px;
box-shadow:0 0 2px rgba(0,0,0,.4);
}
@ -433,6 +441,7 @@ input[disabled]{
}
.tabs>a.active,.tabs>a:hover{
opacity:1;
border-bottom:2px solid #555;
}
@ -513,6 +522,14 @@ input[disabled]{
width:100%;
}
.is-paddingless{
padding:0 !important;
}
.is-marginless{
margin:0 !important;
}
.clearfix{
content:"";
display:table;

2
dist/chota.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -63,6 +63,7 @@ h6 {
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover:not(.button) {
@ -139,6 +140,7 @@ pre {
pre code {
background: none;
padding: 0;
}
abbr[title] {

View File

@ -83,6 +83,7 @@ button {
border: none;
font-size: 1.5rem;
line-height: 1;
text-align: center;
transition: all 0.2s ease;
text-decoration: none;
transform: scale(1);
@ -110,7 +111,10 @@ button:active {
transform: scale(0.98);
}
input[disabled] {
input[disabled],
button[disabled],
input[disabled]:hover,
button[disabled]:hover {
opacity: 0.4;
cursor: not-allowed;
}

View File

@ -20,57 +20,67 @@
.col,
[class*=" col-"],
[class^='col-'] {
margin-bottom: var(--grid-gutter);
margin-left: calc(var(--grid-gutter) / 2);
margin-right: calc(var(--grid-gutter) / 2);
margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
}
.col-1 {
width: calc((100% / (12/1)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2 {
width: calc((100% / (12/2)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3 {
width: calc((100% / (12/3)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4 {
width: calc((100% / (12/4)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5 {
width: calc((100% / (12/5)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6 {
width: calc((100% / (12/6)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7 {
width: calc((100% / (12/7)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8 {
width: calc((100% / (12/8)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9 {
width: calc((100% / (12/9)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10 {
width: calc((100% / (12/10)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11 {
width: calc((100% / (12/11)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12 {
width: calc((100% / (12/12)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width: 768px) {
@ -81,6 +91,7 @@
.col,
[class*=" col-"],
[class^='col-'] {
flex-basis: 100%;
flex: 0 1 100%;
max-width: 100%;
}
}

View File

@ -45,15 +45,13 @@
}
.nav .brand {
display: flex;
align-items: center;
margin: 0;
}
.nav a {
.nav a,
.nav .brand {
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
padding: 1rem 2rem;
padding: 0 2rem;
}

View File

@ -16,6 +16,7 @@
.tabs > a.active,
.tabs > a:hover {
opacity: 1;
border-bottom: 2px solid #555;
}

View File

@ -72,6 +72,14 @@
width: 100%;
}
.is-paddingless {
padding: 0 !important;
}
.is-marginless {
margin: 0 !important;
}
.clearfix {
content: "";
display: table;