Sistema de documentación y gestión de páginas Web para un entorno o proyecto Web.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
WMarkDown/Public/scss/WMarkDown.components.scss

487 lines
15 KiB

.wmarkdown{
// Checkbox y Radio Buttons.
label{&.checkbox,&.radio,&.tick{
display : inline-block;
cursor : pointer;
input{display : none;}
[data-icon]::before{margin : 0em;}
}}
// CodeBlocks.
.code-block{
display : block;
position : relative;
width : 80%;
height : auto;
margin-left : 10%;
font-size : .8em;
overflow : hidden;
box-sizing : border-box;
&[data-special=false]{max-height : 35em;}
&>ul{
position : absolute;
top : 0em;
left : 0em;
margin : 0em;
padding : 0em;
white-space : normal;
li{
display : inline-block;
margin : 0em .2em;
padding : .2em .8em;
background-color : mix($color-grey, $color-back, 20%);
vertical-align : middle;
border : $border-size solid $color-grey;
border-radius : .4em;
[data-i18n]{
display : none;
font-weight : 900;
&::after{
content : ":";
margin-right : .4em;
}
}
}
}
.lines{
position : relative;
top : 0em;
left : 0em;
overflow : hidden;
ol{
width : 100%;
margin : 0em;
margin-top : -.3em;
margin-left : 4em;
padding : 0em;
box-sizing : border-box;
li{
&:nth-child(2n){background-color : mix(#FFF, $color-back, 50%);}
&:nth-child(2n + 1){background-color : mix(#FFF, $color-back, 20%);}
}
}
}
.code-box{
position : absolute;
top : 3.2em;
left : 4em;
right : 0em;
max-height : 31em;
overflow : auto;
}
&>div{&,& *{font-family: $font-mono;}}
}
.header-file-note{
margin-top : 2em;
font-size : .85em;
color : $color-grey;
@for $i from 1 through 6{&+h#{$i}{margin-top : 0em;}}
}
.data-dictionary-item{
display : inline-block;
position : relative;
border-bottom : $border-size dotted;
cursor : help;
&[data-left=true]>.box{
left : auto;
right : 0em;
}
&[data-left=false]>.box{
left : 0em;
right : auto;
}
&[data-top=false]>.box{
top : auto;
bottom : 1em;
}
&[data-top=true]>.box{
top : 1em;
bottom : auto;
}
&[data-show=false]>.box{display : none;}
.box{
display : block;
position : absolute;
width : $dictionary-item-width;
height : auto;
max-height : $dictionary-item-height;
padding : .5em;
color : $color-fore;
font-weight : 400;
border : $border-size solid $color-fore;
background-color : mix(rgba(0, 0, 0, 0), $color-back, 5%);
overflow : hidden;
box-sizing : border-box;
border-radius : 1em;
box-shadow : .1em .1em .2em $color-fore;
&>span+span{display : block;}
}
.result{display : none;}
.description{
height : $dictionary-item-height - $dictionary-link-size - 2em;
text-align : center;
overflow : auto;
.paragraph{
display : block;
&+span{margin-top : 1em;}
}
}
.links{
height : $dictionary-link-size + 1.1em;
margin : .5em 0em;
text-align : center;
white-space : nowrap;
overflow-x : auto;
overflow-y : hidden;
&>a{
display : inline-block;
width : $dictionary-link-size;
height : $dictionary-link-size;
margin : 0em .5em;
border : $border-size solid $color-fore;
background-color : #FFF;
background-position : center center;
background-size : cover;
box-sizing : border-box;
border-radius : $dictionary-link-size * .5;
}
}
[data-site=wikipedia_org],[data-site=es_wikipedia_org],[data-site=en_wikipedia_org]{background-image : url('https://wikipedia.org/static/apple-touch/wikipedia.png');}
[data-site=git_a3do_net],[data-site=git_k3y_pw]{background-image : url('https://about.gitlab.com/ico/favicon-192x192.png');}
[data-site=youtube_com],[data-site=www_youtube_com]{background-image : url('https://www.youtube.com/s/desktop/c20c1e6c/img/favicon_144.png');}
[data-site=www_mediawiki_org]{background-image : url('https://www.mediawiki.org/static/apple-touch/mediawiki.png');}
[data-site=github_com]{background-image : url('https://github.com/fluidicon.png');}
}
.data-dictionary-table{
display : block;
position : relative;
fieldset{border : none;}
legend,tfoot,[data-field=i],[data-field=patterns],[data-field=results],.checkbox>[data-i18n]{display : none;}
[data-field=urls] li{
word-break : break-all;
word-wrap : break-word;
}
.search{
display : table;
width : 100%;
box-sizing : border-box;
&>*{
display : table-cell;
white-space : nowrap;
}
.field{&,input{
width : 100%;
box-sizing : border-box;
}}
&>label{
font-weight : 900;
&::after{
content : ":";
margin-right : .4em;
}
}
}
th,td{
width : 40%;
&[data-field=words]{width : 20%;}
}
td{padding : 1em .4em;}
thead,tbody{
display : block;
tr:not([data-visible=false]){display : table;}
&,tr{width : 100%;}
}
tbody{
max-height : 30em;
overflow : auto;
&>tr{
&:nth-child(2n + 1)>td{background-color : mix(#FFF, $color-back, 50%);}
&:nth-child(2n)>td{background-color : mix(#FFF, $color-back, 20%);}
&:hover>td{background-color : mix(#FFF, $color-back, 75%);}
}
}
}
.multimedia-box{
display : inline-block;
position : relative;
width : 100%;
text-align : center;
// [data-type]>a,.image-style{display : none;}
[data-type=image],[data-type=images]{
img,a{display : none;}
.image-style{
display : inline-block;
width : 100%;
height : 100%;
background-position : center center;
background-repeat : no-repeat;
background-size : contain;
}
}
video{
width : auto;
width : 100%;
}
[data-type=audio]{
min-width : 10em;
&>.multimedia-box[data-multiple=false]>span{
left : 0em;
width : 100%;
}
a{display : none;}
}
audio{
position : absolute;
top : 100%;
left : 10%;
width : 80%;
margin-top : -6em;
box-sizing : border-box;
z-index : 20;
opacity : .7;
}
.text{
position : absolute;
bottom : 0em;
left : 0em;
width : 100%;
margin : .5em;
text-align : center;
text-shadow :
0em 0em .1em $color-fore,
0em 0em .075em $color-fore,
0em 0em .05em $color-back,
0em 0em .025em $color-back;
}
[data-type]{
display : inline-block;
position : relative;
margin : 1em;
}
&[data-multiple=true]{
&>span{
width : 25%;
height : 10em;
}
}
&[data-multiple=false]{
&>span{
width : 80%;
height : 25em;
text-align : center;
}
}
&[data-multiple]>[data-links-count]{height : auto;}
&[data-multiple] [data-platform]{
display : inline-block;
position : relative;
width : 20em;
height : 10em;
margin : .5em;
}
.multimedia-box{[data-type]{
position : absolute;
top : 0em;
left : 0em;
width : 100%;
height : 100%;
margin : 0em;
}}
[data-platform],&[data-multiple=true]>[data-type=audio]>.multimedia-box,[data-platform]{
width : 20em;
height : 10em;
}
[data-links-count='1']>[data-platform],&[data-multiple=false]>[data-type=audio]>.multimedia-box{
width : 80%;
height : 25em;
}
}
.links-group{
text-align : center;
a{
display : inline-block;
position : relative;
width : 6em;
height : 7.5em;
margin : 1em;
overflow : hidden;
opacity : .7;
transition-duration : $transition-out;
transition-property : color,opacity;
img{display : none;}
&:hover{
opacity : 1;
transition-duration : $transition-in;
}
[data-status]{
display : block;
position : absolute;
top : 0em;
left : 0em;
width : 6em;
height : 6em;
}
.text{
display : block;
position : absolute;
left : 0em;
bottom : 0em;
width : 100%;
margin : 0em;
text-align : center;
}
.image-style{
display : inline-block;
width : 100%;
height : 100%;
background-position : center center;
background-repeat : no-repeat;
background-size : contain;
}
}
}
.special-text-i .text{font-weight : 900;}
.quote{
padding : 1em;
border : .1em dotted $color-grey;
}
.wdoc{
position : relative;
border : .1.5em solid $color-grey;
background-color : mix(#FFF, $color-back, 50%);
border-radius : .4em;
&[data-language]>legend{
display : block;
padding : 0em .4em;
.name{font-weight : 900;}
.language{
margin-left : .4em;
&::before{content : "[";}
&::after{content : "]";}
}
}
.structure{
.return-type{
margin-right : .4em;
&::before{content : "[";}
&::after{content : "]";}
}
.attributes{
display : inline-block;
margin : 0em;
padding : 0em;
list-style-type : none;
&::before{content : "(";}
&::after{content : ")";}
.attribute-status,.attribute-description,.return{display : none;}
.attribute-type{
margin-left : .4em;
span{font-style : italic;}
&::before{
content : "[";
margin-right : .2em;
}
&::after{
content : "]";
margin-left : .2em;
}
}
}
.attribute+span::before{
content : ",";
margin-right : .4em;
}
.attribute[data-status=optional]::after{content : "?";}
}
.attribute-type>span+span::before{
content : ",";
margin-right : .4em;
}
.attributes-data{
display : table;
width : 100%;
margin-top : 1em;
box-sizing : border-box;
&>span{
display : table-row;
&>span{display : table-cell;}
}
&>.return{font-style : italic;}
}
&>.data{
margin : 0em;
margin-top : 1em;
padding : 0em;
list-style-type : none;
li{
padding-bottom : .1em;
&:hover{
padding-bottom : 0em;
border-bottom : .1em dotted $color-grey;
}
&>:first-child{
display : inline-block;
width : 10em;
height : 1.2em;
overflow : hidden;
&::before{content : "@";}
}
&>:last-child{margin-left : .4em;}
}
}
div.attributes-data>*{
&>*{padding-bottom : .1em;}
&:hover>*{
padding-bottom : 0em;
border-bottom : .1em dotted $color-grey;
}
}
[data-with-value=false]{display : none;}
.deprecated{
font-weight : 900;
&::before{content : "(";}
&::after{
content : ")";
margin-right : .4em;
}
}
&[data-deprecated=true]{
opacity : .6;
transition-duration : $transition-out;
transition-property : opacity;
&:hover{
opacity : 1;
transition-duration : $transition-in;
}
}
&+.wdoc{margin-top : 1em;}
}
.wmd-table{
width : 80%;
margin-left : 10%;
border-collapse : collapse;
&{border : .1em solid $color-fore;}
td,th{border : .1em solid $color-grey;}
tr td{
transition-duration : $transition-out;
transition-property : background-color;
}
tr:hover td{transition-duration : $transition-in;}
tbody>tr:nth-child(2n)>td{background-color : mix($color-back, #FFF, 80%);}
tbody>tr:nth-child(2n + 1)>td{background-color : mix($color-back, #000, 95%);}
tbody>tr:hover>td{background-color : mix($color-back, #FFF, 30%);}
}
}