1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/css/itcss/components/network.scss

190 lines
3.2 KiB
SCSS
Raw Normal View History

.network-component--disabled {
cursor: not-allowed;
.fa-caret-down {
opacity: 0;
}
}
2017-10-13 00:46:09 +02:00
.network-component.pointer {
border: 1px solid var(--color-border-muted);
2017-10-13 00:46:09 +02:00
border-radius: 82px;
padding: 6px 3px;
2017-10-18 07:36:53 +02:00
flex: 0 0 auto;
display: flex;
2017-10-13 00:46:09 +02:00
2018-01-12 01:59:00 +01:00
&.ethereum-network .menu-icon-circle div {
background-color: rgba(3, 135, 137, 0.7) !important;
2017-10-13 00:46:09 +02:00
}
2019-04-17 19:34:49 +02:00
&.goerli-test-network .menu-icon-circle div {
background-color: rgba(48, 153, 242, 0.7) !important;
2019-04-17 19:34:49 +02:00
}
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
&.sepolia-test-network .menu-icon-circle div {
background-color: rgba(207, 181, 240, 0.7) !important;
}
Implement Network Switcher designs (#12260) * Show test networks toggle button in settings/advanced tab. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Apply toggle testnet settings and show/hide testnets when on/off Add localhost to testnet. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show add network button Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Open full screen when add network is called. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Show custonm rpc before testnet rpcs lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for network dropdown. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Test cases for toggle test networks in advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix Locales. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E Tests: Custom RPC is now called Add Network Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fix Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * E2E: When Add Network button is clicked, wait for the full screen window to be visible Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * findVisibleElement should use a class. i.e start with a dot Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Hide Dropdown when Add Netwok is clicked. Only show full screen if it's not already showing. E2E tests passing. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests for jest Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Testnets are not being shown by default anymore, tests should use Mainnet instead. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Import Button from ui Change selector name to getShowTestnetworks Fix button to show full width Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove localhost from INFURA provider types. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix errors in Advanced Tab Component tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix unit tests for advanced tab component. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove deleted elements from e2e tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Make sure all tests passed. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Lint fixes Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2021-10-28 21:31:05 +02:00
&.localhost-network .menu-icon-circle div {
background-color: rgba(3, 135, 137, 0.7) !important;
}
2017-10-13 00:46:09 +02:00
}
.dropdown-menu-item {
.menu-icon-circle,
.menu-icon-circle--active {
margin: 0 14px;
2017-10-13 00:46:09 +02:00
}
}
.dropdown-menu-item .fa.delete {
color: var(--color-icon-default);
margin-right: 10px;
display: none;
}
.dropdown-menu-item:hover .fa.delete {
display: inherit;
}
2017-09-05 00:55:14 +02:00
.network-droppo {
background-color: var(--color-background-default);
border-radius: 4px;
2017-09-05 00:55:14 +02:00
right: 2px;
.color-indicator {
margin: 0 14px 0 4px;
}
2022-08-04 16:03:02 +02:00
@include screen-sm-min {
2017-09-05 00:55:14 +02:00
right: calc(((100% - 85vw) / 2) + 2px);
}
2022-08-04 16:03:02 +02:00
@include screen-md-min {
2017-09-05 00:55:14 +02:00
right: calc(((100% - 80vw) / 2) + 2px);
}
2022-08-04 16:03:02 +02:00
@include screen-lg-min {
2017-09-05 00:55:14 +02:00
right: calc(((100% - 65vw) / 2) + 2px);
}
}
.network-name-item {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
2017-08-31 13:08:11 +02:00
}
.network-check__transparent {
opacity: 0;
width: 24px;
2017-08-31 13:08:11 +02:00
}
2017-10-13 00:46:09 +02:00
.menu-icon-circle,
.menu-icon-circle--active {
background: none;
border-radius: 22px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid transparent;
2017-10-13 00:46:09 +02:00
margin: 0 4px;
2017-09-08 01:47:07 +02:00
}
.menu-icon-circle--active {
border: 1px solid var(--color-border-default);
background: var(--color-background-default);
2017-09-08 01:47:07 +02:00
}
2017-10-13 00:46:09 +02:00
.menu-icon-circle div,
.menu-icon-circle--active div {
height: 12px;
width: 12px;
2017-09-08 01:47:07 +02:00
border-radius: 17px;
}
.menu-icon-circle--active div {
opacity: 1;
}
.network-dropdown-header {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.network-dropdown-list {
max-height: 330px;
overflow-y: auto;
margin-bottom: 8px;
}
.network-dropdown-divider {
width: 100%;
height: 1px;
margin: 10px 0;
background-color: var(--color-border-default);
}
.network-dropdown-title {
@include H4;
height: 25px;
width: 120px;
color: var(--color-text-default);
text-align: center;
}
.network-dropdown-content {
@include H6;
min-height: 36px;
width: 265px;
color: var(--color-text-default);
&--link {
color: var(--color-primary-default);
cursor: pointer;
text-decoration: underline;
&:hover {
color: var(--color-primary-alternative);
}
}
&--dismiss {
position: absolute;
top: 63px;
right: 10px;
padding: 2px 8px;
width: auto;
}
}
2018-01-12 01:59:00 +01:00
.network-caret {
margin: 0 8px;
}
.network-loading-spinner {
display: flex;
flex-flow: row nowrap;
align-items: center;
position: relative;
height: 16px;
width: 16px;
margin-left: 5px;
img {
height: 26px;
position: absolute;
top: -5px;
left: -6px;
}
2018-01-12 01:59:00 +01:00
}
.network__add-network-button {
padding: 0 16px;
}