holygrail2 1.0.29 → 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/guide/index.html +39 -15
  2. package/package.json +1 -1
  3. package/scss/elements/_buttons.scss +57 -57
package/guide/index.html CHANGED
@@ -1975,8 +1975,10 @@
1975
1975
  </div>
1976
1976
  <b> Icons Buttons </b>
1977
1977
  <div class="grid-4">
1978
+
1979
+
1978
1980
  <div class="btn btn-primary btn--small has-ico-pre">
1979
- <svg-icon src="question">
1981
+ <svg-icon src="question" class="mr-16">
1980
1982
  <div class="ico-pre">
1981
1983
  <svg width="16" height="16" viewBox="0 0 16 16">
1982
1984
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -1987,8 +1989,12 @@
1987
1989
  </svg-icon>
1988
1990
  ico-pre
1989
1991
  </div>
1992
+
1993
+
1994
+
1990
1995
  <div class="btn btn-primary btn--small has-ico-post">
1991
- <svg-icon src="question">
1996
+ ico-post
1997
+ <svg-icon src="question" class="ml-16">
1992
1998
  <div class="ico-post">
1993
1999
  <svg width="16" height="16" viewBox="0 0 16 16">
1994
2000
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -1996,10 +2002,15 @@
1996
2002
  </g>
1997
2003
  </svg>
1998
2004
  </div>
1999
- </svg-icon> ico-post
2005
+ </svg-icon>
2000
2006
  </div>
2007
+
2008
+
2009
+
2010
+
2011
+
2001
2012
  <div class="btn btn-primary btn--small has-ico-pre disabled">
2002
- <svg-icon src="question">
2013
+ <svg-icon src="question" class="mr-16">
2003
2014
  <div class="ico-post">
2004
2015
  <svg width="16" height="16" viewBox="0 0 16 16">
2005
2016
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2007,10 +2018,15 @@
2007
2018
  </g>
2008
2019
  </svg>
2009
2020
  </div>
2010
- </svg-icon> ico-pre
2021
+ </svg-icon>
2022
+ ico-pre
2023
+
2011
2024
  </div>
2025
+
2026
+
2012
2027
  <div class="btn btn-primary btn--small has-ico-post disabled">
2013
- <svg-icon src="question">
2028
+ ico-post
2029
+ <svg-icon src="question" class="ml-16">
2014
2030
  <div class="ico-post">
2015
2031
  <svg width="16" height="16" viewBox="0 0 16 16">
2016
2032
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2018,10 +2034,12 @@
2018
2034
  </g>
2019
2035
  </svg>
2020
2036
  </div>
2021
- </svg-icon> ico-post
2037
+ </svg-icon>
2022
2038
  </div>
2039
+
2040
+
2023
2041
  <div class="btn btn-secondary btn--small has-ico-pre">
2024
- <svg-icon src="question">
2042
+ <svg-icon src="question"class="mr-16">
2025
2043
  <div class="ico-pre">
2026
2044
  <svg width="16" height="16" viewBox="0 0 16 16">
2027
2045
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2031,8 +2049,12 @@
2031
2049
  </div>
2032
2050
  </svg-icon>ico-pre
2033
2051
  </div>
2052
+
2053
+
2054
+
2034
2055
  <div class="btn btn-secondary btn--small has-ico-post">
2035
- <svg-icon src="question">
2056
+ ico-post
2057
+ <svg-icon src="question" class="ml-16">
2036
2058
  <div class="ico-post">
2037
2059
  <svg width="16" height="16" viewBox="0 0 16 16">
2038
2060
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2040,10 +2062,11 @@
2040
2062
  </g>
2041
2063
  </svg>
2042
2064
  </div>
2043
- </svg-icon>ico-post
2065
+ </svg-icon>
2044
2066
  </div>
2067
+
2045
2068
  <div class="btn btn-secondary btn--small has-ico-pre guide-hover">
2046
- <svg-icon src="question">
2069
+ <svg-icon src="question" class="mr-16">
2047
2070
  <div class="ico-pre">
2048
2071
  <svg width="16" height="16" viewBox="0 0 16 16">
