Estilos CSS - Bordes, fuente
This commit is contained in:
parent
bb72b4c251
commit
eafbcb1915
|
@ -7,5 +7,8 @@ import padding from './styles/layout.css'
|
|||
import margin from './styles/margin.scss'
|
||||
import layout from './styles/padding.scss'
|
||||
import background from './styles/background.scss'
|
||||
import border from './styles/border.scss'
|
||||
import fontStyle from './styles/font-style.scss'
|
||||
import misc from './styles/misc.scss'
|
||||
|
||||
bootstrap();
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
@import "colors";
|
||||
|
||||
$border-color: #AAA;
|
||||
$border-thin: 1px;
|
||||
$border-thick: 2px;
|
||||
|
||||
html [border-none], .border-none {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Solid border */
|
||||
|
||||
html [border-solid], .border-solid {
|
||||
border: $border-thin solid $border-color;
|
||||
}
|
||||
html [border-solid-top], .border-solid-top {
|
||||
border-top: $border-thin solid $border-color;
|
||||
}
|
||||
html [border-solid-left], .border-solid-left {
|
||||
border-left: $border-thin solid $border-color;
|
||||
}
|
||||
html [border-solid-right], .border-solid-right {
|
||||
border-right: $border-thin solid $border-color;
|
||||
}
|
||||
html [border-solid-bottom], .border-solid-bottom {
|
||||
border-bottom: $border-thin solid $border-color;
|
||||
}
|
||||
|
||||
/* Dashed border */
|
||||
|
||||
html [border-dashed], .border-dashed {
|
||||
border: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-top], .border-dashed-top {
|
||||
border-top: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-left], .border-dashed-left {
|
||||
border-left: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-right], .border-dashed-right {
|
||||
border-right: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-bottom], .border-dashed-bottom {
|
||||
border-bottom: $border-thin dashed $border-color;
|
||||
}
|
|
@ -1,8 +1,7 @@
|
|||
|
||||
$color-green: rgb(139,195,74);
|
||||
$color-orange: rgb(255,171,64);
|
||||
$color-dark-grey: #424242;
|
||||
$color-light-grey: #e6e6e6;
|
||||
$color-white: white;
|
||||
$color-dark: #3c393b;
|
||||
|
||||
$color-dark-grey: #424242;
|
||||
$color-light-grey: #e6e6e6;
|
|
@ -0,0 +1,10 @@
|
|||
@import "colors";
|
||||
|
||||
$font-color: $color-dark-grey;
|
||||
|
||||
body {
|
||||
color: $font-color;
|
||||
}
|
||||
html [uppercase], .uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
@import "padding";
|
||||
|
||||
.form {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: $pad-large;
|
||||
}
|
|
@ -1,17 +1,17 @@
|
|||
<vn-vertical full-height pad-large style="box-sizing: border-box;">
|
||||
<vn-vertical class="form">
|
||||
<vn-horizontal>
|
||||
<h3 style="margin-top: 0;">Addresses</h3>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal style="border-bottom: .1em dashed; text-transform: uppercase; text-align: center;" class="pad-medium-bottom">
|
||||
<vn-horizontal class="pad-medium-bottom border-dashed-bottom uppercase" style="text-align: center;">
|
||||
<vn-empty style="width: 7em;">Default</vn-empty>
|
||||
<vn-auto>Consignee</vn-auto>
|
||||
<vn-empty style="width: 7em;">Enabled</vn-empty>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal ng-repeat="i in $ctrl.addresses" style="align-items: center;" class="pad-medium-top">
|
||||
<vn-horizontal ng-repeat="i in $ctrl.addresses" class="pad-medium-top" style="align-items: center;">
|
||||
<vn-empty style="width: 7em; text-align: center;">
|
||||
<input type="radio" name="default"/>
|
||||
</vn-empty>
|
||||
<vn-auto style="border: 1px solid black; border-radius: .5em;" class="pad-small">
|
||||
<vn-auto style="border-radius: .5em;" class="pad-small border-solid">
|
||||
<button style="float: right;">
|
||||
Edit
|
||||
</button>
|
||||
|
|
|
@ -6,27 +6,20 @@ export const COMPONENT = {
|
|||
template: template,
|
||||
controller: function ($http)
|
||||
{
|
||||
this.addresses = [{
|
||||
consignee: 'Consignee 1',
|
||||
street: 'Street',
|
||||
city: 'City',
|
||||
postcode: '46600',
|
||||
province: 'Province',
|
||||
country: 'Country',
|
||||
phone: 'XX-XXX-XX-XX',
|
||||
mobile: 'XX-6XX-XX-XX',
|
||||
enabled: true
|
||||
},{
|
||||
consignee: 'Consignee 2',
|
||||
street: 'Street',
|
||||
city: 'City',
|
||||
postcode: '46600',
|
||||
province: 'Province',
|
||||
country: 'Country',
|
||||
phone: 'XX-XXX-XX-XX',
|
||||
mobile: 'XX-6XX-XX-XX',
|
||||
enabled: false
|
||||
}];
|
||||
this.addresses = [];
|
||||
|
||||
for (var i = 1; i <= 4; i++)
|
||||
this.addresses.push ({
|
||||
consignee: 'Consignee '+ i,
|
||||
street: 'Street',
|
||||
city: 'City',
|
||||
postcode: '46600',
|
||||
province: 'Province',
|
||||
country: 'Country',
|
||||
phone: '+XX XXX XX XX XX',
|
||||
mobile: '+XX 6XX XX XX XX',
|
||||
enabled: i % 2 == 0
|
||||
});
|
||||
},
|
||||
};
|
||||
module.component(NAME, COMPONENT);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<form ng-submit="$ctrl.submit()">
|
||||
<vn-vertical full-height pad-large style="box-sizing: border-box;">
|
||||
<vn-vertical class="form">
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<h3 style="margin-top: 0;">Datos básicos</h3>
|
||||
|
|
Loading…
Reference in New Issue