Estilos CSS - Bordes, fuente

This commit is contained in:
Juan Ferrer Toribio 2016-11-29 10:14:31 +01:00
parent bb72b4c251
commit eafbcb1915
9 changed files with 86 additions and 30 deletions

View File

@ -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();

View File

@ -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;
}

View File

@ -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;

View File

@ -0,0 +1,10 @@
@import "colors";
$font-color: $color-dark-grey;
body {
color: $font-color;
}
html [uppercase], .uppercase {
text-transform: uppercase;
}

View File

@ -0,0 +1,7 @@
@import "padding";
.form {
height: 100%;
box-sizing: border-box;
padding: $pad-large;
}

View File

@ -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>

View File

@ -6,27 +6,20 @@ export const COMPONENT = {
template: template,
controller: function ($http)
{
this.addresses = [{
consignee: 'Consignee 1',
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',
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
}];
phone: '+XX XXX XX XX XX',
mobile: '+XX 6XX XX XX XX',
enabled: i % 2 == 0
});
},
};
module.component(NAME, COMPONENT);

View File

@ -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>

1
dev.sh
View File

@ -13,7 +13,6 @@ case "$1" in
$0 stop
echo "################################ Starting services"
forever start forever.json
forever list
"$nginxBin" -c "$nginxConf" -p "$nginxPrefix"
cd @salix && gulp
;;