Skip to content

Commit 063f80f

Browse files
antleblancantleblanc
authored
fix(cloud-styles): minor improvements (#274)
1 parent 363f2f3 commit 063f80f

File tree

58 files changed

+290
-276
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+290
-276
lines changed

‎packages/manager/modules/cloud-styles/.prerelease‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
alpha

‎packages/manager/modules/cloud-styles/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"bootstrap": "~3.3.7",
2020
"font-awesome": "^4.0.0",
2121
"ovh-common-style": "^3.2.2",
22-
"ovh-ui-kit": "~2.24.0"
22+
"ovh-ui-kit": "~2.24.0",
23+
"ovh-ui-kit-bs": "^2.1.1"
2324
}
2425
}

‎packages/manager/modules/cloud-styles/src/cloud.less‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
@rem-base: rem-base(10px);
1+
@oui-path: '../../../ovh-ui-kit';
22

3-
@import '~bootstrap/less/bootstrap';
3+
@import '~ovh-ui-kit-bs/src/bootstrap/_variables';
4+
@import '~bootstrap/less/mixins';
5+
@import '~bootstrap/less/utilities';
6+
@import '~bootstrap/less/glyphicons';
47
@import "~ovh-ui-kit/packages/oui-responsive/_mixins";
58
@import "~ovh-ui-kit/packages/oui-color/_variables";
69
@import "~ovh-ui-kit/packages/oui-navbar/_variables";
@@ -61,6 +64,19 @@
6164
}
6265
}
6366

67+
div.cloud-compute-infra-primary-actions {
68+
> button.oui-button_dropdown {
69+
> span.oui-icon.oui-icon-chevron-down {
70+
line-height: 1.5rem;
71+
font-size: 1.5rem;
72+
}
73+
}
74+
}
75+
76+
i.oui-icon.oui-icon-pen_line.oui-icon_small {
77+
font-size: 1.5rem;
78+
}
79+
6480
@import './cda/cda';
6581
@import './cda/details/home/detail/cda-detail.component.less';
6682
@import './cda/user/details/cda-user-details';

‎packages/manager/modules/cloud-styles/src/cloud/project/billing/rights/cloud-project-billing-rights.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121

2222
.btn-margin {
23-
margin-bottom: -2rem;
23+
margin-bottom: -1.25rem;
2424
}
2525

