PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4
element-web/res/css/views/elements/_ToggleSwitch.pcss

61 lines
1.7 KiB
Text
Raw Normal View History

Add a ToggleSwitch and use it for SettingsFlag Also bring in the compact timeline option. Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 22:50:41 +00:00
/*
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 13:57:16 +00:00
Copyright 2019-2024 New Vector Ltd.
Add a ToggleSwitch and use it for SettingsFlag Also bring in the compact timeline option. Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 22:50:41 +00:00
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 13:57:16 +00:00
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
Add a ToggleSwitch and use it for SettingsFlag Also bring in the compact timeline option. Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 22:50:41 +00:00
*/
.mx_ToggleSwitch {
Improve SetIntegrationManager (#8878)
2022-06-26 10:43:33 +00:00
--ToggleSwitch-min-width: $font-44px;
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
transition:
background-color 0.2s ease-out 0.1s,
border-color 0.2s ease-out 0.1s;
Resize toggle switches with font
2020-04-07 13:21:21 +00:00
Fix settings when scaling up
2020-04-07 14:07:34 +00:00
width: $font-44px;
Resize toggle switches with font
2020-04-07 13:21:21 +00:00
height: $font-20px;
border-radius: 1.5rem;
padding: 2px;
lint
2020-04-07 14:23:19 +00:00
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
background-color: var(--cpd-color-bg-canvas-disabled);
border: 1px solid var(--cpd-color-border-disabled);
cursor: not-allowed;
Implement push notification toggle in device detail (#9308) Co-authored-by: Travis Ralston <travisr@matrix.org>
2022-09-27 12:35:54 +00:00
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
&.mx_ToggleSwitch_enabled {
cursor: pointer;
background-color: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
Add a ToggleSwitch and use it for SettingsFlag Also bring in the compact timeline option. Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 22:50:41 +00:00
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
&.mx_ToggleSwitch_on {
background-color: var(--cpd-color-bg-accent-rest);
border-color: var(--cpd-color-bg-accent-rest);
}
> .mx_ToggleSwitch_ball {
background-color: var(--cpd-color-icon-secondary);
}
}
Add a ToggleSwitch and use it for SettingsFlag Also bring in the compact timeline option. Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 22:50:41 +00:00
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
&.mx_ToggleSwitch_on {
background-color: var(--cpd-color-bg-action-primary-disabled);
border-color: var(--cpd-color-bg-action-primary-disabled);
Fix slider toggle regression.
2020-05-04 14:07:41 +00:00
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
> .mx_ToggleSwitch_ball {
left: calc(100% - $font-20px);
background-color: var(--cpd-color-icon-on-solid-primary);
}
Fix slider toggle regression.
2020-05-04 14:07:41 +00:00
}
Add a ToggleSwitch and use it for SettingsFlag Also bring in the compact timeline option. Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 22:50:41 +00:00
}
.mx_ToggleSwitch_ball {
Fix slider toggle regression.
2020-05-04 14:07:41 +00:00
position: relative;
Resize toggle switches with font
2020-04-07 13:21:21 +00:00
width: $font-20px;
height: $font-20px;
border-radius: $font-20px;
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
background-color: var(--cpd-color-bg-action-primary-disabled);
transition:
left 0.15s ease-out 0.1s,
background-color 0.15s ease-out 0.1s;
Fix slider toggle regression.
2020-05-04 14:07:41 +00:00
left: 0;
lint
2020-04-07 14:23:19 +00:00
}
Reference in a new issue Copy permalink