2049
2072
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2054,7 +2077,8 @@
2054
2077
  </svg-icon> Action
2055
2078
  </div>
2056
2079
  <div class="btn btn-secondary btn--small has-ico-post guide-hover">
2057
- <svg-icon src="question">
2080
+ Action
2081
+ <svg-icon src="question" class="ml-16">
2058
2082
  <div class="ico-post">
2059
2083
  <svg width="16" height="16" viewBox="0 0 16 16">
2060
2084
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2062,10 +2086,10 @@
2062
2086
  </g>
2063
2087
  </svg>
2064
2088
  </div>
2065
- </svg-icon> Action
2089
+ </svg-icon>
2066
2090
  </div>
2067
2091
  <div class="btn btn-secondary btn--medium has-ico-center mb-24">
2068
- <svg-icon src="question">
2092
+ <svg-icon src="question" class="mr-16">
2069
2093
  <div>
2070
2094
  <svg width="16" height="16" viewBox="0 0 16 16">
2071
2095
  <g stroke-width="1" fill="none" stroke="#212121">
@@ -2077,7 +2101,7 @@
2077
2101
  </div>
2078
2102
  <div class="btn btn-secondary btn--medium has-ico-center">
2079
2103
  Action
2080
- <svg-icon src="question">
2104
+ <svg-icon src="question" class="ml-16">
2081
2105
  <div>
2082
2106
  <svg width="16" height="16" viewBox="0 0 16 16">
2083
2107
  <g stroke-width="1" fill="none" stroke="#212121">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "holygrail2",
3
- "version": "1.0.29",
3
+ "version": "1.0.30",
4
4
  "description": "A minimal, responsive, style-agnostic CSS framework.",
5
5
  "main": "scss/style.scss",
