src/style/button.css · bridge

git.iko.soy/bridge

on c59dd78 help sign in

bridge/src/style/button.css

120 lines 2.4 kB history raw

2button[prop-type='link'] {

3 font-family: 'Inter UI';

4 background-color: transparent;

5 font-weight: 400;

6 text-decoration: underline;

7 user-select: auto;

8 padding: 0rem;

11button[prop-type='link']:disabled {

12 color: #B3B3B3;

13}

15button[prop-type='link'][prop-size='sm'] {

16 font-size: 3.5rem;

17 margin-bottom: 0rem;

18}

20button[prop-type='link'][prop-size="md"] {

21 font-size: 4rem;

22 margin-bottom: 1rem;

23}

25button[prop-type='link'][prop-size='lg'] {

26 font-size: 5rem;

27 margin-bottom: 2rem;

28}

30button.solid {

31 font-family: 'Inter UI';

32 border-width: 2px;

33 border-style: solid;

34}

36button[prop-type='solid'][prop-color='blue'] {

37 background-color: #4330FC;

38 border-color: #4330FC;

39 color: white;

40}

42button[prop-type='solid'][prop-color='blue']:focus {

43 box-shadow: 0 0 0 3px #DAD6FF;

44}

46button[prop-type='solid'][prop-color='green'] {

47 background-color: #2AA779;

48 border-color: #2AA779;

49 color: white;

50}

52button[prop-type='solid'][prop-color='green']:focus {

53 box-shadow: 0 0 0 3px #C5FBE7;

54}

56button[prop-type='solid'][prop-color='yellow'] {

57 background-color: #F8C134;

58 border-color: #F8C134;

59 color: white;

60}

62button[prop-type='solid'][prop-color='yellow']:focus {

63 box-shadow: 0 0 0 3px #FFEFC5;

64}

66button[prop-type='solid'][prop-size*='sm'] {

67 height: 6rem;

68 padding: 0 2rem 0 2rem;

69 font-size: 3rem;

70}

72button[prop-type='solid'][prop-size*='md'] {

73 height: 9rem;

74 padding: 0 4rem 0 4rem;

75 font-size: 3.5rem;

76}

78button[prop-type='solid'][prop-size*='lg'] {

79 height: 11rem;

80 padding: 0 6rem 0 6rem;

81 font-size: 4rem;

82}

84button[prop-type='solid'][prop-size*='xl'] {

85 height: 16rem;

86 padding: 0 6rem 0 6rem;

87 font-size: 4.5rem;

88}

90button[prop-type='solid']:disabled {

91 background-color: #B3B3B3;

92 border-color: #B3B3B3;

93}

95button[prop-type='solid'][prop-size*='wide'] {

96 width: 100%;

97}

99.btn-spinner {

100 position: absolute;

101 display: inline-block;

102 width: 20px;

103 height: 20px;

104 left: -35px;

105}

106

107.btn-spinner::after {

108 position: absolute;

109 width: 16px;

110 height: 16px;

111 bottom: 0;

112 content: "◠";

113 animation: spin linear 1s infinite;

114 font-size: 20px;

115 line-height: 20px;

116}

117

118@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

119@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

120@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }