Estilos: Layout, padding y margin en @salix/app
This commit is contained in:
Juan Ferrer Toribio
parent
0054e829a4
commit
7d49961ff5
|
|
@ -2,4 +2,8 @@ import {bootstrap} from './bootstrap';
|
|||
import * as spliting from './spliting';
|
||||
import * as routes from './configroutes';
|
||||
|
||||
import padding from './styles/layout.css'
|
||||
import margin from './styles/margin.scss'
|
||||
import layout from './styles/padding.scss'
|
||||
|
||||
bootstrap();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
$margin-none:0;
|
||||
|
||||
/* Small */
|
||||
|
||||
$margin-small:8px;
|
||||
$margin-small-top:8px;
|
||||
$margin-small-left:8px;
|
||||
$margin-small-right:8px;
|
||||
$margin-small-bottom:8px;
|
||||
|
||||
/* Medium */
|
||||
|
||||
$margin-medium:16px;
|
||||
$margin-medium-top:16px;
|
||||
$margin-medium-left:16px;
|
||||
$margin-medium-right:16px;
|
||||
$margin-medium-bottom:16px;
|
||||
|
||||
/* Large */
|
||||
|
||||
$margin-large:32px;
|
||||
$margin-large-top:32px;
|
||||
$margin-large-left:32px;
|
||||
$margin-large-right:32px;
|
||||
$margin-large-bottom:32px;
|
||||
|
||||
/* None */
|
||||
|
||||
html [margin-none],.margin-none{
|
||||
margin:$margin-none;
|
||||
}
|
||||
|
||||
/* Small */
|
||||
|
||||
html [margin-small],.margin-small{
|
||||
margin:$margin-small;
|
||||
}
|
||||
html [margin-small-top],.margin-small-top{
|
||||
margin-top:$margin-small-top;
|
||||
}
|
||||
html [margin-small-left],.margin-small-left{
|
||||
margin-left:$margin-small-left;
|
||||
}
|
||||
html [margin-small-right],.margin-small-right{
|
||||
margin-right:$margin-small-right;
|
||||
}
|
||||
html [margin-small-bottom],.margin-small-bottom{
|
||||
margin-bottom:$margin-small-bottom;
|
||||
}
|
||||
|
||||
/* Medium */
|
||||
|
||||
html [margin-medium],.margin-medium{
|
||||
margin:$margin-medium;
|
||||
}
|
||||
html [margin-medium-top],.margin-medium-top{
|
||||
margin-top:$margin-medium-top;
|
||||
}
|
||||
html [margin-medium-left],.margin-medium-left{
|
||||
margin-left:$margin-medium-left;
|
||||
}
|
||||
html [margin-medium-right],.margin-medium-right{
|
||||
margin-right:$margin-medium-right;
|
||||
}
|
||||
html [margin-medium-bottom],.margin-medium-bottom{
|
||||
margin-bottom:$margin-medium-bottom;
|
||||
}
|
||||
|
||||
/* Large */
|
||||
|
||||
html [margin-large],.margin-large{
|
||||
margin:$margin-large;
|
||||
}
|
||||
html [margin-large-top],.margin-large-top{
|
||||
margin-top:$margin-large-top;
|
||||
}
|
||||
html [margin-large-left],.margin-large-left{
|
||||
margin-left:$margin-large-left;
|
||||
}
|
||||
html [margin-large-right],.margin-large-right{
|
||||
margin-right:$margin-large-right;
|
||||
}
|
||||
html [margin-large-bottom],.margin-large-bottom{
|
||||
margin-bottom:$margin-large-bottom;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
$pad-none:0;
|
||||
|
||||
/* Small */
|
||||
|
||||
$pad-small:8px;
|
||||
$pad-small-top:8px;
|
||||
$pad-small-left:8px;
|
||||
$pad-small-right:8px;
|
||||
$pad-small-bottom:8px;
|
||||
|
||||
/* Medium */
|
||||
|
||||
$pad-medium:16px;
|
||||
$pad-medium-top:16px;
|
||||
$pad-medium-left:16px;
|
||||
$pad-medium-right:16px;
|
||||
$pad-medium-bottom:16px;
|
||||
|
||||
/* Large */
|
||||
|
||||
$pad-large:32px;
|
||||
$pad-large-top:32px;
|
||||
$pad-large-left:32px;
|
||||
$pad-large-right:32px;
|
||||
$pad-large-bottom:32px;
|
||||
|
||||
|
||||
//NONE
|
||||
html [pad-none],.pad-none{
|
||||
padding:$pad-none;
|
||||
}
|
||||
|
||||
//SMALL
|
||||
html [pad-small],.pad-small{
|
||||
padding:$pad-small;
|
||||
}
|
||||
html [pad-small-top],.pad-small-top{
|
||||
padding-top:$pad-small-top;
|
||||
}
|
||||
html [pad-small-left],.pad-small-left{
|
||||
padding-left:$pad-small-left;
|
||||
}
|
||||
html [pad-small-right],.pad-small-right{
|
||||
padding-right:$pad-small-right;
|
||||
}
|
||||
html [pad-small-bottom],.pad-small-bottom{
|
||||
padding-bottom:$pad-small-bottom;
|
||||
}
|
||||
|
||||
/* Medium */
|
||||
|
||||
html [pad-medium],.pad-medium{
|
||||
padding:$pad-medium;
|
||||
}
|
||||
html [pad-medium-top],.pad-medium-top{
|
||||
padding-top:$pad-medium-top;
|
||||
}
|
||||
html [pad-medium-left],.pad-medium-left{
|
||||
padding-left:$pad-medium-left;
|
||||
}
|
||||
html [pad-medium-right],.pad-medium-right{
|
||||
padding-right:$pad-medium-right;
|
||||
}
|
||||
html [pad-medium-bottom],.pad-medium-bottom{
|
||||
padding-bottom:$pad-medium-bottom;
|
||||
}
|
||||
|
||||
/* Large */
|
||||
|
||||
html [pad-large],.pad-large{
|
||||
padding:$pad-large;
|
||||
}
|
||||
html [pad-large-top],.pad-medium-large{
|
||||
padding-top:$pad-large-top;
|
||||
}
|
||||
html [pad-large-left],.pad-large-left{
|
||||
padding-left:$pad-large-left;
|
||||
}
|
||||
html [pad-large-right],.pad-large-right{
|
||||
padding-right:$pad-large-right;
|
||||
}
|
||||
html [pad-large-bottom],.pad-large-bottom{
|
||||
padding-bottom:$pad-large-bottom;
|
||||
}
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
* export public module
|
||||
*/
|
||||
|
||||
import style from './style/layout.css'
|
||||
|
||||
export * from './module'
|
||||
export * from './util'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue