Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 6998e19

Browse files
mydearxymmydearxym
committed
refactor(styles): move radio-related to it's own component
1 parent 211ce48 commit 6998e19

File tree

4 files changed

+4
-322
lines changed

4 files changed

+4
-322
lines changed

‎containers/FavoritesCats/Creator.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { Button, Input, Radio } from 'antd'
3+
import 'antd/lib/radio/style/index.css'
34

45
import { Space } from '@components/BaseStyled'
56
import SectionLabel from '@components/SectionLabel'

‎containers/FavoritesCats/Updater.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { Button, Input, Radio } from 'antd'
3+
import 'antd/lib/radio/style/index.css'
34

45
import Popconfirm from '@components/Popconfirm'
56
import { Space } from '@components/BaseStyled'

‎containers/UserSettings/index.js‎

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

77
import React from 'react'
88
import { Radio } from 'antd'
9+
import 'antd/lib/radio/style/index.css'
910

1011
import { ICON_CMD, ISSUE_ADDR } from '@config'
1112
import { connectStore, buildLog, C11N } from '@utils'

‎static/antd-3.8.4-mini.css‎

Lines changed: 1 addition & 322 deletions
Original file line numberDiff line numberDiff line change
@@ -1233,328 +1233,7 @@ a.ant-btn-lg {
12331233
a.ant-btn-sm {
12341234
line-height: 22px;
12351235
}
1236-
.ant-radio-group {
1237-
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI',
1238-
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
1239-
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
1240-
'Segoe UI Symbol';
1241-
font-size: 14px;
1242-
font-variant: tabular-nums;
1243-
line-height: 1.5;
1244-
color: rgba(0, 0, 0, 0.65);
1245-
-webkit-box-sizing: border-box;
1246-
box-sizing: border-box;
1247-
margin: 0;
1248-
padding: 0;
1249-
list-style: none;
1250-
display: inline-block;
1251-
line-height: unset;
1252-
}
1253-
.ant-radio-wrapper {
1254-
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI',
1255-
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
1256-
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
1257-
'Segoe UI Symbol';
1258-
font-size: 14px;
1259-
font-variant: tabular-nums;
1260-
line-height: 1.5;
1261-
color: rgba(0, 0, 0, 0.65);
1262-
-webkit-box-sizing: border-box;
1263-
box-sizing: border-box;
1264-
margin: 0;
1265-
padding: 0;
1266-
list-style: none;
1267-
display: inline-block;
1268-
position: relative;
1269-
white-space: nowrap;
1270-
margin-right: 8px;
1271-
cursor: pointer;
1272-
}
1273-
.ant-radio {
1274-
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI',
1275-
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
1276-
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
1277-
'Segoe UI Symbol';
1278-
font-size: 14px;
1279-
font-variant: tabular-nums;
1280-
line-height: 1.5;
1281-
color: rgba(0, 0, 0, 0.65);
1282-
-webkit-box-sizing: border-box;
1283-
box-sizing: border-box;
1284-
margin: 0;
1285-
padding: 0;
1286-
list-style: none;
1287-
white-space: nowrap;
1288-
outline: none;
1289-
display: inline-block;
1290-
position: relative;
1291-
line-height: 1;
1292-
vertical-align: sub;
1293-
cursor: pointer;
1294-
}
1295-
.ant-radio-wrapper:hover .ant-radio .ant-radio-inner,
1296-
.ant-radio:hover .ant-radio-inner,
1297-
.ant-radio-focused .ant-radio-inner {
1298-
border-color: #1890ff;
1299-
}
1300-
.ant-radio-checked:after {
1301-
position: absolute;
1302-
top: 0;
1303-
left: 0;
1304-
width: 100%;
1305-
height: 100%;
1306-
border-radius: 50%;
1307-
border: 1px solid #1890ff;
1308-
content: '';
1309-
-webkit-animation: antRadioEffect 0.36s ease-in-out;
1310-
animation: antRadioEffect 0.36s ease-in-out;
1311-
-webkit-animation-fill-mode: both;
1312-
animation-fill-mode: both;
1313-
visibility: hidden;
1314-
}
1315-
.ant-radio:hover:after,
1316-
.ant-radio-wrapper:hover .ant-radio:after {
1317-
visibility: visible;
1318-
}
1319-
.ant-radio-inner {
1320-
position: relative;
1321-
top: 0;
1322-
left: 0;
1323-
display: block;
1324-
width: 16px;
1325-
height: 16px;
1326-
border-width: 1px;
1327-
border-style: solid;
1328-
border-radius: 100px;
1329-
border-color: #d9d9d9;
1330-
background-color: #fff;
1331-
-webkit-transition: all 0.3s;
1332-
transition: all 0.3s;
1333-
}
1334-
.ant-radio-inner:after {
1335-
position: absolute;
1336-
width: 8px;
1337-
height: 8px;
1338-
left: 3px;
1339-
top: 3px;
1340-
border-radius: 8px;
1341-
display: table;
1342-
border-top: 0;
1343-
border-left: 0;
1344-
content: ' ';
1345-
background-color: #1890ff;
1346-
opacity: 0;
1347-
-webkit-transform: scale(0);
1348-
-ms-transform: scale(0);
1349-
transform: scale(0);
1350-
-webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
1351-
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
1352-
}
1353-
.ant-radio-input {
1354-
position: absolute;
1355-
left: 0;
1356-
z-index: 1;
1357-
cursor: pointer;
1358-
opacity: 0;
1359-
top: 0;
1360-
bottom: 0;
1361-
right: 0;
1362-
}
1363-
.ant-radio-checked .ant-radio-inner {
1364-
border-color: #1890ff;
1365-
}
1366-
.ant-radio-checked .ant-radio-inner:after {
1367-
-webkit-transform: scale(0.875);
1368-
-ms-transform: scale(0.875);
1369-
transform: scale(0.875);
1370-
opacity: 1;
1371-
-webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
1372-
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
1373-
}
1374-
.ant-radio-disabled .ant-radio-inner {
1375-
border-color: #d9d9d9 !important;
1376-
background-color: #f5f5f5;
1377-
}
1378-
.ant-radio-disabled .ant-radio-inner:after {
1379-
background-color: #ccc;
1380-
}
1381-
.ant-radio-disabled .ant-radio-input {
1382-
cursor: not-allowed;
1383-
}
1384-
.ant-radio-disabled + span {
1385-
color: rgba(0, 0, 0, 0.25);
1386-
cursor: not-allowed;
1387-
}
1388-
span.ant-radio + * {
1389-
padding-left: 8px;
1390-
padding-right: 8px;
1391-
}
1392-
.ant-radio-button-wrapper {
1393-
margin: 0;
1394-
height: 32px;
1395-
line-height: 30px;
1396-
color: rgba(0, 0, 0, 0.65);
1397-
display: inline-block;
1398-
-webkit-transition: all 0.3s ease;
1399-
transition: all 0.3s ease;
1400-
cursor: pointer;
1401-
border: 1px solid #d9d9d9;
1402-
border-left: 0;
1403-
border-top-width: 1.02px;
1404-
background: #fff;
1405-
padding: 0 15px;
1406-
position: relative;
1407-
}
1408-
.ant-radio-button-wrapper a {
1409-
color: rgba(0, 0, 0, 0.65);
1410-
}
1411-
.ant-radio-button-wrapper > .ant-radio-button {
1412-
margin-left: 0;
1413-
display: block;
1414-
width: 0;
1415-
height: 0;
1416-
}
1417-
.ant-radio-group-large .ant-radio-button-wrapper {
1418-
height: 40px;
1419-
line-height: 38px;
1420-
font-size: 16px;
1421-
}
1422-
.ant-radio-group-small .ant-radio-button-wrapper {
1423-
height: 24px;
1424-
line-height: 22px;
1425-
padding: 0 7px;
1426-
}
1427-
.ant-radio-button-wrapper:not(:first-child)::before {
1428-
content: '';
1429-
display: block;
1430-
top: 0;
1431-
left: -1px;
1432-
width: 1px;
1433-
height: 100%;
1434-
position: absolute;
1435-
background-color: #d9d9d9;
1436-
}
1437-
.ant-radio-button-wrapper:first-child {
1438-
border-radius: 4px 0 0 4px;
1439-
border-left: 1px solid #d9d9d9;
1440-
}
1441-
.ant-radio-button-wrapper:last-child {
1442-
border-radius: 0 4px 4px 0;
1443-
}
1444-
.ant-radio-button-wrapper:first-child:last-child {
1445-
border-radius: 4px;
1446-
}
1447-
.ant-radio-button-wrapper:hover,
1448-
.ant-radio-button-wrapper-focused {
1449-
color: #1890ff;
1450-
position: relative;
1451-
}
1452-
.ant-radio-button-wrapper .ant-radio-inner,
1453-
.ant-radio-button-wrapper input[type='checkbox'],
1454-
.ant-radio-button-wrapper input[type='radio'] {
1455-
opacity: 0;
1456-
width: 0;
1457-
height: 0;
1458-
}
1459-
.ant-radio-button-wrapper-checked {
1460-
background: #fff;
1461-
border-color: #1890ff;
1462-
color: #1890ff;
1463-
-webkit-box-shadow: -1px 0 0 0 #1890ff;
1464-
box-shadow: -1px 0 0 0 #1890ff;
1465-
z-index: 1;
1466-
}
1467-
.ant-radio-button-wrapper-checked::before {
1468-
background-color: #1890ff !important;
1469-
opacity: 0.1;
1470-
}
1471-
.ant-radio-button-wrapper-checked:first-child {
1472-
border-color: #1890ff;
1473-
-webkit-box-shadow: none !important;
1474-
box-shadow: none !important;
1475-
}
1476-
.ant-radio-button-wrapper-checked:hover {
1477-
border-color: #40a9ff;
1478-
-webkit-box-shadow: -1px 0 0 0 #40a9ff;
1479-
box-shadow: -1px 0 0 0 #40a9ff;
1480-
color: #40a9ff;
1481-
}
1482-
.ant-radio-button-wrapper-checked:active {
1483-
border-color: #096dd9;
1484-
-webkit-box-shadow: -1px 0 0 0 #096dd9;
1485-
box-shadow: -1px 0 0 0 #096dd9;
1486-
color: #096dd9;
1487-
}
1488-
.ant-radio-group-solid
1489-
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
1490-
background: #1890ff;
1491-
border-color: #1890ff;
1492-
color: #fff;
1493-
}
1494-
.ant-radio-group-solid
1495-
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
1496-
border-color: #40a9ff;
1497-
background: #40a9ff;
1498-
color: #fff;
1499-
}
1500-
.ant-radio-group-solid
1501-
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
1502-
border-color: #096dd9;
1503-
background: #096dd9;
1504-
color: #fff;
1505-
}
1506-
.ant-radio-button-wrapper-disabled {
1507-
border-color: #d9d9d9;
1508-
background-color: #f5f5f5;
1509-
cursor: not-allowed;
1510-
color: rgba(0, 0, 0, 0.25);
1511-
}
1512-
.ant-radio-button-wrapper-disabled:first-child,
1513-
.ant-radio-button-wrapper-disabled:hover {
1514-
border-color: #d9d9d9;
1515-
background-color: #f5f5f5;
1516-
color: rgba(0, 0, 0, 0.25);
1517-
}
1518-
.ant-radio-button-wrapper-disabled:first-child {
1519-
border-left-color: #d9d9d9;
1520-
}
1521-
.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
1522-
color: #fff;
1523-
background-color: #e6e6e6;
1524-
border-color: #d9d9d9;
1525-
-webkit-box-shadow: none;
1526-
box-shadow: none;
1527-
}
1528-
@-webkit-keyframes antRadioEffect {
1529-
0% {
1530-
-webkit-transform: scale(1);
1531-
transform: scale(1);
1532-
opacity: 0.5;
1533-
}
1534-
100% {
1535-
-webkit-transform: scale(1.6);
1536-
transform: scale(1.6);
1537-
opacity: 0;
1538-
}
1539-
}
1540-
@keyframes antRadioEffect {
1541-
0% {
1542-
-webkit-transform: scale(1);
1543-
transform: scale(1);
1544-
opacity: 0.5;
1545-
}
1546-
100% {
1547-
-webkit-transform: scale(1.6);
1548-
transform: scale(1.6);
1549-
opacity: 0;
1550-
}
1551-
}
1552-
@supports (-moz-appearance: meterbar) and
1553-
(background-blend-mode: difference, normal) {
1554-
.ant-radio {
1555-
vertical-align: text-bottom;
1556-
}
1557-
}
1236+
15581237
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
15591238
/* stylelint-disable no-duplicate-selectors */
15601239
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */

0 commit comments

Comments
 (0)