6
6
  "directories": {
package/scss/elements/_buttons.scss CHANGED
@@ -44,7 +44,7 @@ button {
44
44
  pointer-events: none;
45
45
  filter: grayscale(1);
46
46
  background-color: $c-middle-grey;
47
- border: var(--line-width) solid $c-middle-grey;
47
+ border: 1px solid $c-middle-grey;
48
48
  color: $c-dark-grey;
49
49
  opacity: 1;
50
50
  cursor: not-allowed;
@@ -78,7 +78,7 @@ button {
78
78
  pointer-events: none;
79
79
  filter: grayscale(1);
80
80
  background-color: $c-middle-grey;
81
- border: var(--line-width) solid $c-middle-grey;
81
+ border: 1px solid $c-middle-grey;
82
82
  color: $c-dark-grey;
83
83
  opacity: 1;
84
84
  }
@@ -102,7 +102,7 @@ button {
102
102
  &.btn-feel-invert {
103
103
  color: $c-primary;
104
104
  background-color: transparent;
105
- border: var(--line-width) solid $c-feel;
105
+ border: 1px solid $c-feel;
106
106
  svg {
107
107
  g {
108
108
  fill: $c-primary;
@@ -245,7 +245,7 @@ button {
245
245
  padding-bottom: 6px;
246
246
  justify-content: center;
247
247
  align-items: flex-start;
248
- border-bottom: var(--line-width) solid $c-primary;
248
+ border-bottom: 1px solid $c-primary;
249
249
  }
250
250
 
251
251
  .btn--full {
@@ -263,7 +263,7 @@ button {
263
263
  .btn-primary {
264
264
  color: $c-white;
265
265
  background-color: $c-primary;
266
- border: var(--line-width) solid $c-primary;
266
+ border: 1px solid $c-primary;
267
267
 
268
268
  svg {
269
269
  g {
@@ -286,7 +286,7 @@ button {
286
286
  &.active {
287
287
  color: $c-white;
288
288
  background-color: $c-dark-grey;
289
- border: var(--line-width) solid $c-dark-grey;
289
+ border: 1px solid $c-dark-grey;
290
290
  opacity: 1;
291
291
  }
292
292
 
@@ -294,7 +294,7 @@ button {
294
294
  &:disabled,
295
295
  &.disabled {
296
296
  background-color: $c-middle-grey;
297
- border: var(--line-width) solid $c-middle-grey;
297
+ border: 1px solid $c-middle-grey;
298
298
  color: $c-dark-grey;
299
299
  opacity: 1;
300
300
 
@@ -316,7 +316,7 @@ button {
316
316
  .has-light & {
317
317
  color: $c-primary;
318
318
  background-color: $c-white;
319
- border: var(--line-width) solid $c-white;
319
+ border: 1px solid $c-white;
320
320
 
321
321
  svg {
322
322
  g {
@@ -340,7 +340,7 @@ button {
340
340
  &.active {
341
341
  color: $c-white;
342
342
  background-color: $c-dark-grey;
343
- border: var(--line-width) solid $c-dark-grey;
343
+ border: 1px solid $c-dark-grey;
344
344
  opacity: 1;
345
345
 
346
346
  svg {
@@ -362,7 +362,7 @@ button {
362
362
  &:disabled,
363
363
  &.disabled {
364
364
  background-color: $c-middle-grey;
365
- border: var(--line-width) solid $c-middle-grey;
365
+ border: 1px solid $c-middle-grey;
366
366
  color: $c-dark-grey;
367
367
  opacity: 1;
368
368
  }
@@ -372,7 +372,7 @@ button {
372
372
  .btn-secondary {
373
373
  color: $c-primary;
374
374
  background-color: $c-white;
375
- border: var(--line-width) solid $c-primary;
375
+ border: 1px solid $c-primary;
376
376
 
377
377
  svg {
378
378
  g {
@@ -395,7 +395,7 @@ button {
395
395
  &.active {
396
396
  color: $c-primary;
397
397
  background-color: $c-white;
398
- border: var(--line-width) solid $c-dark-grey;
398
+ border: 1px solid $c-dark-grey;
399
399
  opacity: 1;
400
400
  }
401
401
 
@@ -403,7 +403,7 @@ button {
403
403
  &:disabled,
404
404
  &.disabled {
405
405
  background-color: $c-white;
406
- border: var(--line-width) solid $c-middle-grey;
406
+ border: 1px solid $c-middle-grey;
407
407
  color: $c-dark-grey;
408
408
  opacity: 1;
409
409
 
@@ -425,7 +425,7 @@ button {
425
425
  .has-light & {
426
426
  color: $c-white;
427
427
  background-color: transparent;
428
- border: var(--line-width) solid $c-white;
428
+ border: 1px solid $c-white;
429
429
 
430
430
  svg {
431
431
  g {
@@ -449,7 +449,7 @@ button {
449
449
  &.active {
450
450
  color: $c-white;
451
451
  background-color: $c-dark-grey;
452
- border: var(--line-width) solid $c-dark-grey;
452
+ border: 1px solid $c-dark-grey;
453
453
  opacity: 1;
454
454
 
455
455
  svg {
@@ -471,7 +471,7 @@ button {
471
471
  &:disabled,
472
472
  &.disabled {
473
473
  background-color: transparent;
474
- border: var(--line-width) solid $c-dark-grey;
474
+ border: 1px solid $c-dark-grey;
475
475
  color: $c-dark-grey;
476
476
  opacity: 1;
477
477
  }
@@ -481,7 +481,7 @@ button {
481
481
  .btn-phantom {
482
482
  color: $c-white;
483
483
  background-color: transparent;
484
- border: var(--line-width) solid $c-white;
484
+ border: 1px solid $c-white;
485
485
 
486
486
  svg {
487
487
  g {
@@ -505,7 +505,7 @@ button {
505
505
  &.active {
506
506
  color: $c-primary;
507
507
  background-color: transparent;
508
- border: var(--line-width) solid $c-dark-grey;
508
+ border: 1px solid $c-dark-grey;
509
509
  opacity: 1;
510
510
  }
511
511
  }
@@ -514,7 +514,7 @@ button {
514
514
  height: 40px;
515
515
  color: $c-white;
516
516
  background-color: $c-limited;
517
- border: var(--line-width) solid $c-limited;
517
+ border: 1px solid $c-limited;
518
518
 
519
519
  svg {
520
520
  g {
@@ -565,14 +565,14 @@ button {
565
565
  &.disabled {
566
566
  pointer-events: none;
567
567
  cursor: default;
568
- border: var(--line-width) solid $c-middle-grey !important;
568
+ border: 1px solid $c-middle-grey !important;
569
569
  color: $c-dark-grey !important;
570
570
  background-color: $c-middle-grey !important;
571
571
  filter: none;
572
572
  opacity: 1;
573
573
  svg-icon {
574
574
  background-color: $c-middle-grey !important;
575
- border: var(--line-width) solid $c-middle-grey !important;
575
+ border: 1px solid $c-middle-grey !important;
576
576
  }
577
577
  }
578
578
  }
@@ -580,7 +580,7 @@ button {
580
580
  .btn-secondary-feel {
581
581
  color: $c-primary;
582
582
  background-color: $c-white;
583
- border: var(--line-width) solid $c-primary;
583
+ border: 1px solid $c-primary;
584
584
 
585
585
  svg {
586
586
  g {
@@ -601,7 +601,7 @@ button {
601
601
  &.active {
602
602
  opacity: 1;
603
603
  color: $c-primary;
604
- border: var(--line-width) solid $c-dark-grey;
604
+ border: 1px solid $c-dark-grey;
605
605
  background-color: $c-white;
606
606
  }
607
607
 
@@ -610,14 +610,14 @@ button {
610
610
  &.disabled {
611
611
  pointer-events: none;
612
612
  cursor: default;
613
- border: var(--line-width) solid $c-middle-grey !important;
613
+ border: 1px solid $c-middle-grey !important;
614
614
  color: $c-dark-grey !important;
615
615
  background-color: $c-middle-grey !important;
616
616
  filter: none;
617
617
  opacity: 1;
618
618
  svg-icon {
619
619
  background-color: $c-middle-grey !important;
620
- border: var(--line-width) solid $c-middle-grey !important;
620
+ border: 1px solid $c-middle-grey !important;
621
621
  }
622
622
  }
623
623
 
@@ -634,7 +634,7 @@ button {
634
634
  &.active {
635
635
  opacity: 1;
636
636
  color: $c-white;
637
- border: var(--line-width) solid $c-dark-grey;
637
+ border: 1px solid $c-dark-grey;
638
638
  background-color: $c-dark-grey;
639
639
  }
640
640
  }
@@ -643,7 +643,7 @@ button {
643
643
  .btn-tertiary {
644
644
  color: $c-primary;
645
645
  background-color: $c-white;
646
- border: var(--line-width) solid $c-primary;
646
+ border: 1px solid $c-primary;
647
647
 
648
648
  svg {
649
649
  g {
@@ -664,7 +664,7 @@ button {
664
664
  &.active {
665
665
  opacity: 1;
666
666
  color: $c-primary;
667
- border: var(--line-width) solid $c-dark-grey;
667
+ border: 1px solid $c-dark-grey;
668
668
  background-color: $c-white;
669
669
  }
670
670
 
@@ -673,14 +673,14 @@ button {
673
673
  &.disabled {
674
674
  pointer-events: none;
675
675
  cursor: default;
676
- border: var(--line-width) solid $c-middle-grey !important;
676
+ border: 1px solid $c-middle-grey !important;
677
677
  color: $c-dark-grey !important;
678
678
  background-color: $c-middle-grey !important;
679
679
  filter: none;
680
680
  opacity: 1;
681
681
  svg-icon {
682
682
  background-color: $c-middle-grey !important;
683
- border: var(--line-width) solid $c-middle-grey !important;
683
+ border: 1px solid $c-middle-grey !important;
684
684
  }
685
685
  }
686
686
 
@@ -697,7 +697,7 @@ button {
697
697
  &.active {
698
698
  opacity: 1;
699
699
  color: $c-white;
700
- border: var(--line-width) solid $c-dark-grey;
700
+ border: 1px solid $c-dark-grey;
701
701
  background-color: $c-dark-grey;
702
702
  }
703
703
  }
@@ -712,7 +712,7 @@ button {
712
712
  .btn-invert {
713
713
  color: $c-primary;
714
714
  background-color: transparent;
715
- border: var(--line-width) solid $c-primary;
715
+ border: 1px solid $c-primary;
716
716
 
717
717
  &:focus,
718
718
  &.focus,
@@ -727,7 +727,7 @@ button {
727
727
  .btn-invert-light {
728
728
  color: $c-primary;
729
729
  background-color: transparent;
730
- border: var(--line-width) solid $c-middle-grey;
730
+ border: 1px solid $c-middle-grey;
731
731
 
732
732
  &:focus,
733
733
  &.focus,
@@ -746,14 +746,14 @@ button {
746
746
 
747
747
  .btn-default {
748
748
  background-color: $c-primary;
749
- border: var(--line-width) solid $c-primary;
749
+ border: 1px solid $c-primary;
750
750
  color: $c-white;
751
751
  }
752
752
 
753
753
  .btn-blue {
754
754
  background-color: $c-info;
755
755
  color: $c-white;
756
- border: var(--line-width) solid $c-info;
756
+ border: 1px solid $c-info;
757
757
  &:focus,
758
758
  &.focus,
759
759
  &:hover,
@@ -883,10 +883,10 @@ button {
883
883
  .has-light .btn-google {
884
884
  background-color: $c-white;
885
885
  color: $c-primary;
886
- border: var(--line-width) solid $c-white;
886
+ border: 1px solid $c-white;
887
887
 
888
888
  svg-icon {
889
- top: var(--line-width);
889
+ top: 1px;
890
890
  }
891
891
 
892
892
  &:focus,
@@ -896,7 +896,7 @@ button {
896
896
  &:visited,
897
897
  &:active,
898
898
  &.active {
899
- border: var(--line-width) solid $c-light-grey;
899
+ border: 1px solid $c-light-grey;
900
900
  opacity: 1;
901
901
  }
902
902
  }
@@ -904,7 +904,7 @@ button {
904
904
  .btn-facebook {
905
905
  background-color: $c-facebook;
906
906
  color: $c-white;
907
- border: var(--line-width) solid $c-facebook;
907
+ border: 1px solid $c-facebook;
908
908
 
909
909
  svg-icon {
910
910
  background-color: transparent;
@@ -923,13 +923,13 @@ button {
923
923
  &.active {
924
924
  opacity: 1;
925
925
  background-color: $c-facebook;
926
- border: var(--line-width) solid $c-facebook;
926
+ border: 1px solid $c-facebook;
927
927
  }
928
928
 
929
929
  .has-light & {
930
930
  background-color: $c-facebook;
931
931
  color: $c-white;
932
- border: var(--line-width) solid $c-facebook;
932
+ border: 1px solid $c-facebook;
933
933
  }
934
934
  }
935
935
 
@@ -937,7 +937,7 @@ button {
937
937
  .has-light .btn-apple {
938
938
  background-color: $c-black;
939
939
  color: $c-white;
940
- border: var(--line-width) solid $c-black;
940
+ border: 1px solid $c-black;
941
941
 
942
942
  &:focus,
943
943
  &.focus,
@@ -948,7 +948,7 @@ button {
948
948
  &.active {
949
949
  opacity: 1;
950
950
  background-color: $c-dark-grey;
951
- border: var(--line-width) solid $c-dark-grey;
951
+ border: 1px solid $c-dark-grey;
952
952
  }
953
953
  }
954
954
 
@@ -956,7 +956,7 @@ button {
956
956
  .has-light .btn-apple-secondary {
957
957
  background-color: $c-white;
958
958
  color: $c-black;
959
- border: var(--line-width) solid $c-black;
959
+ border: 1px solid $c-black;
960
960
  &:focus,
961
961
  &.focus,
962
962
  &:hover,
@@ -966,7 +966,7 @@ button {
966
966
  &.active {
967
967
  opacity: 1;
968
968
  background-color: $c-white;
969
- border: var(--line-width) solid $c-dark-grey;
969
+ border: 1px solid $c-dark-grey;
970
970
  }
971
971
  }
972
972
 
@@ -975,7 +975,7 @@ button {
975
975
  background-color: $c-naver;
976
976
  color: $c-white;
977
977
  padding-left: 40px;
978
- border: var(--line-width) solid $c-naver;
978
+ border: 1px solid $c-naver;
979
979
 
980
980
  &:focus,
981
981
  &.focus,
@@ -986,7 +986,7 @@ button {
986
986
  &.active {
987
987
  opacity: 1;
988
988
  background-color: $c-naver;
989
- border: var(--line-width) solid $c-naver;
989
+ border: 1px solid $c-naver;
990
990
  }
991
991
  }
992
992
 
@@ -995,7 +995,7 @@ button {
995
995
  background-color: $c-wechat;
996
996
  color: $c-white;
997
997
  padding-left: 40px;
998
- border: var(--line-width) solid $c-wechat;
998
+ border: 1px solid $c-wechat;
999
999
 
1000
1000
  &:focus,
1001
1001
  &.focus,
@@ -1006,7 +1006,7 @@ button {
1006
1006
  &.active {
1007
1007
  opacity: 1;
1008
1008
  background-color: $c-naver;
1009
- border: var(--line-width) solid $c-wechat;
1009
+ border: 1px solid $c-wechat;
1010
1010
  }
1011
1011
  }
1012
1012
 
@@ -1186,7 +1186,7 @@ button {
1186
1186
 
1187
1187
  .btn-feel {
1188
1188
  background-color: $c-feel;
1189
- border: var(--line-width) solid $c-feel;
1189
+ border: 1px solid $c-feel;
1190
1190
  color: $c-primary;
1191
1191
 
1192
1192
  &:hover,
@@ -1194,7 +1194,7 @@ button {
1194
1194
  &:focus,
1195
1195
  &.focus {
1196
1196
  background-color: $c-feel-light;
1197
- border: var(--line-width) solid $c-feel-light;
1197
+ border: 1px solid $c-feel-light;
1198
1198
  color: $c-primary;
1199
1199
  opacity: 1;
1200
1200
  }
@@ -1203,14 +1203,14 @@ button {
1203
1203
  &:disabled,
1204
1204
  &.disabled {
1205
1205
  background-color: $c-middle-grey;
1206
- border: var(--line-width) solid $c-middle-grey;
1206
+ border: 1px solid $c-middle-grey;
1207
1207
  color: $c-dark-grey;
1208
1208
  opacity: 1;
1209
1209
  }
1210
1210
 
1211
1211
  .has-light & {
1212
1212
  background-color: $c-feel;
1213
- border: var(--line-width) solid $c-feel;
1213
+ border: 1px solid $c-feel;
1214
1214
  color: $c-primary;
1215
1215
 
1216
1216
  &:hover,
@@ -1218,7 +1218,7 @@ button {
1218
1218
  &:focus,
1219
1219
  &.focus {
1220
1220
  background-color: $c-feel-light;
1221
- border: var(--line-width) solid $c-feel-light;
1221
+ border: 1px solid $c-feel-light;
1222
1222
  color: $c-primary;
1223
1223
  opacity: 1;
1224
1224
  }
@@ -1227,7 +1227,7 @@ button {
1227
1227
  &:disabled,
1228
1228
  &.disabled {
1229
1229
  background-color: $c-middle-grey;
1230
- border: var(--line-width) solid $c-middle-grey;
1230
+ border: 1px solid $c-middle-grey;
1231
1231
  color: $c-dark-grey;
1232
1232
  opacity: 1;
1233
1233
  }
@@ -1292,7 +1292,7 @@ button {
1292
1292
  .btn.btn-secondary-rd {
1293
1293
  font-size: $text-input-d;
1294
1294
  border-radius: $btn-radius;
1295
- border: var(--line-width) solid $c-primary;
1295
+ border: 1px solid $c-primary;
1296
1296
  padding: 9px 2px 4px;
1297
1297
  height: 32px;
1298
1298
  min-width: 100px;
@@ -1316,7 +1316,7 @@ button {
1316
1316
  .btn-phantom {
1317
1317
  color: $c-white;
1318
1318
  background-color: transparent;
1319
- border: var(--line-width) solid $c-white;
1319
+ border: 1px solid $c-white;
1320
1320
  }
1321
1321
 
1322
1322
  .btn-primary-feel {