2626
.billing-rights-table {

‎packages/manager/modules/cloud-styles/src/cloud/project/compute/infrastructure/cloud-project-compute-infrastructure.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
#cloud-project-compute-infrastructure {
3434
overflow-x: auto;
35-
min-height: calc(100vh - 11rem);
35+
min-height: calc(100vh - 6.875rem);
3636

3737
.ovh-font-warning {
3838
color: @cloud_yellow;
@@ -99,7 +99,7 @@
9999
.cloud-compute-infra-primary-actions {
100100
.dropdown-menu {
101101
padding: 0;
102-
margin: -2rem 0 0 0;
102+
margin: -1.25rem 0 0 0;
103103
min-width: 255px;
104104

105105
li {

‎packages/manager/modules/cloud-styles/src/cloud/project/compute/infrastructure/privateNetwork/cloud-project-compute-infrastructure-privateNetwork.less‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
@private-network-background-color: white;
33
@private-network-border-color: #757575;
44
@private-network-hover-border-color: black;
5-
@private-network-border-radius: 6.9rem;
5+
@private-network-border-radius: 4.3125rem;
66

77
/* Private Network - Property */
8-
@private-network-property-font-size: 1.2rem;
9-
@private-network-property-line-height: 1.4rem;
8+
@private-network-property-font-size: 0.75rem;
9+
@private-network-property-line-height: 0.875rem;
1010

1111
/* Private Network - Property - Name */
1212
@private-network-property-name-color: #61afa0;
@@ -20,9 +20,9 @@
2020
/* Private Network - Creating */
2121
@private-network-creating-background-color: #f2f2f2;
2222
@private-network-creating-font-color: #8d8d8d;
23-
@private-network-property-label-font-size: 1.1rem;
23+
@private-network-property-label-font-size: 0.6875rem;
2424
@private-network-property-label-font-weight: bold;
25-
@private-network-property-description-font-size: 0.9rem;
25+
@private-network-property-description-font-size: 0.5625rem;
2626
@private-network-property-description-font-weight: 600;
2727

2828
.private-network {
@@ -31,11 +31,11 @@
3131
border-style: solid;
3232
border-color: @private-network-border-color;
3333
border-radius: @private-network-border-radius;
34-
padding: 0.5rem 3rem;
34+
padding: 0.3125rem 1.875rem;
3535

3636
&__list {
37-
margin-top: -2rem;
38-
margin-left: 3.4rem;
37+
margin-top: -1.25rem;
38+
margin-left: 2.125rem;
3939
position: relative;
4040

4141
&_creating {

‎packages/manager/modules/cloud-styles/src/cloud/project/compute/infrastructure/privateNetwork/cloud-project-compute-infrastructure-privateNetworks.less‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* Private Networks - Header */
2-
@private-networks-header-font-size: 2.5rem;
3-
@private-networks-header-font-size_medium-plus: 3.1rem;
2+
@private-networks-header-font-size: 1.5625rem;
3+
@private-networks-header-font-size_medium-plus: 1.9375rem;
44
@private-networks-header-font-color: #333;
55
@private-networks-header-font-weight: 500;
66
@private-networks-header-line-height: 1.1;
77
@private-networks-header-background-color: white;
88
@private-networks-header-border-left-color: #e3e3e3;
99
@private-networks-header-border-top-color: @private-networks-header-border-left-color;
10-
@private-networks-header-network-name-font-size: 1.8rem;
11-
@private-networks-header-network-name-font-size_medium-plus: 2rem;
10+
@private-networks-header-network-name-font-size: 1.125rem;
11+
@private-networks-header-network-name-font-size_medium-plus: 1.25rem;
1212
@private-networks-header-network-name-font-color: #777;
1313
@private-networks-header-edit-vrack-button-color: #61afa0;
1414
@private-networks-header-edit-vrack-button-color_hover: darken(
@@ -31,23 +31,23 @@
3131
border-left-width: 3px;
3232
border-left-style: solid;
3333
border-left-color: @private-networks-list-border-left-color;
34-
margin-top: 5rem;
34+
margin-top: 3.125rem;
3535

3636
&_no-vrack {
3737
border-left: none;
38-
margin-top: 7.5rem;
38+
margin-top: 4.6875rem;
3939
}
4040

4141
&__header {
4242
color: @private-networks-header-font-color;
4343
border-left-width: 2px;
4444
border-left-style: solid;
4545
border-left-color: @private-networks-header-border-left-color;
46-
padding-left: 1.4rem;
46+
padding-left: 0.875rem;
4747
font-weight: @private-networks-header-font-weight;
4848
line-height: @private-networks-header-line-height;
49-
margin-left: 2.5rem;
50-
margin-top: -5.8rem;
49+
margin-left: 1.5625rem;
50+
margin-top: -3.625rem;
5151
background-color: @private-networks-header-background-color;
5252

5353
&-title {
@@ -80,11 +80,11 @@
8080
}
8181

8282
&__description {
83-
margin: 1.5rem 0 1.25rem;
83+
margin: 0.9375rem 0 0.78125rem;
8484
}
8585

8686
&__item {
87-
margin-top: 3.6rem;
87+
margin-top: 2.25rem;
8888
border-top-style: solid;
8989
border-top-width: 4px;
9090
border-top-color: @private-networks-header-border-top-color;
@@ -102,9 +102,9 @@
102102
border-width: 1px;
103103
border-style: solid;
104104
border-color: @private-networks-header-border-top-color;
105-
width: 2.5rem;
106-
height: 2.5rem;
107-
margin-left: -1.4rem;
105+
width: 1.5625rem;
106+
height: 1.5625rem;
107+
margin-left: -0.875rem;
108108
}
109109

110110
&-button:focus {
@@ -125,7 +125,7 @@
125125
}
126126

127127
&:last-child {
128-
margin-top: 2rem;
128+
margin-top: 1.25rem;
129129
}
130130
}
131131
}

‎packages/manager/modules/cloud-styles/src/cloud/project/compute/infrastructure/privateNetwork/dialog/cloud-project-compute-infrastructure-privateNetwork-dialog-menu-item.less‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Private Network Dialog - Menu - Item */
22
@private-network-dialog-menu-item-background-color: white;
33
@private-network-dialog-menu-item-background-color_active: #dfeeeb;
4-
@private-network-dialog-menu-item-button-height: 7.5rem;
4+
@private-network-dialog-menu-item-button-height: 4.6875rem;
55
@private-network-dialog-menu-item-font-family: 'HelveticaNeue', sans-serif;
66

77
/* Private Network Dialog - Menu - Item - Button */
@@ -14,13 +14,13 @@
1414
@private-network-dialog-menu-item-button-background-color_active: @private-network-dialog-menu-item-button-background-color_after-hover;
1515

1616
/* Private Network Dialog - Menu - Item - Icon */
17-
@private-network-dialog-menu-item-icon-font-size: 2.1rem;
17+
@private-network-dialog-menu-item-icon-font-size: 1.3125rem;
1818

1919
/* Private Network Dialog - Menu - Item - Value */
20-
@private-network-dialog-menu-item-value-font-size: 1.8rem;
20+
@private-network-dialog-menu-item-value-font-size: 1.125rem;
2121

2222
/* Private Network Dialog - Menu - Item - Description */
23-
@private-network-dialog-menu-item-description-font-size: 1.2rem;
23+
@private-network-dialog-menu-item-description-font-size: 0.75rem;
2424
@private-network-dialog-menu-item-description-font-color: #333;
2525

2626
.private-network-dialog__menu-item {
@@ -30,7 +30,7 @@
3030

3131
&-button {
3232
width: 100%;
33-
padding: 0 3rem 0 0;
33+
padding: 0 1.875rem 0 0;
3434
height: @private-network-dialog-menu-item-button-height;
3535
background-color: @private-network-dialog-menu-item-button-background-color;
3636
border: 0;
@@ -53,7 +53,7 @@
5353
right: 0;
5454
top: 0;
5555
height: 100%;
56-
width: 3rem;
56+
width: 1.875rem;
5757
background-color: @private-network-dialog-menu-item-button-background-color_after;
5858
color: @private-network-dialog-menu-item-button-font-color_after;
5959
}
@@ -80,7 +80,7 @@
8080

8181
&-icon {
8282
font-size: @private-network-dialog-menu-item-icon-font-size;
83-
margin-right: 1.6rem;
83+
margin-right: 1rem;
8484
}
8585

8686
&-value {
@@ -90,7 +90,7 @@
9090

9191
&-description {
9292
display: block;
93-
margin-top: 0.3rem;
93+
margin-top: 0.1875rem;
9494
font-size: @private-network-dialog-menu-item-description-font-size;
9595
color: @private-network-dialog-menu-item-description-font-color;
9696
}

‎packages/manager/modules/cloud-styles/src/cloud/project/compute/infrastructure/privateNetwork/dialog/cloud-project-compute-infrastructure-privateNetwork-dialog-region.less‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
@private-network-dialog-region-header-border-color: #ddd;
44

55
/* Private Networl Dialog - Region - Icon */
6-
@private-network-dialog-region-icon-font-size: 1.6rem;
6+
@private-network-dialog-region-icon-font-size: 1rem;
77

88
/* Private Networl Dialog - Region - Name */
9-
@private-network-dialog-region-name-font-size: 1.4rem;
9+
@private-network-dialog-region-name-font-size: 0.875rem;
1010

1111
.private-network-dialog__region-list {
1212
&:extend(.list-unstyled);
@@ -15,22 +15,22 @@
1515
}
1616

1717
.private-network-dialog__region {
18-
margin-bottom: 1rem;
18+
margin-bottom: 0.625rem;
1919

2020
&-header {
2121
background-color: @private-network-dialog-region-header-background-color;
2222
border-bottom-style: solid;
2323
border-bottom-width: 1px;
2424
border-bottom-color: @private-network-dialog-region-header-border-color;
25-
padding: 1rem;
25+
padding: 0.625rem;
2626

2727
&-icon {
2828
font-size: @private-network-dialog-region-icon-font-size;
2929
}
3030

3131
&-name {
3232
font-size: @private-network-dialog-region-name-font-size;
33-
margin-left: 0.7rem;
33+
margin-left: 0.4375rem;
3434
}
3535

3636
&_disabled &-icon,
@@ -39,9 +39,9 @@
3939
}
4040

4141
&-toggle {
42-
width: 1.6rem;
43-
height: 1.6rem;
44-
margin-left: 1rem !important;
42+
width: 1rem;
43+
height: 1rem;
44+
margin-left: 0.625rem !important;
4545
}
4646
}
4747
}

0 commit comments

Comments
 (0)